Typography
Five questions every design system answers about typography. These are Accessible 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
- R1Human factorsLow effort to understand, they see it fresh each time
- R2People and work contextEveryone, including people with disabilities, AAA
- R3Content and dataForms and tasks, one idea at a time
Question 1
Which text roles does it need?
- Core: heading, body, label (chosen)
- Core and data
- Core and editorial display
- Core and expressive display
Why Accessible first picks it: Few roles keep pages predictable.
becauseR1
displaySteps done 2 of 4
titleSteps done 2 of 4
headingSteps done 2 of 4
bodySteps done 2 of 4
labelSteps done 2 of 4
captionSteps done 2 of 4
dataSteps done 2 of 4
Question 2
How many steps does the type scale take?
- Only the steps the screens need (chosen)The 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 rhythmMany close sizes, so a page can tune its hierarchy and pace.
Why Accessible first picks it: Only the sizes the screens need, each clearly different.
becauseR1
font family1
font size6
font line-height6
font weight2
Accessible 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 Accessible first picks it: Line height grows with text size for zoom users.
becauseR2
- 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 Accessible first picks it: Large text is readable for more people.
becauseR2
- display
- font-family
- → font.family.atkinson-hyperlegible
- font-size
- → font.size.36
- line-height
- → font.line-height.1_2
- font-weight
- → font.weight.700
- title
- font-family
- → font.family.atkinson-hyperlegible
- font-size
- → font.size.28
- line-height
- → font.line-height.1_25
- font-weight
- → font.weight.700
- heading
- font-family
- → font.family.atkinson-hyperlegible
- font-size
- → font.size.22
- line-height
- → font.line-height.1_3
- font-weight
- → font.weight.700
- body
- font-family
- → font.family.atkinson-hyperlegible
- font-size
- → font.size.19
- line-height
- → font.line-height.1_6
- font-weight
- → font.weight.400
- label
- font-family
- → font.family.atkinson-hyperlegible
- font-size
- → font.size.18
- line-height
- → font.line-height.1_4
- font-weight
- → font.weight.700
- caption
- font-family
- → font.family.atkinson-hyperlegible
- font-size
- → font.size.16
- line-height
- → font.line-height.1_5
- font-weight
- → font.weight.400
- data
- font-family
- → font.family.atkinson-hyperlegible
- font-size
- → font.size.19
- line-height
- → font.line-height.1_6
- font-weight
- → font.weight.400
Question 5
Where does type do the most work?
- Tables and inputs
- Articles and long text
- Forms and labels (chosen)
- Headlines and hero
Why Accessible first picks it: Type matters most in form labels and hints.
becauseR3
- button · 2 keys
- input · 1 keys
- badge · 1 keys
- table · 1 keys
When to use
- Page titleUse: type.title. Not: type.display. A clear, consistent title on every page.
- A number in a tableUse: type.body. Not: A small or mono font. Every number must be readable at large size.
- Paragraph or help textUse: type.body, short sentences. Not: type.caption. Large text and short lines lower effort.
- Field label or column headerUse: type.label, above the field, always visible. Not: A placeholder as the label. Labels must stay visible while typing.
All typography tokens
28 tokens · each decision and the primitive it points to
- font.family · 1
font.family.atkinson-hyperlegible"Atkinson Hyperlegible", Verdana, sans-serif - font.size · 6
font.size.362.25rem · 36pxfont.size.281.75rem · 28pxfont.size.221.375rem · 22pxfont.size.191.1875rem · 19pxfont.size.181.125rem · 18pxfont.size.161rem · 16px - font.line-height · 6
font.line-height.1_21.2font.line-height.1_251.25font.line-height.1_31.3font.line-height.1_61.6font.line-height.1_41.4font.line-height.1_51.5 - font.weight · 2
font.weight.700700font.weight.400400 - Decisions · 28
type.display.font-family{font.family.atkinson-hyperlegible}type.display.font-size{font.size.36}type.display.line-height{font.line-height.1_2}type.display.font-weight{font.weight.700}type.title.font-family{font.family.atkinson-hyperlegible}type.title.font-size{font.size.28}type.title.line-height{font.line-height.1_25}type.title.font-weight{font.weight.700}type.heading.font-family{font.family.atkinson-hyperlegible}type.heading.font-size{font.size.22}type.heading.line-height{font.line-height.1_3}type.heading.font-weight{font.weight.700}type.body.font-family{font.family.atkinson-hyperlegible}type.body.font-size{font.size.19}type.body.line-height{font.line-height.1_6}type.body.font-weight{font.weight.400}type.label.font-family{font.family.atkinson-hyperlegible}type.label.font-size{font.size.18}type.label.line-height{font.line-height.1_4}type.label.font-weight{font.weight.700}type.caption.font-family{font.family.atkinson-hyperlegible}type.caption.font-size{font.size.16}type.caption.line-height{font.line-height.1_5}type.caption.font-weight{font.weight.400}type.data.font-family{font.family.atkinson-hyperlegible}type.data.font-size{font.size.19}type.data.line-height{font.line-height.1_6}type.data.font-weight{font.weight.400}
Decisions reference primitives, so changing one primitive updates every decision and component that uses it.
Typography in Accessible first: large. Large text is readable for more people. Type matters most in form labels and hints.