The typography system

There’s no disputing the power of typography. It has a huge influence on brand perception and recognition. Good typography not only differentiates a brand but also communicates the brand’s style, personality and tone of voice.

All GEM components and templates follow the Web Content Accessibility Guidelines (WCAG) Level AA. GEM’s templates are components are perceivable, operable, and understandable to users, even when using a screen reader or other assistive technology.

The brand font

Sans-serif font

Work Sans

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

1234567890

 The quick brown fox jumped over the lazy, sleeping dog.

Serif font

Source Serif Pro

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

1234567890

 The quick brown fox jumped over the lazy, sleeping dog.
Scale category Typeface Weight Size Line spacing Spacing Colours

H1 Large

 Work Sans Bold 60 70 0
#A6192E (Alpha) #FFFFFF (White) #373A36 (Bravo)

H1 Small

 Work Sans Semibold 30 40 0
#A6192E (Alpha) #FFFFFF (White) #373A36 (Bravo)

H2 Large

 Work Sans Semibold 48 64 0
#A6192E (Alpha) #FFFFFF (White) #373A36 (Bravo)

H2 Small

 Work Sans Medium 28 40 0
#A6192E (Alpha) #FFFFFF (White) #373A36 (Bravo)

H3 Subheading

 Work Sans Semibold 22 30 0
#A6192E (Alpha) #FFFFFF (White) #373A36 (Bravo)

H4 Subheading

 Work Sans Semibold 18 30 0
#A6192E (Alpha) #FFFFFF (White) #373A36 (Bravo)
H5 Subheading
 Work Sans Semibold 16 30 0
#A6192E (Alpha) #FFFFFF (White) #373A36 (Bravo)
H6 Subheading
 Work Sans Semibold 14 18 0
#A6192E (Alpha) #FFFFFF (White) #373A36 (Bravo)
Intro Large Source Serif Pro Semibold 26 42 0
#373A36 (Bravo)
Intro Small Source Serif Pro Semibold 24 34 0
#373A36 (Bravo)
Body Copy Work Sans Regular 16 26 0
#FFFFFF (White) #373A36 (Bravo)
Body Copy Hyperlink Work Sans — Underlined Regular 16 26 0
#FFFFFF (White) #373A36 (Bravo)
Quote - Desktop
Source Serif Pro Italic 22 36 0.5
#80225F (Delta)
Quote - Mobile
Source Serif Pro Italic 18 30 0.5
#80225F (Delta)
Breadcrumb Work Sans Regular 13 30 0.5
#A6192E (Alpha) #FFFFFF (White) #373A36 (Bravo)
Button - Medium Work Sans Bold 18 20 00
#373A36 (Bravo) #FFFFFF (White)
Side Navigation Work Sans Regular 14 24 00
#373A36 (Bravo)
Alert Work Sans Semibold 13 19 00
#BC4700 (Alert) #373A36 (Bravo) #415364 (Info) #00856A (Success) #6F1D46 (Support)
TOP NAV Work Sans Medium 13 30 0.1
#373A36 (Bravo) #FFFFFF (White)