Updated July 11, 2026

Web Typography: Fonts, Pairing & Readability

Typography is the largest part of most interfaces — nearly everything a product says, it says in type — and the craft splits into two halves: choosing and combining typefaces well, and setting them so they read effortlessly. The sizing mathematics lives in our type scale guide; this hub is the other half — the craft. The fastest way in is to see a classic pairing in real text.

Choosing is casting

A typeface choice is a casting decision: the face will speak every line the product ever says, in a register readers pick up before they read a word. The guides here cover the choices — pairing faces that contrast without clashing, the serif question as it actually stands on modern screens, display faces that don’t sacrifice readability, and what letterforms signal about a brand. The casting metaphor is doing real work: readers register a typeface’s tone before they read a word of the content, the way a voice registers before the sentence does, and no rewrite undoes that first impression.

Reading is a mechanic

The other half is mechanical and measurable: line length that keeps the eye’s return trip reliable, the difference between legibility — can I decode it? — and readability — does it flow?, type in forms where errors cost most, and the small optical adjustments text needs at small sizes. None of it is taste — most of it has been studied for a century, and the guides report what holds up. The reason the numbers hold is physiological rather than aesthetic: reading happens in jumps and return sweeps, and nearly every measurement in these guides exists to keep those jumps landing where the eye expects.

The practical layer

Between craft and theory sits the working layer every project meets: which Google Fonts genuinely hold up, when a system font stack beats loading anything, how fonts arrive on the page without blocking it, and what variable fonts change. Concrete, current, and covered here — and The Web Typography Checklist compresses the whole hub into a single pre-ship pass.

Where the sizing half lives

This hub deliberately stops where measurement begins. The mathematics of size — scale ratios, heading hierarchies, how many sizes a system needs — belongs to the type scale guide, and how those sizes behave between a phone and a desktop is covered in fluid typography. The split matters in practice: typography that reads badly usually fails on one side only, and knowing whether you are debugging a casting problem or a sizing problem saves rework. Scale Composer holds both halves in one place — a curated set of families for the craft decisions, driven by the same scale that sizes type, spacing and grid — so a pairing chosen here arrives already sized by the system.

Guides in this hub

Judge pairings with your own eyes

Pairing advice only becomes conviction in front of real text: swap the heading and body faces in a live specimen — the Scale Composer’s curated font picker holds ~50 families that survive UI use, and watching a pairing click (or clash) in running text teaches faster than any rule list.

Frequently asked questions

How do I pair fonts?

One reliable principle covers most cases — contrast in class, harmony in proportion. Pair faces from different families (a serif heading with a sans body) whose x-heights and widths are compatible, and give each a distinct job. Similar-but-not-identical faces are the classic mistake.

How many fonts should a website use?

One or two families. Weights, sizes and letter spacing create all the variety most products need — a third family rarely adds anything a bolder weight couldn't, and it costs loading time and coherence.

Are Google Fonts good enough for professional work?

Yes — the catalog's best families are used in serious products everywhere. The skill is curation: the catalog is large and uneven, so the work is knowing which families hold up in UI sizes, carry enough weights, and cover your languages.

What line length is most readable?

Around 45–75 characters per line for body text, with the sweet spot near 66. Shorter chops sentences into fragments; longer makes the eye's return trip to the next line error-prone. Column width is how you control it.

Serif or sans-serif for body text on screens?

Modern screens render both well, so the old "sans for screens" rule has expired. The honest answer is that size, line height and line length affect reading far more than the serif question — choose by voice and context.

What does a typeface say about a brand?

Letterforms carry tone the way a voice does — geometric sans reads modern and neutral, humanist sans warmer, serifs more established or editorial. The signal is real but coarse; it sets a register rather than sending a message.