Typography
Five questions every design system answers about typography. These are Multi-brand’s answers, and each one points back to the reasons that chose it.
View all 28 typography tokens ↓The reasons this scheme answers from
- R1Business and productSells and converts, many
- R2BrandNeutral and adaptable, present
- R3Tasks and flowsComplete a form, sometimes
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 Multi-brand picks it: One set of roles across brands.
becauseR1
displayPlan Standard
titlePlan Standard
headingPlan Standard
bodyPlan Standard
labelPlan Standard
captionPlan Standard
dataPlan Standard
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 text (chosen)One 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 Multi-brand picks it: One size per kind of text suits every brand font.
becauseR1
font family1
font size6
font line-height5
font weight3
Multi-brand’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 Multi-brand picks it: Ratios work with every brand font.
becauseR1
- 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 (chosen)
- Large
Why Multi-brand picks it: Regular body size suits all brands.
becauseR2
- display
- font-family
- → font.family.inter
- font-size
- → font.size.32
- line-height
- → font.line-height.1_2
- font-weight
- → font.weight.700
- title
- font-family
- → font.family.inter
- font-size
- → font.size.24
- line-height
- → font.line-height.1_25
- font-weight
- → font.weight.600
- heading
- font-family
- → font.family.inter
- font-size
- → font.size.20
- line-height
- → font.line-height.1_3
- font-weight
- → font.weight.600
- body
- font-family
- → font.family.inter
- font-size
- → font.size.16
- line-height
- → font.line-height.1_5
- font-weight
- → font.weight.400
- label
- font-family
- → font.family.inter
- font-size
- → font.size.14
- line-height
- → font.line-height.1_4
- font-weight
- → font.weight.600
- caption
- font-family
- → font.family.inter
- font-size
- → font.size.13
- line-height
- → font.line-height.1_4
- font-weight
- → font.weight.400
- data
- font-family
- → font.family.inter
- font-size
- → font.size.16
- line-height
- → font.line-height.1_5
- 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 Multi-brand picks it: Sign-up and account forms carry most text.
becauseR3
- button · 2 keys
- input · 1 keys
- badge · 1 keys
- table · 1 keys
When to use
- Page titleUse: type.title in the brand font. Not: A brand-specific style. Roles stay shared; only the brand font changes.
- A number in a tableUse: type.body. Not: A mono font. Numbers read like text in every brand.
- Paragraph or help textUse: type.body. Not: type.caption. Regular body size suits every brand.
- Field label or column headerUse: type.label. Not: type.caption. Labels stay readable in every brand.
All typography tokens
28 tokens · each decision and the primitive it points to
- font.family · 1
font.family.interInter, system-ui, sans-serif - font.size · 6
font.size.322rem · 32pxfont.size.241.5rem · 24pxfont.size.201.25rem · 20pxfont.size.161rem · 16pxfont.size.140.875rem · 14pxfont.size.130.8125rem · 13px - font.line-height · 5
font.line-height.1_21.2font.line-height.1_251.25font.line-height.1_31.3font.line-height.1_51.5font.line-height.1_41.4 - font.weight · 3
font.weight.700700font.weight.600600font.weight.400400 - Decisions · 28
type.display.font-family{font.family.inter}type.display.font-size{font.size.32}type.display.line-height{font.line-height.1_2}type.display.font-weight{font.weight.700}type.title.font-family{font.family.inter}type.title.font-size{font.size.24}type.title.line-height{font.line-height.1_25}type.title.font-weight{font.weight.600}type.heading.font-family{font.family.inter}type.heading.font-size{font.size.20}type.heading.line-height{font.line-height.1_3}type.heading.font-weight{font.weight.600}type.body.font-family{font.family.inter}type.body.font-size{font.size.16}type.body.line-height{font.line-height.1_5}type.body.font-weight{font.weight.400}type.label.font-family{font.family.inter}type.label.font-size{font.size.14}type.label.line-height{font.line-height.1_4}type.label.font-weight{font.weight.600}type.caption.font-family{font.family.inter}type.caption.font-size{font.size.13}type.caption.line-height{font.line-height.1_4}type.caption.font-weight{font.weight.400}type.data.font-family{font.family.inter}type.data.font-size{font.size.16}type.data.line-height{font.line-height.1_5}type.data.font-weight{font.weight.400}
Decisions reference primitives, so changing one primitive updates every decision and component that uses it.
Typography in Multi-brand: regular. Regular body size suits all brands. Sign-up and account forms carry most text.