Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Version:

Design system switcher

Theme:

Design system switcher

Version:

Design system switcher

Font Size

Notice:

Typography sizing updates!

We've updated typography sizing variables and class names to separate semantics from presentation. 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.

Scale: 0.22

Guidance

Style customization

The following CSS 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