Typography
The typography defines the fonts used within anthem. Font sizes and styles provide visual meaning by demonstrating hierarchy, prioritizing messages and information, and creating paths for users to follow throughout the experience.
Anthem uses Roboto as the primary font. Roboto is a geometric typeface with straight-sided capitals and rounded letters. It includes 12 different weights and supports Latin, Greek, and Cryllic alphabets. In addition to the pleasing aesthetic and versatility for localization, we chose Roboto as our primary font because it's familiar to users and is specifically designed to work well with a wide range of devices and screen sizes. The backup font is Arial. We also use Heebo for Arabic and Hebrew alphabets and Noto Sans JP for Chinese and Japanese alphabets. See Resources to download these fonts.
The Opus Platform controls the typography used for the text within the components. The typography can't be customized.
Best practices
- Make sure you have sufficient contrast between your fonts and the background they display on. The fonts should adhere to the contrast ratios defined in the Web Content Accessibility Guidelines AA standard maintained by the World Wide Web Consortium (W3C).
- Avoid using underline, because underline signals to the user that the item is a hyperlink.
Styles and usage
Headings
Headings are used in Screen Headers, Section Headers, most titles, and within the side menu.
Make sure you use these headings in the order specified below. Each screen should only have one Heading 1, even if it is used as statement text on top of a banner image, and you should never skip a heading level (e.g. do not go straight from a Heading 1 to a Heading 3 or from a Heading 2 to a Heading 4).
|
Heading 1 |
Font: Roboto Light Size: 48 pixels Letter spacing: 0 pixels Line height: 56 pixels Color: #005587
|
|
Heading 2 |
Font: Roboto Medium Size: 36 pixels Letter spacing: 0 pixels Line height: 48 pixels Color: #252525
|
|
Heading 3 |
Font: Roboto Light Size: 32 pixels Letter spacing: 0.23 pixels Line height: 44 pixels Color: #252525
|
|
Heading 4 |
Font: Roboto Medium Size: 24 pixels Letter spacing: 0 pixels Line height: 32 pixels Color: #252525
|
Body
Body styles are used for assistive text, field values, and other plain text. Use the Body style for page-level body text and field labels. Use the Body Small style for field-level assisitve text and in tables. For section-level body text, use the Subtitle style.
| Body |
Font: Roboto Regular Size: 16 pixels Letter spacing: 0.49 pixels Line height: 21 pixels Color: #252525
|
| Body Small |
Font: Roboto Regular Size: 14 pixels Letter spacing: 0 pixels Line height: 19 pixels Color: #252525
|
Buttons
The button style is used on all Buttons. The color of the font depends on the button style.
| Button |
Font: Roboto Medium Size: 14 pixels Letter spacing: 1.25 pixels Line height: 18 pixels Color: #A7A7A7 Text-transform: Uppercase |
Hyperlinks
Hyperlinks are used to link the user to another screen in the experience, instead of an icon or Action menu and are also used to represent files that can be downloaded.
| Hyperlink |
Font: Roboto Bold Size: 16 pixels Letter spacing: 0.49 pixels Line height: 21 pixels Color: #4C7681 Text-decoration: Underline |
Subtitles
Subtitles are used to describe a specific section of the screen. Use the subtitle style for section-level body text and as descriptive text next to tables and charts.
| Subtitle |
Font: Roboto Regular Size: 16 pixels Letter spacing: 0 pixels Line height: 21 pixels Color: #7C7C7C
|
Captions
Captions are used to describe visuals such as images or charts.
| Caption |
Font: Roboto Medium Size: 12 pixels Letter spacing: 1.88 pixels Line height: 16 pixels Color: #7C7C7C Text-transform: Uppercase |
Text color
The color of the typography styles specified above is for a default white or light background. If the typography style displays on a dark background, the color should be changed to white (#ffffff).
