Design Typography
Cherry covers a wide range of typography variations, covering the most common web patterns like headings, subtitles, paragraphs and so on. There are 2 types of typography definitions, one for mobile and one for desktop.
Form Input
The font-size of an <input> should always be 16px or larger. As soon as the font-size is 15px or less, Safari on iOS will zoom into that input.
| Name | Font-Family | 📱 Font-Size | 📱 Line-Height | 🖥  Font-Size | 🖥  Line-Height |
|---|---|---|---|---|---|
| Hero1 | Inter, sans-serif | 52px | 1.15 | 62px | 1.15 |
| Hero2 | Inter, sans-serif | 42px | 1.15 | 52px | 1.15 |
| Hero3 | Inter, sans-serif | 32px | 1.15 | 42px | 1.15 |
| Heading1 | Inter, sans-serif | 30px | 1.20 | 40px | 1.20 |
| Heading2 | Inter, sans-serif | 22px | 1.20 | 32px | 1.20 |
| Heading3 | Inter, sans-serif | 18px | 1.20 | 28px | 1.20 |
| Heading4 | Inter, sans-serif | 16px | 1.30 | 24px | 1.30 |
| Heading5 | Inter, sans-serif | 14px | 1.40 | 20px | 1.40 |
| Heading6 | Inter, sans-serif | 12px | 1.40 | 18px | 1.40 |
| Eyebrow | Inter, sans-serif | 16px | 1.35 | 18px | 1.15 |
| Subtitle | Inter, sans-serif | 18px | 1.35 | 20px | 1.35 |
| Button | Inter, sans-serif | 16px | 1.00 | 16px | 1.00 |
| Button Big | Inter, sans-serif | 18px | 1.00 | 18px | 1.00 |
| Lead | Inter, sans-serif | 16px | 1.35 | 18px | 1.45 |
| Input | Inter, sans-serif | 16px | 1.00 | 16px | 1.00 |
| Input Big | Inter, sans-serif | 18px | 1.00 | 18px | 1.00 |
| Strong | Inter, sans-serif | 14px | 1.50 | 16px | 1.50 |
| Text | Inter, sans-serif | 14px | 1.50 | 16px | 1.50 |
| Small | Inter, sans-serif | 12px | 1.30 | 14px | 1.30 |
| Blockquote | Inter, sans-serif | 14px | 1.50 | 18px | 1.50 |
| Code | Roboto Mono, monospace | 14px | 1.50 | 18px | 1.50 |
Demo
Hero1
Hero2
Hero3
Heading1
Heading2
Heading3
Heading4
Heading5
Heading6
Strong - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.
Text - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.
Small - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.
Blockquote - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Code - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.Typography in Figma
