Solstice

Heading

Headings summarize content, communicate levels of importance, provide structure and define relationships between content.

Content baseline

  • Heading 1 - 40px

  • Heading 2 - 32px

  •  

  • Heading 3 - 28px

  • Heading 4 - 24px

  • Heading 5 - 20px
  • Heading 6 - 16px

Surfaces / components (unstyled)

  • Heading 3 - 28px

  • Heading 4 - 24px

  • Heading 5 - 20px
  • Heading 6 - 16px

Surfaces / components (styled)

  • Heading 3 - as h4 24px

  • Heading 3 - as h5 20px

  • Heading 4 - as h5 20px

  • Heading 4 - as h6 16px

  • Heading 5 - as h6 16px
  • Heading 6 - 16px

Best Practices

Content

  • Heading text should be directly related to the content it is containing. Review Labels page for more guidance.
  • The <h1> tag is typically reserved for the page title or main heading, while <h2> and <h3> tags break up sections and subsections.
  • Use <h2> through <h6> tags to define peer and parent-child relationships in the content.
  • Avoid having only one subsection heading within a section.

Styles

  • Use only the headings styles defined in the type system below.
  • Heading text should never be smaller than the body text it contains, visually and semantically

Accessibility

  • All headings on a page must be semantically defined in code. Outside of it being essential for usability and accessibility, clear and semantic headings are also important for good search results (SEO).
  • Ensure your heading hierarchy is clear and logical. Don't skip heading levels, as this will break the page structure and confuse users.
  • Try to avoid the use of <h5> and <h6> tags. The use of these tags creates deeply nested content that can be tedious to navigate for screen reader users. If you start to use <h5> and <h6> tags when designing, consider a different content structure.
  • Need guidance around visibility

Type System

The heading styles specified below create a cohesive heading system that is visually distinct and hierarchically clear.

Note: This type system works well for content heavy sites, such as this documentation site for the Solstice Design System. Different styles may be necessary in a web application.

Heading 1

Use an <h1> for page titles. The <h1> will most likely be the largest font on the page.

Solstice h1

HTML
<h1 class="display-5 fw-bold ff-encode-sans">Solstice h1</h1>
Don’t
An <h1> should not be used for an application name or logo in a header – instead that content should be either inside an <a> or <p> tag, and all within a <header> section.

Heading 2

Use an <h2> to designate a page section.

Solstice h2

HTML
<h2 class="display-6 ff-encode-sans">Solstice h2</h2>

Heading 3

Use an <h3> to designate a subsection.

Solstice h3

HTML
<h3 class="fw-medium ff-encode-sans">Solstice h3</h3>

Heading 4

Use an <h4> to designate a subsection of an <h3>.

Solstice h4

HTML
<h4 class="fw-medium ff-open-sans">Solstice h4</h4>

Heading 5 & 6

Use an <h5> and <h6> to designate sub sections of their respective parent.

Solstice h5
HTML
<h5 class="fw-bold ff-open-sans">Solstice h5</h5>
Solstice h6
HTML
<h6 class="fw-bold ff-open-sans">Solstice h6</h6>
Last updated by Cayla Snooke