Mozilla Protocol
  • 16.1.0

Headings

A heading acts as a title for the content that immediately follows it. We’ve declared default sizes for headings in keeping with their standard ranking but this base size can be overridden with more context-specific styling.

No-nos

  • Avoid breaking rank just for font sizing. The next heading after an <h1> should be an <h2> even if that <h2> is much smaller. Use HTML for meaning and CSS for styling. You can make that <h2> whatever size you need.
  • Avoid “stacking” headings without any body content in between, eg. an <h2> immediately following an <h1>. If you need a subheading or tagline immediately after a title, chances are it should be a paragraph rather than a second heading.
  • There are presentational utility classes available that you can apply to any heading, e.g. mzp-u-title-sm, but don’t abuse them if they aren’t necessary. You can often use the equivalent mixins in Sass/SCSS without a presentational class.
<h1>h1: Jived fox nymph grabs quick waltz.</h1>

<h2>h2: Sphinx of black quartz, judge my vow!</h2>

<h3>h3: The five boxing wizards jump quickly.</h3>

<h4>h4: How vexingly quick daft zebras jump!</h4>

<h5>h5: Pack my box with five dozen liquor jugs.</h5>

<h6>h6: Amazingly few discotheques provide jukeboxes.</h6>