Font size

Font size

Alternatively, you can change the font-size of text with .fs-<size> utilities. These classes only set font-size and offer a larger range of sizes than the heading classes.

<div class="fs-xs">.fs-xs text</div>
<div class="fs-sm">.fs-sm text</div>
<div class="fs-md">.fs-md text</div>
<div class="fs-lg">.fs-lg text</div>
<div class="fs-xl">.fs-xl text</div>
<div class="fs-2xl">.fs-2xl text</div>
<div class="fs-3xl">.fs-3xl text</div>
<div class="fs-4xl">.fs-4xl text</div>
<div class="fs-5xl">.fs-5xl text</div>
<div class="fs-6xl">.fs-6xl text</div>

With line-height

Swap the .fs-* utilities with the .text-* utilities to apply a font-size and line-height at the same time. These are configured from a single Sass map, $font-sizes.

<div class="text-xs">.text-xs text</div>
<div class="text-sm">.text-sm text</div>
<div class="text-md">.text-md text</div>
<div class="text-lg">.text-lg text</div>
<div class="text-xl">.text-xl text</div>
<div class="text-2xl">.text-2xl text</div>
<div class="text-3xl">.text-3xl text</div>
<div class="text-4xl">.text-4xl text</div>
<div class="text-5xl">.text-5xl text</div>
<div class="text-6xl">.text-6xl text</div>

Responsive font-size

Font sizes use CSS‘s clamp() to provide fluid, responsive sizing that scales between a minimum and maximum value based on the viewport width. The clamp() function takes three parameters:

• a minimum value
• a preferred value (calculated using viewport units)
• and, a maximum value

As the viewport changes, the font size smoothly transitions between the minimum and maximum values. Here's how each size scales at different viewport widths.

Customize your available font-sizes by modifying the $font-sizes Sass map.

CSS

Variables

Root font size variables are declared in our root file in scss/_root.scss.

--font-size-base: #{$font-size-base}; // 14px

--font-size-xs: .75rem;
--font-size-sm: .875rem;
--font-size-md: 1rem;
--font-size-lg: clamp(1.25rem, 1rem + .625vw, 1.5rem);
--font-size-xl: clamp(1.5rem, 1.1rem + .75vw, 1.75rem);
--font-size-2xl: clamp(1.75rem, 1.3rem + 1vw, 2rem);
--font-size-3xl: clamp(2rem, 1.5rem + 1.875vw, 2.5rem);
--font-size-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
--font-size-5xl: clamp(3rem, 2rem + 5vw, 4rem);
--font-size-6xl: clamp(3.75rem, 2.5rem + 6.25vw, 5rem);

--line-height-xs: 1.5;
--line-height-sm: 1.5;
--line-height-md: 1.5;
--line-height-lg: 1.5;
--line-height-xl: calc(2.5 / 1.75);
--line-height-2xl: calc(3 / 2.25);
--line-height-3xl: 1.2;
--line-height-4xl: 1.1;
--line-height-5xl: 1.1;
--line-height-6xl: 1;

Sass utilities API

Font size utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

"font-size": (
  property: font-size,
  class: fs,
  values: map-get-nested($font-sizes, "font-size")
),
"text-size": (
  property: (
    "font-size": 1rem,
    "line-height": 1.5
  ),
  class: text,
  values: $font-sizes
),