Choosing and pairing

1. Legibility and readability

Two words come up in every conversation about choosing type, and they are often used as if they meant the same thing. They do not, and keeping them apart makes the conversation more useful.

• Legibility is how easily a reader can tell one character from another. It is mostly a property of the typeface: the shapes of its letters, how open its counters are, how tall its x-height is, whether its capital I, lowercase l and figure 1 look alike. A legible face is one whose letters are hard to mistake for each other.
• Readability is how easily a reader can take in a whole text, comfortably and for as long as it runs. It is mostly a property of the setting: the size, the line length, the line spacing, the contrast with the background, the alignment, and whether the text is broken into manageable pieces. Readable text is text that can be read without effort.

The distinction matters because the fixes are different. A face with confusable letters stays confusing however well it is set; Why type matters shows Il1 and rn/m failing in faces that are otherwise handsome. A perfectly legible face can still be unreadable: Inter set at 11 pixels in light grey on white across a 1,400-pixel line is legible letter by letter and exhausting by the paragraph. When a designer says a page "doesn't read well", the useful follow-up question is which of the two they mean, because one is solved by choosing a different typeface and the other by changing the CSS.

A third word sometimes joins them. Appropriateness, or fit, is whether the type says the right thing for its content: the idea that the font is a tone of voice. A face can be legible and readable and still wrong, the way a children's party invitation set like a tax form is wrong. The rest of this page is a balance among the three.

2. Purpose and context

There is no best typeface, only better and worse fits for a job. The questions that narrow the choice are practical ones: how long is the text, how big will it be, how far away is the reader, on what surface, and in what conditions. A few contexts cover most of what a web developer meets.

Long reading

Articles, documentation and lessons like this one ask a reader to stay for minutes. What helps is a face designed for text sizes, with moderate contrast between thick and thin strokes, comfortable spacing, a reasonably large x-height, and real italics and bold for emphasis. Serif and sans serif both work. The old advice, serif for paper and sans serif for screens, was a tendency of the low-resolution screens of the 1990s; on today's displays a well-made text serif such as Literata, drawn by TypeTogether for reading e-books, reads comfortably. The setting matters at least as much: a measure of roughly 45 to 75 characters, a line height around 1.5, and a size no smaller than the reader's default. Size, spacing and measure, page 06, covers those in CSS.

Interfaces and labels

Buttons, menus, form labels and table headers are read in glances, not paragraphs, often at small sizes. They favor sans serifs with a large x-height, open counters and distinct letterforms, which is why operating systems ship faces such as San Francisco and Segoe UI and why so many applications use Inter, a face drawn for user interfaces. Width matters too: interface text has to fit a fixed space, and a face that is too wide pushes labels onto two lines, while a condensed one becomes hard to read. The generic family system-ui gives an interface the reader's own platform face for nothing, a choice Fonts in CSS, page 05, takes up.

Data and dashboards

Charts and dashboards are the hardest case: small text, often alone, often numbers, with no sentence around it to help the reader guess. The lecture's advice here comes from Tiffany France's article "Choosing Fonts for Your Data Visualization" in Nightingale, the journal of the Data Visualization Society (June 2020), and it comes down to three properties:

• A large x-height. At small sizes, the lowercase letters carry the reading, and a face whose lowercase is a larger share of its size stays readable smaller. The article names Open Sans, Noto Sans and Lato as examples.
• Open, stable counters. The enclosed or partly enclosed spaces in a, e, o and p fill in first as text shrinks. The article's advice is to "use a font with a stable, open counter," and it warns that fonts with distorted counters, whimsical ones such as Marker Felt among them, render poorly at small sizes.
• Tabular figures. Digits that all have the same width line up in columns and do not jitter when a value updates. The article recommends a face with tabular numbers and warns against old-style figures, whose ascending and descending digits look elegant in a sentence and ragged on an axis.

All three are visible in the specimens below. Futura's small x-height and perfectly round o make it striking at headline size and fragile at label size; Verdana was drawn for screens with a large x-height and wide, open letters, and it stays clear far smaller.

