Typography
Typography
Round letters, easy reading
Two free, open-source typefaces from Google Fonts. Outfit has the same round geometry as our wordmark and sets every headline. DM Sans is friendly and very legible at small sizes, so it carries everything else.
Hero titles, posters and covers. Medium (500), 56–96 px, line height 1.05, tracking −1%. One short line, ideally fewer than six words.
Good typography is invisible. It guides the eye from line to line, so readers stay with the story instead of the letters. Spacing between lines matters as much as the letters themselves.
- Line height
- 1.05 · 105% · 16.8 px at 16 px
- Letter spacing
- -0.01 em · -1%
Stay a little longer.
Good typography is invisible. It guides the eye from line to line, so readers stay with the story instead of the letters. Spacing between lines matters as much as the letters themselves.
Stay a little longer.
Good typography is invisible. It guides the eye from line to line, so readers stay with the story instead of the letters. Spacing between lines matters as much as the letters themselves.
font-family: Outfit, Arial, Helvetica, sans-serif;Page and section headings. Medium (500) for H1 and H2, Regular (400) for H3. Sentence case, never all capitals.
Good typography is invisible. It guides the eye from line to line, so readers stay with the story instead of the letters. Spacing between lines matters as much as the letters themselves.
- Line height
- 1.5 · 150% · 24 px at 16 px
All running text, from web pages to booking emails. Regular (400) at 16–18 px, line height 1.6, 60–75 characters per line. Bold (700) for emphasis only.
Good typography is invisible. It guides the eye from line to line, so readers stay with the story instead of the letters. Spacing between lines matters as much as the letters themselves.
- Line height
- 1.6 · 160% · 25.6 px at 16 px
Rosa bakes the bread at six.
Good typography is invisible. It guides the eye from line to line, so readers stay with the story instead of the letters. Spacing between lines matters as much as the letters themselves.
Rosa bakes the bread at six.
Good typography is invisible. It guides the eye from line to line, so readers stay with the story instead of the letters. Spacing between lines matters as much as the letters themselves.
font-family: "DM Sans", Arial, Helvetica, sans-serif;Captions in Regular at 13–14 px. Labels, tags and wayfinding in Bold capitals at 11–12 px with +12% letter spacing.
Good typography is invisible. It guides the eye from line to line, so readers stay with the story instead of the letters. Spacing between lines matters as much as the letters themselves.
- Line height
- 1.5 · 150% · 24 px at 16 px
- Letter spacing
- +0.12 em · +12%