Open DS

Typography

Five questions every design system answers about typography. These are Brand expressive’s answers, and each one points back to the reasons that chose it.

View all 28 typography tokens ↓

The reasons this scheme answers from

  • R1BrandBold, loud
  • R2Content and dataImages and campaigns, one idea at a time

Question 1

Which text roles does it need?

  • Core: heading, body, label
  • Core and data
  • Core and editorial display
  • Core and expressive display (chosen)

Why Brand expressive picks it: A big expressive display role carries the brand.

becauseR1

displayDays to launch 6
titleDays to launch 6
headingDays to launch 6
bodyDays to launch 6
labelDays to launch 6
captionDays to launch 6
dataDays to launch 6

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 Brand expressive picks it: Fine steps give big moments room.

becauseR1

font family2
font size6
font line-height6
font weight3

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 Brand expressive picks it: Ratios suit the big display sizes.

becauseQ1

  • 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 Brand expressive picks it: Regular body; the display does the shouting.

becauseR2

  • display
    font-family
    → font.family.bricolage-grotesque
    font-size
    → font.size.56
    line-height
    → font.line-height.1_05
    font-weight
    → font.weight.800
  • title
    font-family
    → font.family.bricolage-grotesque
    font-size
    → font.size.40
    line-height
    → font.line-height.1_1
    font-weight
    → font.weight.800
  • heading
    font-family
    → font.family.bricolage-grotesque
    font-size
    → font.size.28
    line-height
    → font.line-height.1_2
    font-weight
    → font.weight.700
  • body
    font-family
    → font.family.dm-sans
    font-size
    → font.size.17
    line-height
    → font.line-height.1_55
    font-weight
    → font.weight.400
  • label
    font-family
    → font.family.dm-sans
    font-size
    → font.size.15
    line-height
    → font.line-height.1_3
    font-weight
    → font.weight.700
  • caption
    font-family
    → font.family.dm-sans
    font-size
    → font.size.14
    line-height
    → font.line-height.1_4
    font-weight
    → font.weight.400
  • data
    font-family
    → font.family.dm-sans
    font-size
    → font.size.17
    line-height
    → font.line-height.1_55
    font-weight
    → font.weight.400

Question 5

Where does type do the most work?

  • Tables and inputs
  • Articles and long text
  • Forms and labels
  • Headlines and hero (chosen)

Why Brand expressive picks it: Type does its work in headlines.

becauseR1

  • button · 2 keys
  • input · 1 keys
  • badge · 1 keys
  • table · 1 keys

When to use

  • Page titleUse: type.display. Not: type.title. The display role carries the brand in every hero.
  • A number in a tableUse: type.body. Not: A mono font. Tables are rare; keep the brand voice.
  • Paragraph or help textUse: type.body, short. Not: Long paragraphs. Short copy keeps the energy.
  • Field label or column headerUse: type.label. Not: type.caption. Labels stay readable on vivid color.

All typography tokens

28 tokens · each decision and the primitive it points to

  • font.family · 2font.family.bricolage-grotesque"Bricolage Grotesque", system-ui, sans-seriffont.family.dm-sans"DM Sans", system-ui, sans-serif
  • font.size · 6font.size.563.5rem · 56pxfont.size.402.5rem · 40pxfont.size.281.75rem · 28pxfont.size.171.0625rem · 17pxfont.size.150.9375rem · 15pxfont.size.140.875rem · 14px
  • font.line-height · 6font.line-height.1_051.05font.line-height.1_11.1font.line-height.1_21.2font.line-height.1_551.55font.line-height.1_31.3font.line-height.1_41.4
  • font.weight · 3font.weight.800800font.weight.700700font.weight.400400
  • Decisions · 28type.display.font-family{font.family.bricolage-grotesque}type.display.font-size{font.size.56}type.display.line-height{font.line-height.1_05}type.display.font-weight{font.weight.800}type.title.font-family{font.family.bricolage-grotesque}type.title.font-size{font.size.40}type.title.line-height{font.line-height.1_1}type.title.font-weight{font.weight.800}type.heading.font-family{font.family.bricolage-grotesque}type.heading.font-size{font.size.28}type.heading.line-height{font.line-height.1_2}type.heading.font-weight{font.weight.700}type.body.font-family{font.family.dm-sans}type.body.font-size{font.size.17}type.body.line-height{font.line-height.1_55}type.body.font-weight{font.weight.400}type.label.font-family{font.family.dm-sans}type.label.font-size{font.size.15}type.label.line-height{font.line-height.1_3}type.label.font-weight{font.weight.700}type.caption.font-family{font.family.dm-sans}type.caption.font-size{font.size.14}type.caption.line-height{font.line-height.1_4}type.caption.font-weight{font.weight.400}type.data.font-family{font.family.dm-sans}type.data.font-size{font.size.17}type.data.line-height{font.line-height.1_55}type.data.font-weight{font.weight.400}

Decisions reference primitives, so changing one primitive updates every decision and component that uses it.

Typography in Brand expressive: regular. Regular body; the display does the shouting. Type does its work in headlines.