Numbers deserve their own care, and CSS can ask a font for tabular figures with font-variant-numeric: tabular-nums when the font has them. The details, page 09, covers numerals in full.

Signage and distance

Signs, posters, kiosks and slides are read from far away, often in passing. They need large letters, heavy enough strokes to survive distance and glare, generous spacing, and distinct shapes; highway and transit signs use sans serifs drawn for exactly this. On the web the same conditions apply to a projected slide or a dashboard on a wall. Display faces drawn for signs, such as Bungee in this section's fonts, are at home here and nowhere near a paragraph.

Small screens

A phone is held closer than a monitor, so text can be physically smaller and still read, but the screen is narrow, the light changes, and the reader is often moving. Faces with a large x-height and robust strokes hold up; hairline serifs and very light weights, which look refined on a large display, thin out under sunlight. The common mistake is the opposite of what it seems: not text that is too large on a phone, but desktop type scaled down until it fits. Respecting the reader's default text size, which phones let readers raise considerably, matters more than the typeface. CSS for people covers zoom and text size, and page 06 covers the units that respect them.

Print

Pages are printed more often than developers expect: receipts, tickets, recipes, boarding passes, articles saved as PDF. Print has far higher resolution than any screen and no backlight, so fine detail survives and high-contrast faces such as Didot and Bodoni, which can shimmer on screen at small sizes, look their best. A print style sheet is a chance to choose differently: a text serif for a printed article, darker greys, no light weights that a cheap printer would lose.

3. How many typefaces

The short answer is usually one or two families, plus a monospaced face if the site shows code. That is not a rule for its own sake; each extra family has to earn its place, and it seldom does.

• One family is the safest choice and often the best. A family with several weights and real italics can produce a full hierarchy on its own, as this course's own pages show: IBM Plex Sans for everything, with IBM Plex Mono for code.
• Two families give two voices: typically one for headings and one for text, or one for reading and one for labels and data. The Nightingale article lists exactly these systems, among them "one serif, one sans serif" and "serif for reading, sans serif for labeling".
• A third is sometimes justified by a real job: a monospaced face for code, where alignment and distinct characters are functional, or a display face for one logo-like element. It should be the exception.

Why more fails

Pages with four, five or six typefaces are common in student work, usually because each one looked good when it was chosen. They fail in predictable ways:

• Noise. Every change of face is a signal that something is different. When faces change for no reason, the reader stops trusting the signals, and the hierarchy the faces were meant to create disappears.
• Inconsistency. Each face has its own x-height, width, weight range and rhythm. Put several on a page and every text block looks set by a different person, which is how readers perceive it: as a page with no editor.
• Weight, in both senses. Several families compete for attention, and the page feels heavy and busy. They also weigh bytes: every family is one or more files, and a page with five families in three weights each can easily download half a megabyte of fonts before the text settles.
• Performance. More files mean more requests, more late swaps, more chances of layout shift and invisible text. Web fonts and performance makes the budget case: "usually one or two" families is a performance rule as much as a design one.

The sample above loads six families, more than 400 KB from this section's fonts, and gives the reader six voices with no reason for any of them. The improvement is not a better third face; it is two of these, used consistently, with the other differences made by size and weight.

4. Pairing typefaces

When a page does use two families, the question is which two. Pairings that work tend to follow one of two strategies, and pairings that fail tend to fall between them.

Concord: faces designed together

The safest pairing is two faces made to be used together. A superfamily is a set of families, often serif, sans serif and mono, drawn on shared proportions, so their x-heights, weights and widths agree while their classifications differ:

• Source Serif and Source Sans, Adobe's open-source families. Paul Hunt designed Source Sans and Frank Grießhammer Source Serif as its companion, with Robert Slimbach consulting on both to keep them related.
• IBM Plex, this site's own type, designed by Mike Abbink at IBM with the Bold Monday foundry and released in 2017: Plex Sans, Plex Serif and Plex Mono, and since then versions for Arabic, Devanagari, Hebrew, Thai, Korean and Japanese among others. A whole site can be set in Plex and still have three distinct voices.
• Roboto and Roboto Slab, by Christian Robertson for Google: the slab version shares Roboto's skeleton and adds slab serifs, so a heading in one and text in the other look like relatives.

