Iconography & Typography

Overview

Icons and texts form a huge part of the interface and it is vital that these are used consistently. The following styles are recommended for SMU-related projects:

 

For Big Headlines

For headers

For body/article text

For small texts

Proxima Nova Extra Condensed
20 – 24 px or larger
no lighter than #959595

Proxima Nova Extra Condensed
14 – 18 px or larger
no lighter than #959595

Myriad Pro Regular
12 - 14 px or larger
no lighter than #767676

Myriad Pro Regular
10 px or larger
no lighter than #767676

Useful links

Guidelines

Ensure that icons, symbols used as controls suggest interactions in a rational manner

  • Consistently use general UI conventions
    For example, 'x' for close
  • Refer to popular icon fonts such as FontAwesome
  • Test if users can easily recognize and understand what icons stand for

Appropriate fonts

Ensure that text size and color is readable by using the 1.25 major third type scale

The more distinguishable the contrast between your text colors and sizes are, the better. Use WebAIM Contrast Checker and 1.25 Major Third type scale as reference.

 

Include a simple favicon that works on all major platforms

Correct favicon

Label icons meaningfully

To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context

Ensure consistent interface

Use official SMU fonts appropriately

  • For headers, use Proxima Nova Alt Extra Condensed Bold. For body text, use Myriad Pro. Make sure to use the websafe versions. For fallbacks, use Arial/Calibri and ‘sans-serif’.
  • Combine only 2-3 visually contrasting fonts
  • Do not over-emphasize and reserve uppercase for labels, headers, and acronyms.

Appropriate fonts

Icons and texts form a huge part of the interface and it is vital that these are used consistently. The following styles are recommended for SMU-related projects:

 

For Big Headlines

For headers

For body/article text

For small texts

Proxima Nova Extra Condensed
20 – 24 px or larger
no lighter than #959595

Proxima Nova Extra Condensed
14 – 18 px or larger
no lighter than #959595

Myriad Pro Regular
12 - 14 px or larger
no lighter than #767676

Myriad Pro Regular
10 px or larger
no lighter than #767676

Useful links