Headings / Typography

Adjust default heading size and other typography changes.

After you've adjusted all of your variables, adjust your heading sizes, and other typography elements to match your design or style guide.

Variables

In the scss/global/_variables.scss in your subtheme directory, and edit the font size variables.

$font-size-base: 1rem;

// Font Sizes and Weights
$font-size-lg: $font-size-base * 1.25;
$font-size-sm: $font-size-base * .875;
$font--xs: $font-size-base * .75;
$font-weight-normal: normal;
$font-weight-bold: bold;
$font-weight-base: $font-weight-normal;
$line-height-base: 1.5;
$h1-font-size: $font-size-base * 5;
$h2-font-size: $font-size-base * 2.25;
$h3-font-size: $font-size-base * 1.5;
$h4-font-size: $font-size-base * 1.125;
$h5-font-size: $font-size-base;
$h6-font-size: $font-size-base;

You can use variables and simple math as depicted here, or you can adjust them to specific font-sizes.

Heading styles

Next navigate to /scss/components/_headings.scss in your subtheme directory.

Here we will have the ability to adjust all headings, and their corresponding attributes such as line-height, color, font-style, font-weight, as well as hover states for links. Below is a selection of the H1 style, and what that looks like

@mixin heading-xl($font-family: $font-heading, $font-size: $h1-font-size, $line-height: 5.5rem, $color: $color-heading, $color-link: inherit, $color-link-hover: inherit, $font-weight: 600, $margin: 0) {
  color: $color;
  font-family: $font-family;
  font-weight: $font-weight;
  font-style: normal;
  font-size: $font-size;
  line-height: $line-height;
  margin: 1rem $margin;
  width: auto;
  letter-spacing: -1.776px;

  &__link {
    color: $color-link;

    &:hover {
      color: $color-link-hover;
    }
  }
}

Other typography

You may want to adjust some of the other typography elements such as links, lists, blockquotes, etc.. These are all setup as components inside of/scss/components

Navigate to each of these files, and make any needed adjustments for things like default links, unordered lists, blockquotes, etc.

Always remember to save your edits and compile your Sass files using Grunt or Gulp and clear caches for the changes to render on your site.