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.
- Avoid breaking rank just for font sizing. The next heading after an
h1should be an
h2even if that
h2is much smaller. Use HTML for meaning and CSS for styling. You can make that
h2whatever size you need.
- Avoid "stacking" headings without any body content in between, eg. an
h2immediately 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. Use the equivalent mixins in Sass/SCSS.