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.
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 |
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.