Font weight

The font-weight utility allows you to quickly control the thickness or boldness of text. It supports both static and responsive variants generated through mixins and loops.

---

Naming convention

All classes follow the structure:

.u--font-{value}
.u--font-{breakpoint}-{value}

---

When to use

Use this utility when:

• You want to apply consistent font-weight styling (medium, semibold, etc.)
• You need to adapt text thickness across different breakpoints
• You want to control font-weight without writing custom SCSS

---

Responsive variants

This utility supports responsive variants, using breakpoint prefixes like: desktop, laptop, tabletl, tabletm, tablets, mobile.

---

How to use

In HTML

<p class="u--font-medium">This text is medium weight.</p>
<p class="u--font-semibold u--font-tabletl-medium">Responsive font weight</p>

In CSS

.c--card-a {
  @extend .u--font-medium;
}

.c--card-b {
  @extend .u--font-semibold;
  @extend .u--font-tabletl-medium;
}