Typography can help create clear hierarchies, organize information, and guide users through a product or experience.
A font stack includes fallback system fonts for when the main font does not get loaded fast enough.
strong to emphasize text.
em to italicize text.
|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.
|Use with a quotation that is typically longer than a few lines.
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.