Notice: Access to Special Collections material, the Reading Room, and Instruction will temporarily be suspended starting on Aug.12, 2024 as the collection will be moved from the basement to 3 East. Normal operations are anticipated to resume late in the semester. Read more for current updates.
Notice: Access to Special Collections material, the Reading Room, and Instruction will temporarily be suspended starting on Aug.12, 2024 as the collection will be moved from the basement to 3 East. Normal operations are anticipated to resume late in the semester. Read more for current updates.
Notice: Maintenance affecting the library catalog will occur on July 26-29. The catalog will be available except for newly added e-resources, which will not appear until after the maintenance is completed and the backlog of changes can be delivered - possibly 10 days. In addition, renewals and changes to circulation status will not be visible in the EDS interface during this time.
Notice: Maintenance affecting the library catalog will occur on July 26-29. The catalog will be available except for newly added e-resources, which will not appear until after the maintenance is completed and the backlog of changes can be delivered - possibly 10 days. In addition, renewals and changes to circulation status will not be visible in the EDS interface during this time.
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.
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>