Headings

Consistent scaling, weights, and capitalization are used to create distinction between heading levels.

Web headings

At screen widths of 600px and below, the Display heading and Headings 1-4 drop in size. Headings 5-6 remain consistent at all screen widths.

Display heading

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

HTML code snippet

<h1 class="superheading">Display heading</h1>
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

<!--
Example of a non heading element:
<p class="h1">A non-heading element</p>
-->

Jinja code snippet

Specs

Heading Specs Responsive behavior at < 601px
Display Avenir Next Regular, 48px / 60px Drops to Heading 1
Heading 1 Avenir Next Regular. 34px / 42px Drops to Heading 2
Heading 2 Avenir Next Regular. 34px / 42px Drops to Heading 3
Heading 3 Avenir Next Regular, 22px / 28px Drops to Heading 4
Heading 4 Avenir Next Medium, 18px / 22px Drops to 16px / 18px
Heading 5 Avenir Next Demi Bold, 14px / 18px. All caps, 1px letter spacing No change
Heading 6 Avenir Next Demi Bold, 12px / 15px. All caps, 1px letter spacing No change

Variations

The heading variations below have specific use cases.

Heading with icon

The heading with icon is typically used for listing categories in a meta header on pages like the blog page.

Nov 4, 2013

HTML code snippet

<header class="m-meta-header">
    <div class="m-meta-header_right">
        <span class="a-date">
            Nov 4, 2013
        </span>
    </div>
    <div class="m-meta-header_left">
        <span class="u-visually-hidden">Categories: </span>
        <a href="#" class="a-heading a-heading__icon">
            {% include icons/credit-card.svg %}
            Consumer finance
        </a>
        |
        <a href="#" class="a-heading a-heading__icon">
            {% include icons/bullhorn.svg %}
            At the CFPB
        </a>
    </div>
</header>

Implementation details

This example of a heading with icon shows .m-meta-header_left using the .a-heading__icon pattern and .m-meta-header_right using the .a-date pattern. However, you could use other patterns in place of them, or even swap them so that date is attached to .m-meta-header_left and .a-heading.a-heading__icon is attached to .m-meta-header_right.

Eyebrow headings

Use the eyebrow heading to label page headings that are part of a larger group of related pages, or when additional context can help orient the user to the page’s purpose.

The eyebrow heading is secondary to and serves to support the main page heading. So it should be concise and shorter than the main page heading.

An example of the eyebrow heading can be found on the Buying a House journey pages.

eyebrow heading

Heading 1

HTML code snippet

<!--The code snippet below is only used for display purposes. The eyebrow heading should be built using div tags:

<div class ="eyebrow">

The text will be styled the same as H5 heading text.
-->

<h5>eyebrow heading</h5>
<h1>Heading 1</h1>

Slug heading

Slug headings are used to lead content on sidebars and prefooters, inset modules, and inset email modules.

Slug heading

HTML code snippet

<header class="m-slug-header">
    <h2 class="a-heading">
        Slug heading
    </h2>
</header>