Heading Utility
Apply the heading style to any text based element.
A span that's now styled like a heading
Body Heading Sizes
Standard body heading sizes which match with our <h1>, <h2>, <h3>, ... counterparts.
28px ~ 36px
Heading 1
23px ~ 26px
Heading 2
19px ~ 21px
Heading 3
16px ~ 18px
Heading 4
14px ~ 16px
Heading 5
13px ~ 14px
Heading 6
Heading 1
23px ~ 26px
Heading 2
19px ~ 21px
Heading 3
16px ~ 18px
Heading 4
14px ~ 16px
Heading 5
13px ~ 14px
Heading 6
Display Sizes
Heading sizes for heroes, quotes and call to action headings. Used to provide impact.
52px ~ 68px
Heading 9
40px ~ 58px
Heading 8
36px ~ 48px
Heading 7
Heading 9
40px ~ 58px
Heading 8
36px ~ 48px
Heading 7
Heading Group
Group related heading content together. A single <h1>, <h2>, <h3>, etc with one or more <p> elements.
Heading 1
Sub heading or 'lead' paragraph.
Useful notes and reading:
Notes:
-
Stick to the hierarchy
Start with either a heading 1 (alpha), or display heading. Then use heading 2 (beta) and so on. Don't skip around the hierarchy or you may confuse users.
-
Create semantic structure
Visual hierarchy can be really helpful for those whose can see it, but remember that not everyone is able to see it. Make sure everyone gets the benefit of your clearly structured content by using semantic tags i.e.
<h1>,<h2>, etc.