Typography
Five questions every design system answers about typography. These are Content first’s answers, and each one points back to the reasons that chose it.
View all 28 typography tokens ↓The reasons this scheme answers from
- R1Content and dataLong-form text, one idea at a time
- R2Tasks and flowsRead start to end, rarely
- R3People and work contextOccasional visitors, AA
- R4OutcomesReading comfort, losing your place
Question 1
Which text roles does it need?
- Core: heading, body, label
- Core and data
- Core and editorial display (chosen)
- Core and expressive display
Why Content first picks it: A lead and a display role open articles.
becauseR1
displayGuides saved 4
titleGuides saved 4
headingGuides saved 4
bodyGuides saved 4
labelGuides saved 4
captionGuides saved 4
dataGuides saved 4
Question 2
How many steps does the type scale take?
- Only the steps the screens needThe scale keeps the few sizes the screens use, and nothing in between.
- One step per kind of textOne size each for caption, body, heading, title and display.
- Fine steps, so pages can set their own rhythm (chosen)Many close sizes, so a page can tune its hierarchy and pace.
Why Content first picks it: Long pages need a clear hierarchy of headings, with fine steps between them.
becauseR1
font family2
font size6
font line-height4
font weight2
Content first’s answerMore that other schemes use
Question 3
How are sizes and line heights defined?
- A ratio, line heights on the grid
- A ratio, line heights in proportion (chosen)
- Fixed steps
Why Content first picks it: Line height is a ratio, so it grows with the text.
becauseR2R3
- A ratio, line heights in proportion
- from font.family
- from font.size
- from font.line-height
- from font.weight
Decisions point at primitives, so the rule lives in one place.
Question 4
How large is body text?
- Small
- Regular
- Large (chosen)
Why Content first picks it: Large body text is easy on the eyes.
becauseR4
- display
- font-family
- → font.family.source-serif-4
- font-size
- → font.size.44
- line-height
- → font.line-height.1_15
- font-weight
- → font.weight.600
- title
- font-family
- → font.family.source-serif-4
- font-size
- → font.size.36
- line-height
- → font.line-height.1_15
- font-weight
- → font.weight.600
- heading
- font-family
- → font.family.source-serif-4
- font-size
- → font.size.28
- line-height
- → font.line-height.1_3
- font-weight
- → font.weight.600
- body
- font-family
- → font.family.source-serif-4
- font-size
- → font.size.18
- line-height
- → font.line-height.1_65
- font-weight
- → font.weight.400
- label
- font-family
- → font.family.inter
- font-size
- → font.size.16
- line-height
- → font.line-height.1_3
- font-weight
- → font.weight.600
- caption
- font-family
- → font.family.inter
- font-size
- → font.size.14
- line-height
- → font.line-height.1_45
- font-weight
- → font.weight.400
- data
- font-family
- → font.family.source-serif-4
- font-size
- → font.size.18
- line-height
- → font.line-height.1_65
- font-weight
- → font.weight.400
Question 5
Where does type do the most work?
- Tables and inputs
- Articles and long text (chosen)
- Forms and labels
- Headlines and hero
Why Content first picks it: Type does its work in articles.
becauseR1
- button · 2 keys
- input · 1 keys
- badge · 1 keys
- table · 1 keys
When to use
- Page titleUse: type.title. Not: type.display (landing only). Display is kept for the landing moment; article titles stay calm.
- A number in a tableUse: type.body. Not: A mono font. Tables are rare and read row by row.
- Paragraph or help textUse: type.body, at most 65 characters a line. Not: type.caption. A large size and short lines make long text easy on the eyes.
- Field label or column headerUse: type.label. Not: type.caption. Caption is too faint for a label people must read.
All typography tokens
28 tokens · each decision and the primitive it points to
- font.family · 2
font.family.source-serif-4"Source Serif 4", Georgia, seriffont.family.interInter, system-ui, sans-serif - font.size · 6
font.size.442.75rem · 44pxfont.size.362.25rem · 36pxfont.size.281.75rem · 28pxfont.size.181.125rem · 18pxfont.size.161rem · 16pxfont.size.140.875rem · 14px - font.line-height · 4
font.line-height.1_151.15font.line-height.1_31.3font.line-height.1_651.65font.line-height.1_451.45 - font.weight · 2
font.weight.600600font.weight.400400 - Decisions · 28
type.display.font-family{font.family.source-serif-4}type.display.font-size{font.size.44}type.display.line-height{font.line-height.1_15}type.display.font-weight{font.weight.600}type.title.font-family{font.family.source-serif-4}type.title.font-size{font.size.36}type.title.line-height{font.line-height.1_15}type.title.font-weight{font.weight.600}type.heading.font-family{font.family.source-serif-4}type.heading.font-size{font.size.28}type.heading.line-height{font.line-height.1_3}type.heading.font-weight{font.weight.600}type.body.font-family{font.family.source-serif-4}type.body.font-size{font.size.18}type.body.line-height{font.line-height.1_65}type.body.font-weight{font.weight.400}type.label.font-family{font.family.inter}type.label.font-size{font.size.16}type.label.line-height{font.line-height.1_3}type.label.font-weight{font.weight.600}type.caption.font-family{font.family.inter}type.caption.font-size{font.size.14}type.caption.line-height{font.line-height.1_45}type.caption.font-weight{font.weight.400}type.data.font-family{font.family.source-serif-4}type.data.font-size{font.size.18}type.data.line-height{font.line-height.1_65}type.data.font-weight{font.weight.400}
Decisions reference primitives, so changing one primitive updates every decision and component that uses it.
Typography in Content first: large. Large body text is easy on the eyes. Type does its work in articles.