Font Size

Font size utilities apply sizes from the design system’s type scale.

Scale

Pattern: .util-font-size-<key>

Class	Size
.util-font-size-xs	1.125em
.util-font-size-sm	1.375em
.util-font-size-md	1.625em
.util-font-size-lg	1.75em
.util-font-size-xl	2.25em
.util-font-size-xxl	2.5em
.util-font-size-xxxl	4em

Examples

.util-font-size-xs (1.125em)

.util-font-size-sm (1.375em)

.util-font-size-md (1.625em)

.util-font-size-lg (1.75em)

.util-font-size-xl (2.25em)

<p class="util-font-size-xs util-margin-all-none">
  .util-font-size-xs (1.125em)
</p>
<p class="util-font-size-sm util-margin-all-none">
  .util-font-size-sm (1.375em)
</p>
<p class="util-font-size-md util-margin-all-none">
  .util-font-size-md (1.625em)
</p>
<p class="util-font-size-lg util-margin-all-none">
  .util-font-size-lg (1.75em)
</p>
<p class="util-font-size-xl util-margin-all-none">
  .util-font-size-xl (2.25em)
</p>

Responsive Variants

Font size classes support breakpoint suffixes:

<p class="util-font-size-sm util-font-size-lg@md util-font-size-xl@lg">
  Scales up at larger breakpoints
</p>