Typography
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. The Desktop (LG) values apply from the lg breakpoint (992px) and up, while the Mobile (XS) values are the base scale used on narrower screens.
| 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 |
The Weight column is part of the design spec. In code, the typography mixins
only set font-size and line-height, so heading weights come from the
browser's bold defaults for h1 to h6 unless you set font-weight
yourself. The Button (600) and Input (400) components set their own weights.
Usage
Nearly every style above is available as a ready-made CSS mixin exported from cherry-styled-components: styledHero1, styledHero2, styledHero3, styledH1 through styledH6, styledText, styledStrong, styledSmall, styledBlockquote, styledCode, styledButton, styledButtonBig, styledInput, and styledInputBig. Each mixin takes the theme and returns the responsive font-size and line-height, switching from the mobile to the desktop values at the lg breakpoint:
import styled from "styled-components";
import { styledH1 } from "cherry-styled-components";
const Title = styled.h2`
${({ theme }) => styledH1(theme)}
`;For scales without a dedicated mixin (like Button Small and Input Small) or for custom theme keys, use the createTypographyStyle factory, e.g. createTypographyStyle("buttonSmall").
To apply these styles in code, use the exported typography helpers, and see Theme for font tokens.
Styles can be found in the Figma Template in the Typography section of the Foundations page.