A looser version of concord is two faces by the same designer, who tends to carry the same proportions and habits from one design to the next. Matthew Carter's Verdana and Georgia, both drawn for Microsoft's screens, pair naturally for this reason. Concord is hard to get badly wrong; its risk is blandness, which is often what a product interface wants.

Contrast: different in one way, alike in the rest

The other strategy pairs faces that clearly differ, so readers see two voices on purpose. The usual difference is classification: a serif with a sans serif, or an expressive display face with a quiet text face. What makes the pairing work is that the faces agree on almost everything else:

• x-height. If a heading face and a text face have very different x-heights, they look mismatched even when used apart, and mixed on one line (a bold run-in heading, a label next to a value) the difference is jarring. Similar x-heights make the pair feel planned.
• Proportions and width. A wide, round geometric sans next to a narrow, compact serif looks like two pages glued together. Faces with similar widths and similar letter structure, for example both drawn on the humanist model with its pen-like stress, sit well together.
• Mood and period. A Didone serif from 1800 and a rounded, friendly sans from a startup's logo have little to say to each other. Faces that share a tone, whether calm, sturdy, warm or formal, agree even when they differ in form.

The pairing map below summarizes the idea: a good pair differs clearly along one axis and agrees on the others.

Common failures

• Two similar sans serifs. Helvetica headings over Arial text, or Inter over another neo-grotesque, is the most common mistake, because it looks safe. The faces are close enough that no one perceives a deliberate contrast and different enough that the a, the g, the R and the figures disagree. Readers sense the mismatch without being able to name it. Use one of them.
• Two display faces. A display face is built to be the loudest thing on the page. Two of them compete, and the page has no quiet place for the eye to rest. One display face, used sparingly, against a calm text face is the usual answer.
• A display or script face for text. Faces like Bungee, Caveat or Papyrus are fine for a few words and tiring by the sentence; a script loses its legibility quickly at text sizes, and an all-capitals display face removes the word shapes readers use to recognize words.

5. Hierarchy: volume and speaker

Every page has things that matter more and things that matter less, and type is how the reader can tell which is which before reading a word. The lecture offers a metaphor that is worth keeping: think of the page as people talking.

• Size is volume. Big type is a loud voice, middle-sized type a normal voice, small type a soft one. A headline shouts, the text speaks, a caption murmurs.
• Family is the speaker. A change of typeface is a different person talking, or the same person in a different tone. Set one character's lines in a serif and another's in a sans, and readers will hear two people; the deck's examples are "Serif for Joe, Sans Serif for Sally", and a serious serif against a playful decorative face.

The metaphor explains several of the failures above at once. Too many families is a crowd of speakers with nothing to distinguish who matters. Everything large is a room where everyone shouts. Two display faces are two people shouting over each other. And it explains why one family can do so much: one speaker, using volume and emphasis well, can hold an audience on their own.

Differences of rank and differences of kind

The lecture's most useful slide on differentiating text separates two kinds of difference. Some variations put text in an order: one version reads as more important than the other. Others only make text different, a nominal distinction with no ranking. The slide sets "Hello" in pairs to show each one:

Two consequences follow. First, if you want a heading to rank above text, reach for size, weight, grey value and space, not a new color or a new typeface; a heading in a different hue at the same size and weight is different, not more important. Second, the categorical variations are the right tool for categories: links, code, quotations, chart series. The deck closes the topic with a warning that applies to both: when you differentiate, make the difference clear. A heading two pixels larger than the text, or a weight of 500 next to 400, is a difference the reader has to strain to see, and a near miss looks like an error rather than a decision.

Color has an accessibility dimension too. WCAG's success criterion 1.4.1, Use of Color, says color must not be the only visual means of conveying information, because some readers cannot distinguish the hues. A link marked only by its color, in text of similar lightness, fails that test; an underline, a weight change or a sufficient contrast difference fixes it.

