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.

Examples

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. You should instead use one of the base typography classes below to apply styling:

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

Code

Responsive typography

The .ds-type-heading-3xl, ds-type-heading-2xl, and ds-type-heading-xl classes are responsive by default. 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 Sass 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