Typography

Notes on Implementation

We use Bootstrap’s Typography settings. The documentation for Bootstrap Typography is applicable.

Accessibility Notes

For a more inclusive and accessible type scale, use the browser default root font-size (typically 16px) so visitors can customize their browser defaults as needed.

Best Practices for Typography

  • Headings must be properly nested. Headings that are properly nested help screen reader users understand the hierarchy of the information on the page. Each page should start with a <h1> that explains the purpose of the page and each subsection should have a heading <h2> ... <h6> that uniquely describes the content of each section.
  • Do not use the Bootstrap heading classes without giving proper semantic meaning to element. Bootstrap offers .h1 through .h6 CSS classes for when you would like to match the font styling of a heading but cannot use the associated HTML element.

  • Add semantic meaning to headings. Use ARIA role="heading" and the appropriate aria-level attribute to give semantic meaning. For example use, <p class="h4" role="heading" aria-level="4"> H4 with ARIA </p>.

  • Use <strong> and <em> elements. Use the <strong> and <em> elements to give senatic meaning to bold and italic text.
  • Do not use the <abbr> element. The <abbr> element is currently not keyboard accessible. Instead, write out the abbreviation or acronym one time on the page to provide additional context. For example, Accessible Rich Internet Applications (ARIA).

Examples

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Yale’s reach is both local and international. It partners with its hometown of New Haven, Connecticut to strengthen the city’s community and economy. And it engages with people and institutions across the globe in the quest to promote cultural understanding, improve the human condition, delve more deeply into the secrets of the universe, and train the next generation of world leaders.

Blockquote

Yale’s reach is both local and international. It partners with its hometown of New Haven, Connecticut to strengthen the city’s community and economy. And it engages with people and institutions across the globe in the quest to promote cultural understanding, improve the human condition, delve more deeply into the secrets of the universe, and train the next generation of world leaders.

Lead

Yale’s reach is both local and international. It partners with its hometown of New Haven, Connecticut to strengthen the city’s community and economy. And it engages with people and institutions across the globe in the quest to promote cultural understanding, improve the human condition, delve more deeply into the secrets of the universe, and train the next generation of world leaders.

Formatting Elements

This is how we style links by default in body text

This line of text is meant to be treated as fine print.

This line is rendered as bold text.

This line is rendered as italicized text.

An abbreviation of the word attribute is attr.