All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline. A heading with .h-th is a special case that styles like a table header cell. Headings utilize sass maps to make property changes per breakpoint to keep sync with the vertical rhythm and maintain comfortable reading.

Examples

Static headings don‘t scale per breakpoint—heading size, margin and line-height match the declared property values of the heading at the smallest breakpoint. All other properties respect the declarations at each breakpoint.

Examples

Section headings are a non-standard way to visually represent the start of a new section in promotional content. The margin below the added rule is standardized across header types. The spacing between the text and rule is calculated by the baseline of that heading.

Examples

Display headings are intended for large, billboard-type font styling.

Examples

The table heading style is used when a heading is appropriate for the page structure, but visually it needs to be more label-like.

Examples

Usage

Rules

  • Headings should be used in order in a page, with 1st degree <h1> headings first
  • Skipping heading degrees, e.g. going from <h1> directly to <h3>, should be avoided, however, you can use the .h1–.h6 heading classes to visually change the style of a heading while maintaining correct hierarchy
  • Do not use images or logos in place of where a heading should be without including a heading that uses the .sr-only class

Constraints

  • Heading text should be concise and explain the proceeding content
  • Maintaining consistent formatting between headings of the same level in a given context is recommended, e.g. all <h1>‘s are using title-case, while all <h3>‘s are sentence-case
  • Rely on the <h6> and <h4> heading styles for uppercase formatting, do not type in all-caps

Principle

  • Headings visually and semantically provide hierarchy, structure and wayfinding to a document

Accessibility

  • Headings are important for screen reader users to navigate the content and should clearly communicate what a user should expect in the section that proceeds a heading. Additionally, hierarchy and nesting aids screen reader navigation. WebAIM Screen Reader User Survey 7 Results(external link)

Class Names

h1–h6
Modifier

Match heading styles on any text element with the .h1–.h6 classes
h-static
Modifier

Apply to any heading, or element with a heading class to prevent the heading from scaling at larger breakpoints
section-header
Modifier

Apply to any heading, or element with a heading class to center the heading and add a styled rule line below the heading
display-1 – display-4
Modifier

Apply .display-1-.display-4 to an <h1> for alternate styling
h-th
Modifier

Apply to any heading to style the heading like a table heading without losing semantic hierarchy