Typography expresses hierarchy. Correct use of typography helps manage the display of content, allowing the product to be effective and useful.
The only font family we currently use is Lato. You can download it here if you don't have it:
https://fonts.google.com/specimen/Lato
Different font sizes and weights can add emphasis and help with hierarchy. Correct use of typography helps manage the display of content, allowing the product to be effective and useful.
| Element/Class | Typeface | Size | Weight | Purpose |
|---|---|---|---|---|
| Mini | Lato | 10px | Regular | Super SUPER secondary text - RARELY used |
| Caption | Lato | 11px | Regular | Super secondary text |
| Body 2 | Lato | 12px | Regular | Secondary text, data (in modules), labels |
| Body 1 | Lato | 14px | Regular | Default/main font size |
| Subtitle 2 | Lato | 14px | Bold | Module titles |
| Subtitle 1 | Lato | 16px | Regular | Tabs, sub headings |
| H1 | Lato | 60px | Regular | Some headings |
| H2 | Lato | 48px | Regular | Some headings |
| H3 | Lato | 36px | Regular | Some headings |
| H4 | Lato | 32px | Regular | Some headings |
| H5 | Lato | 28px | Regular | Some headings |
| H6 | Lato | 24px | Bold | Main section heading |
| H7 | Lato | 20px | Regular | Page title, section headings, steps flow headings |
| H8 | Lato | 18px | Regular | Some headings |