Typography is integral to the WTW Digital Design System.
We have extended our overall typographic brand standards for use in digital applications.
Webfonts
Lyon
Graphik
Noto Sans
In order to support Asian characters, we use Google’s Noto Sans due to its versatile support model for cultures and languages.
Backup Typefaces
Arial
The web-safe, desktop-safe fallback for typography is Arial. If you are unable to customize the typography beyond general web-safe fonts, please use the font stack arial, sans-serif.
Asian Typographic Backups
Our approach for Asian fonts where webfonts aren’t supported (for example, in email).
| Location | Font Family Name |
|---|---|
| China | Microsoft YaHei |
| Taiwan | Microsoft JhenHei |
| Korea | Malgun Gothic |
| Japan | Meiryo UI |
| Default, non-branded | Arial |
---
Typographic Styles
To ensure a consistent experience of importance of information typography styles change based on the viewport size. All styles remain the same until the viewport is less than 768 pixels. Once the viewport is below 768, some sizes become smaller. The change in size only occurs for the H1-H4, Subheadline Body, and Contact Form styles. These changes are based on what visually looks best for the smaller devices while maintaining the proper visual hierarchy.
Other design considerations for typography are to make sure content does not stretch longer than 8 columns across the 12 column grid on the desktop experience.
Please refer to the Grid section for additional information.
Typography and Color
Reference the Color section for more information on typography and color.
Generally, type must only display in Ultraviolet (links), Onyx (text), Wgute (text on dark backgrounds), Fireworks (buttons). Occasionally, other colors can be used to communicate information via text. For example, semantic colors applied to error states in forms provide additional context for accessibility and usability.
Use color only in the way it is prescribed within this guide.