6. A typographic system

The lecture defines a typographic design system as a declaration of the font sizes, weights and line heights to be used in a layout, and the point of declaring them is consistency: every heading of a given level looks the same, on every page, in every component, whoever wrote it. The Nightingale article describes five such systems: one font and one size; one font with a big header; two fonts, heavy and light; one serif and one sans serif; and serif for reading with sans serif for labeling. The lecture's slide asks the question directly: one font and one size, or multiple fonts and multiple sizes?

For a developer, the system is the part of typography that lives in code. Its natural form in CSS is a set of custom properties, declared once and used everywhere, so that a value chosen in a design review becomes a name rather than a number scattered across style sheets:

A few things about this sample are deliberate. The system is small: five sizes, two weights, two line heights and three families cover a long article, and every value added later should replace or justify itself. Sizes are in rem, so a reader who raises their default text size raises the whole system with it (units explains why). Line heights are plain numbers, so they scale with whatever size they meet. And each family stack ends in a generic family, so the system degrades to something sensible if a font never arrives.

The sizes here come from a modular scale, each step 1.25 times the last, rounded; this one is the "major third". Choosing the ratio, making the scale fluid with clamp() without breaking zoom, and setting the measure are the subject of Size, spacing and measure, page 06. This page's point is earlier and simpler: decide the set, give it names, and use only the names.

7. The legibility rules, with their reasons

The lecture gathers its practical advice on one slide, headed with the reminder that if they can't read you, you fail. Each rule is a tendency with a reason behind it, and knowing the reason tells you when the rule bends.

Use knockout text sparingly

Knockout text is light text on a dark background, "knocked out" of the ink in print. It works for short, large text such as a banner, a button or a navigation bar, and it is tiring at length: light strokes on dark appear to spread and glow, especially for readers with astigmatism, and thin weights fill in. Dark mode is knockout text by design, which is why good dark themes use slightly heavier weights or lighter greys rather than pure white on pure black. Whatever the polarity, the contrast must meet WCAG 1.4.3: 4.5 to 1 for normal text and 3 to 1 for large text, which WCAG defines as at least 18 point, or 14 point bold.

Avoid condensed typefaces for text

Condensed faces narrow every letter, so counters close up, round letters start to look like straight ones, and the rhythm of words tightens. They earn their place where width is scarce and the text is short: a table header, a headline in a narrow column, a sports score. For paragraphs, a normal width reads better. Impact, below, is the familiar example: strong at a glance, crowded at length.

Use all capitals carefully

Lowercase words have distinctive outlines, with ascenders and descenders that rise and fall; set in capitals, every word becomes a rectangle, and readers lose one of the cues they use to recognize words. Capitals also read as shouting in most online contexts. They work for short labels, acronyms and small headings, especially with a little added letter spacing. In HTML, keep the text in normal case and apply text-transform: uppercase in CSS, so that the source stays readable, the style can change, and screen readers do not spell out a word they mistake for an acronym. Style guides for dyslexic readers, such as the British Dyslexia Association's, advise against capitals for continuous text for the same reasons.

Do not make text too small

Small text is the most common legibility failure on the web, usually in footers, captions, form hints and legal text: precisely the text people need when something goes wrong. Body text should be at least the reader's default size, which is 16 pixels in most browsers unless the reader has changed it, and secondary text should rarely go much below about 0.875 of that. Readers can zoom, but they should not have to, and type set in rem respects the size they chose.

Use bold or italic, but rarely both

Bold and italic are both emphasis, of different kinds: bold for things a scanning eye should find, italic for stress within a sentence and for titles and terms. Combining them doubles the signal without adding meaning, and bold italic at text sizes is often the least legible style in a family. If something needs more emphasis than either gives, the problem is usually the writing or the structure. In HTML, choose the element by meaning, <strong> and <em> for importance and stress, <b> and <i> for conventions such as key terms and foreign words, as Text-level semantics explains; CSS then decides how each looks.

Vertical text is dangerous

