Notice: Due to ongoing construction, 4 East is currently closed to the public.  To obtain items located on 4 East, please place an online request for the item to be paged for you using the ‘Place Request’ button in the catalog. Please visit our Circulation FAQ page for assistance in using our catalog.
Notice: Due to ongoing construction, 4 East is currently closed to the public.  To obtain items located on 4 East, please place an online request for the item to be paged for you using the ‘Place Request’ button in the catalog. Please visit our Circulation FAQ page for assistance in using our catalog.
View Alert(s)

lib.dl.webux@msu.edu

User Experience
366 W. Circle Dr.
East Lansing , MI 48824
United States

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>