Skip to main content
U.S. Flag

An official website of the United States government

Font size

Notice:

Typography sizing updates!

We've updated typography sizing variables and class names to make them more agnostic. Read about how you can update.

Use the font size utility to make the text larger or smaller.

Format: .ds-u-font-size--[5xl|4xl|3xl|2xl|xl|lg|md|base|sm]

Responsive format: .ds-u-[breakpoint]-font-size--[5xl|4xl|3xl|2xl|xl|lg|md|base|sm]

.ds-u-font-size--5xl
We the People of the United States
.ds-u-font-size--4xl
We the People of the United States
.ds-u-font-size--3xl
We the People of the United States
.ds-u-font-size--2xl
We the People of the United States
.ds-u-font-size--xl
We the People of the United States
.ds-u-font-size--lg
We the People of the United States
.ds-u-font-size--base or.ds-u-font-size--md
We the People of the United States
.ds-u-font-size--sm
We the People of the United States

Responsive font sizes

Use a breakpoint prefix to change the font size at specific breakpoints.

Guidance

Customization

The following Sass variables can be overridden to theme the font size utility:

  • $font-size-5xl
  • $font-size-4xl
  • $font-size-3xl
  • $font-size-2xl
  • $font-size-xl
  • $font-size-lg
  • $font-size-md, uses $font-size-base
  • $font-size-sm