Typography

Native typography elements (<h1>...<h6>, <p>, <li>) are meant to define the document outline, and should be separated from visual requirements. An <h3> in one module may look nothing like the <h3> in another, and header levels can always change based on SEO.

While we do create default styling for native elements (for the sake of rich text blocks, and for default styling in places where we have limited control), this repo uses primarily Content-Based Type Classes to style all text.

To style type elements, open ~/src/styles/utilities/_typography.scss and create a responsive, content-based class with a name that describes the most common usage for that type style. Include the placeholder selector (%) to allow for clean extensions as optional:

EXAMPLE

// ~/src/styles/utilities/_typography.scss

%txt-footer-link,
.txt-footer-link {
  @extend %font-manrope-bold;
  font-size: ...;
  letter-spacing: ...;
  line-height: ...;

  @include breakpoint-up('sm') {
    font-size: ...;
    letter-spacing: ...;
    line-height: ...;
  }
}

Implement type classes with @extend

Once a type class has been created, @extend or include in components as necessary.

EXAMPLE

.footer-link {
  @extend %txt-footer-link;
  color: $black;
}

You can also use classes directly in markup, i.e. <a href="" class="txt-footer-link">About Us</a>.

IMPORTANT: We prefer to use typography classes directly in markup instead of extending in everyplace to reduce the css selectors size.

Typography units

In short, use:

font-size: <rem>;
letter-spacing: <em>;
line-height: <unitless>;

Several functions have been created to make translating these values from comp to code easier. Most comping applications have values available in px, so:

font-size: fontsize(<font size in pixels>);
letter-spacing: letterspacing(<letter spacing in pixels>);
line-height: lineheight(<line height in pixels>, <font size in pixels>);

The first lineheight() parameter also accepts a value of "normal", which returns 1.2, the standard numerical value for line height in design. In this case, the second parameter is ignored.