Cherry offers two distinct sets of typography definitions: one for desktop and another for mobile. These comprehensive definitions ensure that type displays correctly on screens of all sizes.
| Style | Font | Size | Line Height | Weight |
|---|---|---|---|---|
| Hero1 | Inter | 128px | 1.1 | 700 |
| Hero2 | Inter | 96px | 1.1 | 700 |
| Hero3 | Inter | 72px | 1.1 | 700 |
| H1 | Inter | 60px | 1.4 | 700 |
| H2 | Inter | 36px | 1.5 | 700 |
| H3 | Inter | 30px | 1.5 | 700 |
| H4 | Inter | 24px | 1.5 | 700 |
| H5 | Inter | 20px | 1.5 | 700 |
| H6 | Inter | 18px | 1.6 | 700 |
| Text | Inter | 16px | 1.7 | 400 |
| Strong | Inter | 16px | 1.7 | 700 |
| Small | Inter | 14px | 1.7 | 400 |
| Blockquote | Inter | 18px | 1.7 | 400 |
| Code | Mono | 16px | 1.7 | 400 |
| Button Small | Inter | 14px | 1.0 | 600 |
| Button | Inter | 16px | 1.0 | 600 |
| Button Big | Inter | 18px | 1.0 | 600 |
| Input Small | Inter | 14px | 1.0 | 400 |
| Input | Inter | 16px | 1.0 | 400 |
| Input Big | Inter | 18px | 1.0 | 400 |
Styles can be found in the Figma Template in the Typography page.