In most cases, primary page headlines (h1) use Lyon/serif fonts. All other headings use Graphik (sans-serif). Variations require different font-sizes, line-heights, and letter-spacing properties. Below is a visual of each headline tag; following the image is a complete chart of specifications for each headline tag.
When possible, use rems or ems to declare typographic sizes, as this is best practice for accessibility. Below is a chart that outlines values.
<h1 class="heading-1">H1 - Heading 1</h1>
<h2 class="heading-2">H2 - Heading 2</h2>
<h3 class="heading-3">h3 - Heading 3</h3>
<h4 class="heading-4">H4 - Heading 4</h4>
<h5 class="heading-5">H5 - Heading 5</h5>
<h6 class="heading-6">h6 - Heading 6</h6>
<p class="heading-1">H1 - Heading 1</p>
<p class="heading-2">H2 - Heading 2</p>
<p class="heading-3">h3 - Heading 3</p>
<p class="heading-4">H4 - Heading 4</p>
<p class="heading-5">H5 - Heading 5</p>
<p class="heading-6">h6 - Heading 6</p>
The order for using <h1> through <h6> tags should follow standard web content editing practices.
Do not use <h1> tags within the body. <h1> tags are for headlines/page titles only.
<h2>-<h6> can be used depending on the hierarchy of the content that is provided, and is contextual on a page-by-page basis.
Below, see an example of the correct nesting of headers.
<h2>Lorem ipsum</h2>
<h3>Color</h3>
<h4>Red</h4>
<h3>Shape</h3>
<h4>Circle</h4>
<h4>Square</h4>Notice that there is a specific progression from a <h2> to <h3> to <h4> to <h5> to <h6>.
Never skip over heading tags – never go from <h2> to <h4>, etc. Always keep the proper HTML tag semantically ordered. For more information, refer to HTML tag educational tools, such as the Mozilla HTML documentation on these elements.
If you need to change the visual style of the display of the tags – for instance, if semantically the appropriate tag is a <h2>, but that size is visually “too large” for the context of something on the page, you can use an HTML class to style the headings:
| HTML Element | Class |
|---|---|
<h1> |
.heading-1 |
<h2> |
.heading-2 |
<h3> |
.heading-3 |
<h4> |
.heading-4 |
<h5> |
.heading-5 |
<h6> |
.heading-6 |