Typography can help create clear hierarchies, organize information, and guide users through a product or experience.
Fonts
Helvetica
abcdefghijklmnopqrstuvwxyz012345678910
Usage:For headings
Helvetica
abcdefghijklmnopqrstuvwxyz012345678910
Usage:For body copy, descriptions, navigation
Font Stack
A font stack includes fallback system fonts for when the main font does not get loaded fast enough.
Heading Font
Body Font
Formatting
| Style | Use for |
|---|---|
| Bold | Use strong to emphasize text. |
| Italics | Use em to italicize text. |
| Link | Use when you are linking just a few words of text, or when a link is standalone. |
| 1. Ordered List | Use ordered lists to group items in a pre-determined order. |
| • Unordered List | Use unordered lists to group related items. |
| Blockquote | Use with a quotation that is typically longer than a few lines. |
Typography Crimes
Don't
Use unapproved font families.
More Best Practices
- Make sure your typography has sufficient color contrast. See accessibility for more info.
- When sizing elements, its recommended to use REM units. These allow elements to scale based on a users brower font size.
- The base font size for typography is 16px, which is equal to 1rem. All elements on the page scale based on this root font-size.
- Try to stick to quarter units to simplify spacing values, font-sizes etc. ie.
0.25rem, 0.5rem, 0.75rem, 1rem. - Please limit the use of web fonts if possible, to help with site speed. Use no more than 2 font families.
- Please ensure headings and copy have appropriate kerning set.