Headings

Headings (H1-H6) and other text styles improve readability and aid scanning by creating structural and visual hierarchy. They are also important opportunities for accessibility compliance and search engine optimization.

Headings (H1-H6) and other text styles improve readability and aid scanning by creating structural and visual hierarchy. They are also important opportunities for accessibility compliance and search engine optimization.

Headings should be used in a specific order to be most useful and to comply with the university accessibility standard. Here’s how to use them correctly:

  • Use only one H1 per page as the page title or headline.
  • Headings should be an outline for the content on the page.
  • Always use them in descending order (H1, H2, H3, H4, etc.), such that H2s follow the H1, H3s follow H2s, etc., within a section. Pages can have multiple sections.

Usage

Using headings out of order can confuse screen readers, which then read the content out of order, as well as search bots, which can damage SERPs.

There are eight different HTML tags that work as landmarks: <main>, <header>, <footer>, <nav>, <form>, <section>, <aside>, and <search>. Each has a corresponding ARIA role. Take this and other text styles--accordion headers, subheads for cards and other graphic elements, etc.--into consideration when planning the  structural hierarchy of your project. We also recommend:

  • Use H2 for major section headers
  • Use H3 for accordion and graphic element subheaders
  • Minimum size for large display fonts: 18pt or 24px or 1.5em
  • Font-weight: varies
  • Colors
    • Black: #222222
    • White: #ffffff
    • Blue: Pantone 287; #003087
    • Orange: Pantone 718C; #C75000

Note that all text (foreground) and background color combinations must meet the minimum contrast requirements of the university accessibility standard. Check your color choices with the WebAIM contrast checker. 

Examples

<style type="text/css">h1,h2,h3,h4,h5,h6 { font-family: 'Proxima Nova', sans-serif; font-weight: 500; }
	h1 { font-size: 42px; line-height: 2.55em; }
	h2 { font-size: 37px; line-height: 2.3em; }
	h3 { font-size: 32px; line-height: 2em; }
	h4 { font-size: 26px; line-height: 1.6em; }
	h5 { font-size: 24px; line-height: 1.5em; }
	h6 { font-size: 22px; line-height: 1.4em; }

	.text-blue { color: #003087; }
	.text-orange { color: #C75000; }
	.text-white { color: #FFFFFF; }

	.bg-black { background-color: #262626; padding: 10px; }
</style>
<h1>H1 = 32 pt, 42 px, 2.55 em</h1>

<p>12 pt (16 px or 1 em) with leading at 1.5x font size.</p>

<h2>H2 = 28 pt, 37 px, 2.3 em</h2>

<p>12 pt (16 px or 1 em) with leading at 1.5x font size.</p>

<h3>H3 = 24 pt, 32 px, 2 em</h3>

<p>12 pt (16 px or 1 em) with leading at 1.5x font size.</p>

<h4>H4 = 20 pt, 26 px, 1.6 em</h4>

<p>12 pt (16 px or 1 em) with leading at 1.5x font size.</p>

<h5>H5 = 18 pt, 24 px, 1.5 em</h5>

<p>12 pt (16 px or 1 em) with leading at 1.5x font size.</p>

<h6>H6 = 16 pt, 22 px, 1.4 em</h6>

<p>12 pt (16 px or 1 em) with leading at 1.5x font size.</p>

<h1 class="text-blue">Heading in Blue</h1>

<p class="text-blue">color #003087</p>

<h1 class="text-orange">Heading in Orange</h1>

<p class="text-orange">color #C75000</p>

<div class="bg-black">
<h1 class="text-white">Heading in White</h1>

<p class="text-white">color #FFFFFF, background-color #262626</p>
</div>

DON’T…

H1 = 32 pt, 42 px, 2.55 em

This is an example of running body copy, or Normal text style.

H3 = 24 pt, 32 px, 2 em

This is an example of running body copy, or Normal text style.

H2 = 28 pt, 37 px, 2.3 em

This is an example of running body copy, or Normal text style.

H4 = 20 pt, 26 px, 1.6 em

This is an example of running body copy, or Normal text style. The font is 12 pt (16 px or 1 em) with leading at 1.5x font size.