Headings
A successful type hierarchy establishes the order of importance of elements on a page. Consistent scaling, weights, and capitalization are used to create distinction between heading levels and provide users with familiar focus points when scanning text.
Web headings
At screen widths of 600px and below, the Display heading and Headings 1-4 drop in size. Heading 5 remains consistent at all screen widths.
Display
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
HTML code snippet
<h1 class="superheading">Display</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<!--
Example of a non heading element:
<p class="h1">A non-heading element</p>
-->Specs
| Heading | Font-weight | Font-size | Font-size-adjust* | Line-height | Responsive behavior at < 601px |
|---|---|---|---|---|---|
| Display | 400 (Regular) | 48px | 0.517 | 60px | Drops to H1 |
| H1 | 600 (Semi Bold) | 34px | 0.517 | 60px | Drops to H2 |
| H2 | 600 (Semi Bold) | 26px | 0.517 | 42.5px | Drops to H3 |
| H3 | 400 (Regular) | 22px | 0.517 | 32.5px | Drops to H4 |
| H4 | 500 (Medium) | 18px | 0.517 | 22.5px | Drops to 16px |
| H5 | 600 (Semi Bold) | 14px all caps | 0.517 | 17.5px, 1px letter spacing | No change |
*See Normalization to learn why we use font-size-adjust.
Print headings
This hierarchy should serve as a basis for 8.5 x 11” documents, but appropriate scaling should be explored for content of larger or smaller dimensions.
Display
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML code snippet
<h1 style="font-size:60pt; font-weight:500; line-height:66pt">Display</h1>
<h1 style="font-size:38pt; font-weight:400; line-height:40pt">Heading 1</h1>
<h2 style="font-size:26pt; font-weight:400; line-height:28pt">Heading 2</h2>
<h3 style="font-size: 16pt; font-weight:600; line-height: 18pt">Heading 3</h3>
<h4 style=font-size:14pt; font-weight:500; line-height:16pt">Heading 4</h4>
<h5 style="font-size:10pt; font-weight:600;line-height:12pt">Heading 5</h5>
<p style="font-size: 12pt; font-weight: 500; line-height:14pt">Heading 6</p>Specs
| Heading | Font weight | Font size | Line height |
|---|---|---|---|
| Display | Medium | 60pt | 66pt |
| H1 | Regular | 38pt | 40pt |
| H2 | Regular | 26pt | 28pt |
| H3 | Semi Bold | 16pt | 18pt |
| H4 | Medium | 14pt | 16pt |
| H5 | Semi Bold | 10pt all caps | 12pt |
| H6 | Medium | 12pt | 14pt |
Variations
The heading variations below have specific use cases.
Meta header
The meta header is typically used for listing categories on pages like the blog page.
HTML code snippet
<div class="m-meta-header">
<div class="m-meta-header__item-group">
<div class="m-meta-header__item">
Office of Research Publication
</div>
<div class="m-meta-header__item">
Policy and compliance
</div>
</div>
<div class="m-meta-header__item">
<span class="a-date">
Published
<span class="datetime">
<time datetime="2024-09-28T00:00:00">SEP 28, 2024</time>
</span>
</span>
</div>
</div>Specs
View a list of icons. Icon height is constrained to 19px.
| Heading | Font-weight | Font-size | Font-size-adjust* | Line-height | Responsive behavior at <601px |
|---|---|---|---|---|---|
| Meta header | 500 (Medium) | 18px | 0.517 | 22.5px | Drops to 16px |
*See Normalization to learn why we use font-size-adjust.
Eyebrow heading
The eyebrow heading is an additional label that can be used to support the main H1 heading on a page, provide additional context, or orientation when necessary. 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.
HTML code snippet
<div class="h5">eyebrow heading</div> <div class="h1">Heading 1</div>Specs
| Heading | Font-weight | Font-size | Font-size-adjust* | Line-height | Responsive behavior at <601px |
|---|---|---|---|---|---|
| Eyebrow heading | 600 (Semi Bold) | 14px all caps | 0.517 | 17.5px, 1px letter spacing | No change |
*See Normalization to learn why we use font-size-adjust.
Slug heading
Slug headings are used to call attention to and lead content on sidebars and prefooters, inset modules, and inset email modules.
Slug heading
HTML code snippet
<header class="m-slug-header">
<h2 class="m-slug-header__heading">
Slug heading
</h2>
</header>Specs
- 5px thick CFPB Green top border that spans the length of the title
- 1px thick Gray 50 top border that spans the width of the module or column
| Heading | Font-weight | Font-size | Font-size-adjust* | Line-height | Responsive behavior at <601px |
|---|---|---|---|---|---|
| Slug title | 600 (Semi Bold) | H5 (14px all caps) | 0.517 | 17.5px, 1px letter spacing | No change |
*See Normalization to learn why we use font-size-adjust.
Guidelines
Content
- Headings should be sentence case.
- Do not include punctuation in headings.
- Keep headings to one line on desktop when possible.
Spacing
Refer to the Guidelines section of the Fonts page for information about heading spacing.
Accessibility
Since categories can be repetitive, we suggest placing a label with @include u-visually-hidden prior to the headings with icons to add more context for screen readers.