Work Sans
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
The quick brown fox jumped over the lazy, sleeping dog.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
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) |