Headings
This is an H1. Stout, bold, and proud, it is an exemplary tag, loved all across the world.
H2 headlines are slightly smaller but still big enough to command a reasonable amount of attention
The Smaller Things In Life (like this h3)
You can easily ensure your headlines have a visual separator from the rest of the content
This is an H1 but is presented in the same ways as an H2.
This is an H1 but is presented in the same ways as an H3.
This is an H1 but is presented in the same ways as an H4.
This is an H2 but is presented in the same ways as an H1.
This is an H2 but is presented in the same ways as an H3.
This is an H2 but is presented in the same ways as an H4.
Usage notes
The webfont 'Dax' is used for headlines; it provides the site with the personality it needs without compromising legibility.
Try not to introduce any new font or font weights to the design as it will add more complexity to the page. If there is a difficult design challenge, try using scale and proximity.
<h1>This is an H1. Stout, bold, and proud, it is an exemplary tag, loved all across the world.</h1>
<h2>H2 headlines are slightly smaller but still big enough to command a reasonable amount of attention</h2>
<h3>The Smaller Things In Life (like this h3)</h3>
<h4 class="headline-separated">You can easily ensure your headlines have a visual separator from the rest of the content</h4>
<h1 class="beta">This is an H1 but is presented in the same ways as an H2.</h1>
<h1 class="delta">This is an H1 but is presented in the same ways as an H3.</h1>
<h1 class="gamma headline-separated">This is an H1 but is presented in the same ways as an H4.</h1>
<h2 class="alpha">This is an H2 but is presented in the same ways as an H1.</h2>
<h2 class="delta">This is an H2 but is presented in the same ways as an H3.</h2>
<h2 class="gamma">This is an H2 but is presented in the same ways as an H4.</h2>Developer Notes
The pattern library's CSS classes follow a double-stranded heading hierarchy so that the size of the typography in the design does not need to correlate with the required heading levels.
With this approach we can maintain semantically correct markup, allowing us to separate structure from presentation.
h1,.alpha { [font styles] }
h2,.beta { [font styles] }
h3,.gamma { [font styles] }
h4,.delta { [font styles] }
h5,.epsilon { [font styles] }
h6,.zeta { [font styles] }