Typography

Description

Generates classes for responsive typography sets. The idea being that instead of manually setting font settings for every breakpoint - you would instead have a responsive system set up.

Similiar to responsive spacing, at AREA 17 we like responsive typesets classes so that the type across a site can be known and predictable. We define our type system and then use them consistently across a site. We never have a unique type style or a unique style at a breakpoint - everything is part of the system.

Setup

In addition to the required $structure map (Setup), you should add a $typography map to your _tokens.scss, with the following format:

$typography: (
  families: (
    sans: "SuisseIntl, Helvetica, Arial, sans-serif"
  ),
  typesets: (
    h1: (
      xs: (
        font-family: "var(--sans)",
        font-weight: 500,
        bold-weight: 500,
        font-size: 32,
        line-height: 1.2,
        letter-spacing: -0.02em,
        font-smoothing: true
      ),
      md: (
        font-size: 36px
      ),
      lg: (
        font-size: 48px
      )
    ),
    h2: (
      xs: (
        font-family: "var(--sans)",
        font-weight: 500,
        bold-weight: 500,
        font-size: 20px,
        line-height: 1.2,
        letter-spacing: -0.02em,
        font-smoothing: true
      ),
      md: (
        font-size: 24px
      ),
      lg: (
        font-size: 28px
      )
    ),
    body: (
      xs: (
        font-family: "var(--sans)",
        bold-weight: 500,
        font-size: 14px,
        line-height: 1.7,
        font-smoothing: true
      ),
      md: (
        font-size: 16px
      )
    )
  )
);

Settable type properties

You can set any CSS key/value type for fonts/text styles and also two some special, none standard font properties you can set:

• bold-weight - sets a variable of --bold-weight and sets any b or strong children of the element to use font-weight: var(--bold-weight); to give you control over the font weights
• font-smoothing - true or false, sets antialiased and subpixel-antialiased

Output

Based on the reference config mentioned in this guide, for the typeset named h1 we'd get the following in our CSS:

.f-h1 {
  font-family: var(--sans);
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  --bold-weight: 500;
}

.f-h1 b, .f-h1 strong {
  font-weight: var(--bold-weight);
}

@media (min-width: 990px) {
  .f-h1 {
    font-size: 3rem;
  }
}

@media (min-width: 650px) {
  .f-h1 {
    font-size: 2.25rem;
  }
}

Similarly for the typeset named h1 we would get classes for each of the other typesets - in this guide that would include f-h2, f-body etc.

Demo

Based on the reference config mentioned in this guide, we would get the following in our CSS:

<p class="f-h1">f-h1 The quick brown fox jumps over the lazy dog</p>
<p class="f-h2">f-h2 The quick brown fox jumps over the lazy dog</p>
<p class="f-body">f-body The quick brown fox jumps over the lazy dog</p>

These font styles can also be applied via SCSS @include typeset(name):

.component > p {
  @include typeset(body); // @include typeset(f-body); also works
}

These font styles can also be applied via SCSS @extend:

.component > p {
  @extend f-body;
}

Notes

As you can see, this generates a reasonable number of CSS classes - you will want to purge your CSS of unused classes to remove any of these that you don't use.

Alternatively, if you don't want to generate the CSS classes, see CSS-Class-Generation.