Headings
Learn about Headings and how to use them in the Base System
Last updated
Learn about Headings and how to use them in the Base System
Last updated
The Base System uses the standard H1-H6 heading scale, styling both the HTML selector and creating identical heading classes. Heading font size is connected to Heading Variables which manage different sizes across breakpoints. All default margins are removed from headings. Headings use the Font Heading variable.
H1 Heading
56px / 3.5rem
48px / 3rem
1.3
H2 Heading
48px / 3rem
40px / 2.5rem
1.3
H3 Heading
40px / 2.5rem
32px / 2rem
1.4
H4 Heading
32px / 2rem
28px / 1.75rem
1.4
H5 Heading
24px / 1.5rem
1.5
H6 Heading
20px / 1.25rem
1.5
To add a HTML heading, simply add a heading element and select your heading tag. The Heading will inherit its styles from theAll Headingsselector meaning that you do not need to add a class.
HTML Headings should be used in the correct places as they are important for screen readers and web crawlers. A page should generally have a single <h1> element that describes the content of the page and should not skip one or more heading levels.
If you want to use a heading style without the semantic html implications. The Base System provides heading utility classes that have the same styling as their tag-based elements (H1–H6). You can use these classes when you want to use a heading with a different html element.
Heading font color is inherited from its parent or body.
Line height and letter spacing use responsive values that are relative to the current font size of the element. This allows you to easily change font size on different breakpoints without needing to also update line height or letter spacing.
For unique customization, text modifiers enable dynamic adjustments to heading styles, including color, font weight, and alignment. Learn more about Text Modifiers.
If your design additional customization that isn't covered by the default options, feel free to create a custom class to suit your needs. Examples include creating specialized headings like Display Heading or Feature Heading.
