Typography

Headings

Headings are an important part of page accessibility for all users, and provide structure as well as design when used correctly.

Each page must have only one H1, and that H1 must be the page title.
Do not skip heading levels (for example, do not jump from an H1 directly to an H3).
Remember to use headings structurally (as though you were creating an outline or table of contents) and not to decorate or emphasize text.

Heading 1

Font size: 2rem (desktop)
Font size: 1.8rem (mobile)
Font family: Gotham Black
Font color: Eggplant (#592646)
Margin top: 0
Margin bottom: 1.5rem

<h1>Heading 1</h1>

Heading 2

Font size: 1.75rem (desktop)
Font size: 1.65rem (mobile)
Font family: Gotham Black
Font color: Eggplant (#592646)
Margin top: 0
Margin bottom: 1.5rem

<h2>Heading 2</h2>

Heading 3

Font size: 1.5rem (desktop)
Font size: 1.5rem (mobile)
Font family: Gotham Black
Font color: Eggplant (#592646)
Margin top: 0
Margin bottom: 1.5rem

<h3>Heading 3</h3>

Heading 4

Font size: 1.25rem (desktop)
Font size: 1.25rem (mobile)
Font family: Gotham Black
Font color: Eggplant (#592646)
Margin top: 0
Margin bottom: 1.5rem

<h4>Heading 4</h4>

Heading 5

Font size: 1.1rem (desktop)
Font size: 1.1rem (mobile)
Font family: Gotham Black
Font color: Eggplant (#592646)
Margin top: 0
Margin bottom: 1.5rem

<h5>Heading 5</h5>

Heading 6

Font size: 1rem (desktop)
Font size: 1rem (mobile)
Font family: Gotham Black
Font color: Eggplant (#592646)
Margin top: 0
Margin bottom: 1.5rem

<h6>Heading 6</h6>

Links

All internal links within a paragraph must use Dark Parakeet Green color, bolded, and underlined. All external links must have an icon indicating that it opens in a new tab. Visited links must have a diffrent color as a visual indicator. Links in a list must not be underlined.

<a href="/url">link text</a>

All links in lists must be underlined by default and not underlined on hover

Example:

<ul>

  <li><a href="/url">Link item 1</a></li>

  <li><a href="/url">Link item 2</a></li>

  <li><a href="/url">Link item 3</a></li>

</ul>

All links that link to external pages must have the "Open In New" icon to indicate that the link destination is an external site

Example:

MSU Main Library

<a href="/url" target='_blank'>link text</a>