Typography is the craft of setting type so that language can be read with ease and found again when someone needs it. It is not decoration, and it is not a mood board — it is a set of measurable decisions about size, weight, colour, spacing and rhythm.

The vocabulary is small and worth learning, because it is how you describe what is wrong. A typeface is a design; a font is the file, the licence and the weights you shipped. Type is classified by its most visible trait — the serifs, the strokes, the proportions — and every classification trades one thing for another.

Most products need exactly two families: a text face for everything a person reads, and a monospace face for anything a machine wrote — code, identifiers, tables of numbers that must line up. That pairing is a template, not a law.

Limit yourself to two. Every additional family costs you a licence, a download, a decision at every design review, and a mismatch you have to explain. If you need a third, it should be for a genuinely different purpose — a display face for a marketing page, a serif for long-form reading — and it should live in a separate theme, not in the core.

A family is only as good as the weights you ship. Check that it has a real 400 and a real 600, that the italic is drawn rather than slanted, and that the numbers have the widths you need.

Every specimen below is the same pangram, set in a family that is already installed on the machine you are reading this on. That is the point: these are the fonts that arrive by default, and they are what your interface looks like on every device where nobody chose a typeface.

The pangram earns its place because it shows the whole alphabet in one line — every letter, in ascending and descending pairs, in a word that happens to mean nothing. Set it in a new family and you learn more in a second than from a specimen sheet.

None of these is a good choice for a new product. They are popular because they are free and everywhere, not because they are beautiful. But they are worth knowing, because when you *do* pick one — for a prototype, for a print piece, for a machine with no fonts — it is these you will get.

Name type tokens by what they are for — text-body, text-heading, text-caption — and let the scale live underneath. A role-based scale survives a redesign: you change what text-heading means and every heading on the product changes with it, because nobody wrote 24px anywhere.

Pick a ratio and stick to it. A modular scale on a 16px base with a 1.25 ratio gives you 12, 14, 16, 20, 25, 31, 39 and 49 — enough steps for almost any interface, and few enough that people remember them.

Somewhere between 45 and 75 characters per line is comfortable for body text. Past 75 the eye loses its place on the return sweep and has to hunt for the start of the next line; below 45 it reads as a list of fragments. Constrain prose with a max-width in ch units and leave the rest of the page full width — full-width paragraphs are not a style, they are a bug.

Leading is the space between the lines, and it has to grow as the type gets bigger. Body copy wants 1.5 to 1.6; a 49px heading wants 1.05. Set both in the token, because the number that is right for one is wrong for the other.

Most interfaces need exactly two weights: regular for body copy and a semibold or bold for headings and emphasis. A third weight that is used twice is decoration; a fourth is noise. Hierarchy comes first from size, then from weight, then from colour — and only then from a typeface that looks different.

The same applies to size: the gap between your body text and your headings should be obvious without anyone having to think about it. If the reader can tell a heading from a paragraph at a glance, the hierarchy is doing its job; if they have to check the size, it is not.

A web font that arrives late replaces your text with an invisible box, then with a different-looking font, then with the real one. That is three layouts and a visible jump. The fix is to preload the font file, declare font-display: swap, and give the fallback similar metrics so the swap is a subtle change rather than a reflow.

Self-hosting also removes a third-party request from your critical path, which improves the metric users actually feel and keeps the page working when the CDN does not.

Legibility is a hard requirement, not a preference. Body text at 16px in a 400 weight with 1.6 line height is a good baseline; thin weights below that size are the first thing to fail in low light.

Users can and do change their own font size. Never set a fixed height on a text container, never clip text with overflow: hidden, and never use text-transform: uppercase on anything longer than a few words — it destroys the shape of the word for screen reader users and for anyone with dyslexia.

For the full accessibility strategy (WCAG 2.2 AA baseline, keyboard, semantics, motion, testing), see the <a href="/design-system/accessibility">Accessibility</a> chapter.