Typography

Heading and paragraph styles.

Heading

Headings help to make your content more scannable and are critical to creating accessible content. Your page title is automatically designated as an H1, so don't use H1 headings in the body of the page. Headings can also serve as anchor links should you need them.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Capitalization

Page titles and section headings should use sentence case. Capitalize proper nouns.

Engineering excellence for the public good

Strategic Plan 2021-2026

Changing the size of headings

If you need to increase and decrease the size of headings, keep the proper HTML heading but add the heading size you want as a class. Doing so maintains correct hierarchy which is important for accessibility.

This is a h3 heading using a h4 class

<h3 class="h4">This is a h2 heading using a h3 class</h3>

This is a h4 heading using a h3 class

<h4 class="h3">This is a h3 heading using a h2 class</h4>

Paragraph

Normal paragraph

For use with standard text.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>Normal paragraph copy</p>

Lead paragraph

For use with introductory sentences used for most pages. The lead paragraph should never be longer than 1-2 sentences.

<p class="lead">Lead paragraph copy</p>

Small paragraph

For use with secondary content such as sidebar text.

<p class="small">Small paragraph copy</p>

Footnotes

We generally discourage using footnotes in web content. If the footnote is critical to understanding the overall content, we recomend incorporating the footnote copy into the larger content. However, there may be times when you need footnotes. For those limited cases, use appropriate markup to ensure the content is accessible to all users.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. ¹^{Footnote details hidden in a span so they can be read by screenreaders.}

1. Your footnote details would be down here Back to content

<p>
 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. 
  <a class="footnote-link" id="ref-your-content-link" href="#ref-your-footnote">
    <sup>
      1
      <span class="hidden">Footnote details hidden in a span so they can be read by screenreaders.</span>
    </sup>
  </a>
</p>
<div class="vertical-spacer">
</div>
<p class="footnote" id="ref-your-footnote" tabindex="-1">
  1. Your footnote details would be down here
  <a href="#ref-your-content-link">Back to content</a>
</p>