Latin text rotated 90 degrees, or stacked one letter above another, defeats reading: the eye has to turn the words back, letter by letter. It survives on book spines and as a short axis label where there is truly no room, and even there a horizontal label above the axis usually works better. This rule is about rotating Latin; Chinese, Japanese and Korean are traditionally written in vertical columns, and CSS supports that properly with writing-mode. Type for people, page 10, introduces it.

Space text properly

Most of readability is space: the space between lines (leading), between letters (tracking), between pairs of letters (kerning), between paragraphs, and around blocks of text. Too little and lines merge; too much and words fall apart. The defaults of a well-made font are usually right for text sizes, while headings often want tighter line height and capitals want a little more letter spacing. Readers must also be able to change spacing: WCAG 1.4.12, Text Spacing, requires that content still works when a reader sets line height to 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times. Page 06 covers spacing in CSS in detail.

8. Choosing for every reader and every language

A typeface choice is made for an imagined reader, and real readers are more varied than the one in the design file. Two groups are easy to forget and should shape the choice from the start.

Readers with different eyes and minds

• Low vision. Readers who enlarge text or use high contrast benefit from faces with a large x-height, open counters and clearly different letterforms. Atkinson Hyperlegible, in this section's fonts in its 2025 "Next" version, was commissioned by the Braille Institute for exactly these readers, and it exaggerates the differences between easily confused characters such as I, l and 1, or 0 and O.
• Contrast. A light weight in light grey may look elegant to a designer on a bright monitor and disappear for a reader with low vision on a phone in sunlight. Weight, size and color work together: WCAG's contrast thresholds assume the text is large or heavy enough, and a thin face at the threshold reads worse than a sturdy one.
• Dyslexia. Readers with dyslexia vary, and the evidence about specific typefaces is more modest than the marketing of fonts sold for dyslexia suggests. The British Dyslexia Association's style guide asks for plain, evenly spaced sans serif type, no underlining and no italics, bold for emphasis, and no capitals for continuous text. Type for people, page 10, looks at what the research does and does not show.

Readers in other languages

A pairing must cover every language the site serves, and this is where many attractive choices fail. Display and decorative faces often cover only basic Latin; even many text faces lack the accented letters of Vietnamese, the Cyrillic of Ukrainian or the Greek of a mathematics page. When a character is missing, the browser takes it from a fallback font, and a name shows letters in two typefaces in the middle of a word (Why type matters shows the effect). Before choosing, check the font's character set against the languages you need, and prefer families that span scripts, as IBM Plex and Noto do.

Some of the tools of hierarchy also do not travel. Chinese, Japanese and Korean have no italic and no case; Arabic and Hebrew have no case either, and Arabic letters join, so letter spacing breaks words apart. A system that relies on italics for emphasis or capitals for labels needs another plan in those scripts, usually weight, size or a different family. Line heights tuned for Latin may be too tight for scripts with tall marks above and below, such as Devanagari or Thai. Type for people, page 10, covers these in depth, and CSS for people covers :lang() and the language-aware parts of CSS.

9. Choosing in context: the title quiz

The lecture ends its practical section with four questions: a printed poster of Girl Scout cookie sales, a stock comparison on CNN.com, election results in a newspaper, and a magazine advertisement for a spa retreat. Each asks which of four typefaces best suits the title. The questions are worth doing slowly, because they bring everything on this page together: purpose, distance and size, medium, and tone of voice.

The options are commercial and system typefaces that cannot be served from this site, so the demo shows them as specimen images rendered on a Mac, with a small chart drawn in SVG to give each title its context. Choose an option to see it over the chart, then check. The answers are suggestions, not verdicts: more than one option can be defended in most questions, and the reasoning for every option is shown, including the ones that are wrong for this context and right for another.

A pattern runs through the answers. The best choices are rarely the most distinctive faces on offer; they are the ones whose tone matches the content and whose shapes survive the conditions. Charts favor plain faces because the data should be the loudest thing. News favors faces with a long association with news. Advertising has the most room for personality, and also the most clichés to avoid.

10. Summary