Headings
Text for immersive reading that needs to be sized differently in order to be set apart from the body text, where <h1/> should be the most important content on your page and <h5/> the least important. Refrain from using multiple <h1/>'s on a page, to avoid search engines from diluting the power of a single <h1/>. Heading font sizes are based on a Modular Scale with line-height set to 1.25 and margin-bottom spacing of 1.5rem / 24px.
h1
2.027rem
/
32.437px
(Lato bold) |
Example Heading 1 |
h2
1.602rem
/
25.629px
(Lato bold) |
Example Heading 2 |
h3
1.266rem
/
20.25px
(Lato bold) |
Example Heading 3 |
h4
1.125rem
/
18px
(Lato bold) |
Example Heading 4 |
h5
0.889rem
/
14.222px
(Lato bold, 0.5rem spacing) |
Example Heading 5 |
Additionly, classes are available to match heading font styles with other HTML elements: .heading-1 to .heading-6.
h1 element with .heading-3 class
Use the .heading--oswald classes to apply the Oswald font family to an <h1/> and <h2/>. The alternate font family is NOT available for other headings.
h1. Oswald Regular 2rem/32px
h2. Oswald Regular 1.625rem/26px
Display Headings
Use when you need to make an impact, evoke an emotional response or set a tone. It is intended to be looked at before it is read, and is thus set larger.
.display-1
2.887rem
/
46.184px
|
Example Display Heading 1 |
.display-2
2.566rem
/
41.053px
|
Example Display Heading 2 |
Responsive Headings
The size for h1 and h2 change depending on screen size to maintain visual hierarchy and make efficient use of space. The size for display headings also changes depending on screen size to maintain visual hierarchy and make efficient use of space:
| xs - sm | md - xl | |
|---|---|---|
h1 |
1.802rem | 28.833px | 2.027rem | 32.437px |
h2 |
1.424rem | 22.781px | 1.602rem | 25.629px |
.display-1 |
2.281rem | 36.491px | 2.887rem | 46.184px |
.display-2 |
2.027rem | 32.437px | 2.566rem | 41.053px |