Font

The font foundation allows you to define reusable, consistent typographic styles across your design system. Each font class is generated using a corresponding mixin, mapped to a specific font family, size, weight, and line height.

Learn More

To ensure proper font rendering and avoid layout shift issues, make sure to read Font Performance Migration: Enhanced Fallback Fonts. It covers how to implement enhanced fallback fonts with metric overrides — a required step to maintain visual consistency and performance across devices.

---

Naming conventions

.f--font-{variation}

• {variation} represents a specific font style (e.g., a, b, c)
• Each variation is generated from a mixin with predefined properties

---

How it works

Font foundation classes are generated from individual mixins. Each mixin defines:

• Font family
• Font size
• Font weight
• Line height
• Optional responsive adjustments

Example of a font mixin:

@mixin make-font-a {
  font-family: 'Fustat', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;

  @media all and ($viewport-type: $tabletm) {
    font-size: 16px;
  }
}

These mixins are then compiled into classes like .f--font-a, .f--font-b, etc.

Font imports: Your project includes custom font families declared using @font-face:

@font-face {
  font-family: 'Fustat';
  src: url('#{$base-path}/fonts/Fustat-Regular.woff2') format('woff2'),
       url('#{$base-path}/fonts/Fustat-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

This ensures proper fallback, loading behavior, and style consistency across browsers.

---

How to use it

In HTML

<p class="f--font-a">This text uses font style A</p>
<h2 class="f--font-b">This heading uses font style B</h2>

In SCSS

// using @extend (recommended)
.c--component-a {
  @extend .f--font-a;
}

// using the mixin directly (only if necessary)
.c--component-a {
  @include make-font-a();
}

---

Font Weight

When using typography mixins, you can specify font weights:

Weight	Name	When to Use
400	Regular	Default body text, standard headings
500	Medium	Lead paragraphs, emphasized text
600	Semi-Bold	Subheadings, important labels
700	Bold	Primary headings, strong emphasis

Example:

.c--my-heading {
  @extend .u--font-bold;      // Extend font-bold
}

.c--my-paragraph {
  @extend .u--font-medium;    // Extend font-medium
}

---

Best Practices

Do’s ✅

• ✅ Use .f--font-* utility classes for consistent typography
• ✅ Let the responsive scaling work automatically (don’t override breakpoints unless absolutely necessary)
• ✅ Use appropriate font weights utilities (400 for regular, 500 for medium, 600-700 for bold)
• ✅ Reference Figma to verify which font token to use for each element

Don’ts ❌

• ❌ Don’t use arbitrary font sizes like font-size: 23px - always use the defined font tokens
• ❌ Don’t create new font sizes without consulting the design team
• ❌ Don’t override line-heights unless there’s a specific design requirement
• ❌ Don’t forget to test responsive breakpoints to ensure text remains readable