Skip to main content
U.S. Flag

An official website of the United States government

CMS Design System

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

Example heading (5xl)

Heading--4xl

Example heading (4xl)

Heading--3xl

Example heading (3xl)

Heading--2xl

Example heading (2xl)

Heading--xl

Example heading (xl)

Heading--lg

Example heading (lg)

Heading--md

Example heading (md)

Heading--sm

Example heading (sm)

On dark background

Example heading on dark background

Example link heading on dark background

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