Skip to main content
U.S. Flag

An official website of the United States government

Headings

Headings help to provide a quick, organized way to organize the main sections of a website.

Notice:

Typography sizing updates!

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

The design system doesn't style base HTML typography elements (like h1, h2, p, etc) in order to avoid conflicting with any existing site styles.

Examples

Heading--5xl

We the People of the United States

Heading--4xl

We the People of the United States

Heading--3xl

We the People of the United States

Heading--2xl

We the People of the United States

Heading--xl

We the People of the United States

Heading--lg

We the People of the United States

Heading--md

We the People of the United States

Heading--sm

We the People of the United States

On dark background

We the People of the United States

We the People of the United States

Code

The ds-content class

For pages that are mainly about written content or places where you want to use a standard mapping of heading-level styles to semantic heading levels, consider using the ds-content class.

Responsive typography

.ds-type-heading-5xl, ds-type-heading-4xl, and ds-type-heading-3xl classes are responsive by default.

Font class545px and below545px to 768px768px and above
.ds-type-heading-5xl36px48px60px
.ds-type-heading-4xl36px36px48px
.ds-type-heading-3xl30px30px36px

To apply responsive typography elsewhere, use the font size utility class. Since the base typography margins and line height is measured in em units, they'll automatically adjust as you change the font size.

Styles

The following CSS variables can be overridden to change the type sizes:

  • --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

Guidance