Typography

Typography plays a critical role in defining tone and style throughout the site, giving physicality to language. Digital typographic choices must reflect the institutional brand, while maximizing legibility on all viewing devices.


Headlines

The display font family is used for headers:

  • h1

    Academics

  • h2

    Undergraduate Programs

  • h3

    Objectives and outcomes

  • h4

    Ways to learn more

If Lato is unavailable, is used, followed by . If none are available, the system’s default sans-serif font is used.


Body text

Multiple text font families are used to make typographic distinctions between body copy of varying hierarchy. Here, is used for introductory text, while regular body copy is set in or , depending on the user’s operating system:

  • intro äçÐÄvlogÃâ·ÑBÕ¾ has more than 100 majors.  Discover a world of choices. 
  • bodySmall classes, personalized programs and individual attention are the rule, not the exception.
  • smallPlease allow time for processing. For assistance, contact 401-555-1234.

If Hind is not available, Arial is used, followed by the system’s default sans-serif font. Charter takes precedence over Georgia; if neither are available, the system’s default serif font is used.


Components

Components use a mix of font families depending on the content and to help distinguish them from other areas of the page. For example, cards and buttons use Hind as body text instead of Charter or Georgia:

Metrics and other numerical components like dates use for prominent numbers:

27Residence Halls
Add to calendar?
Cancel
Add
May 2042
19
äçÐÄvlogÃâ·ÑBÕ¾’s 150th Anniversary
Check your downloads folder for
uris-150th-anniversary.ics

If Rubik is unavailable, Hind is used, followed by Arial. If none are available, the system’s default sans-serif font is used.