🅱️ 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

.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 usage

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

✅ How to use

You can apply them directly 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>

Or extend them in SCSS if you have a custom class:

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

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