The words have a shape.
How to choose, arrange and deliver type that helps people read—and gives an interface its own voice.
Explore the articleAn exhibition about the everyday things we choose to keep.
Same words. A different way into them.
Before I notice the illustrations on a page, I usually know whether I want to read it. A title gives me a way in. A paragraph either feels approachable or looks like work. A button either tells me what will happen or leaves me guessing. Much of that first impression is typography.
Choosing a typeface is one decision inside a much larger system. Size, measure, spacing, hierarchy, language and loading behavior all change the experience. This article builds that system around a small, fictional exhibition announcement. The copy stays familiar so the effect of each decision is easier to see. These are design studies, not measurements of reading speed or evidence that one style works for every reader.
What does this text need to do?
A headline, an inventory row and a long essay ask for different kinds of attention. The headline needs to establish a subject quickly. The row needs to support comparison. The essay needs to remain comfortable through several minutes of reading. Choosing the same typographic treatment for all three because it looks consistent misses the purpose of consistency.
I start by identifying the jobs in the actual content: title, introduction, section heading, body, caption, label, value and action. Then I ask what the reader must find first, what they must compare, and what they can safely discover later. This gives the type system a reason to exist before a size scale is selected.
Use real copy early. A three-word placeholder cannot tell you whether a navigation label will wrap in translation. A perfect two-line heading cannot tell you what happens when the editor writes twelve more words. The useful specimen is the content the interface must survive, including its least convenient examples.
Judge the small paragraph before the big specimen.
A display face can make a single word extraordinary and become tiring across six paragraphs. A quieter text face may look unremarkable in a font picker but work beautifully in the finished page. Test candidates at the sizes and weights they will actually use, on the devices and backgrounds the project needs.
Look at the lowercase texture, counters, punctuation and distinction between similar characters. Try I, l and 1, or O and 0, when codes and identifiers matter. Check italic and bold in complete sentences. For an interface containing prices or quantities, inspect the numerals and whether the family offers tabular figures. Font size alone does not make two families appear equally large: their proportions differ.
Language coverage belongs in the first round of selection. Check the accented letters, currency symbols and scripts present in the real content. A missing glyph can silently come from another font, changing the texture and metrics inside one sentence. A Latin specimen does not establish that Arabic text, diacritics or mixed-direction content will work well.
Pair fonts by assigning clear roles. One family may be enough. Two may help distinguish expressive headings from sustained reading. Either way, repeated roles need stable rules. Adding a third family rarely fixes unclear hierarchy. Also verify that the license covers web embedding, the intended domains and the way the font will be served.
Objects in good company. A quiet exhibition of useful things, carefully arranged.
Objects in good company. A quiet exhibition of useful things, carefully arranged.
Objects in good company. A quiet exhibition of useful things, carefully arranged.
Importance has more than one control.
Size is the obvious hierarchy control, but it is not the only one. Weight, position, whitespace and grouping also tell the eye what belongs together. A heading placed closer to the paragraph above than to the content below can suggest the wrong relationship even when its size is correct.
For the exhibition announcement, the title establishes the subject, the introduction explains the proposition, and the date and location form a compact practical group. Those are different jobs. They do not need equal emphasis. If every detail becomes bold, the reader loses the benefit of emphasis.
A modular scale can help limit arbitrary sizes, but its ratio is a design tool rather than a rule of readability. Start with comfortable body text, then choose a few steps that clearly distinguish the roles you need. A tightly packed dashboard may need a different range from an editorial landing page. Name those roles in code so the system can change without hunting for unrelated pixel values.
Visual hierarchy and document structure should agree. Use headings to describe the content outline, not to obtain a convenient font size. A paragraph can look like a small label without becoming a heading; a heading can look restrained and still retain its semantic level. That distinction supports navigation as well as visual design.
The line is part of the sentence.
A very long line asks the eye to travel farther and find the next line’s beginning. A very narrow column breaks phrases into small fragments. Neither extreme is automatically wrong: a short caption and a long essay have different needs. For English body copy, I would begin by exploring a measure around 55–70ch, then read the actual result instead of treating the number as a certificate.
The CSS ch unit is based on the advance width of the zero glyph in the current font. A 65ch column does not guarantee exactly 65 characters on every line. Letters have different widths, words wrap together, and the selected font changes the measure. That makes ch a useful relative control, not a literal character counter.
Line height must be judged with the typeface and the measure. Tight lines can make a dense paragraph hard to follow. Very loose lines can weaken the connection between them. A unitless line-height is convenient because descendants inherit the multiplier and calculate it against their own font size. A fixed length can produce a different result when a child becomes larger.
Paragraph spacing and line spacing have separate jobs. Lines should form a paragraph; paragraphs should form a sequence. If the gap between paragraphs barely differs from the gap between lines, the structure becomes less visible. If every paragraph is surrounded by a huge void, a connected argument can feel like unrelated statements.
An exhibition begins before the first object is seen. The title gives us a subject. A short introduction helps us decide whether to stay. Dates, places and small practical details tell us how to take part. When these pieces have a clear relationship, the page asks less effort of the reader. The typography does not replace the story; it gives the story a shape we can follow.
Read the passage again after changing a single setting. Notice where your eye returns to the next line, and whether the paragraphs still feel connected.
Requested size assumes a 16px root; the sample uses rem and respects a changed root size. Measure cannot exceed the available space. The override demonstrates spacing only; it is not a conformance test.
Try the dense preset first, then the reading preset. Change only one control before drawing a conclusion. Notice how a larger size can improve visibility while also shortening each line. Width and leading need to be considered again after that change; they are not independent finishing touches.
Spacing is not a universal effect.
Tracking adjusts spacing across a run of characters. Kerning adjusts particular pairs. A little tracking can help a short uppercase label fit its intended tone, but applying it across body copy changes the whole reading texture. Excessive tracking can make words feel disconnected. Negative tracking that gives a large title a compact silhouette can crowd a small paragraph.
These choices are script-dependent. Arabic is connected writing, with shaping behavior and spacing conventions that differ from Latin text. Do not export a Latin all-caps recipe into Arabic as a decorative rule. Use a suitable font, mark the content language and direction, and inspect real sentences with their punctuation and diacritics.
Numbers also deserve a role. Proportional numerals can sit naturally in prose. Tabular numerals, when supported by the font, reserve equal advances and help columns and changing counters remain aligned. Alignment still needs layout rules: equal-width digits do not by themselves right-align a price column or handle decimal separators.
For mixed-direction text, an email address or identifier can need isolation from the surrounding sentence. Semantic markup such as bdi can help when direction is unknown. The point is to preserve the order and meaning of the content, not simply move the whole block to the other edge of the screen.
A short uppercase label. Body paragraphs need a separate decision.
Equal digit advances, where supported, plus explicit end alignment.
لكل كلمة مكان، ولكل سطر إيقاع.
Read the script on its own terms. No decorative letter spacing.
Keep the relationship. Reconsider the size.
A desktop title can occupy a broad field of whitespace. On a phone, the same size may leave one word on each line and push the introduction far away. Responsive typography preserves the role of the heading while adjusting its scale, measure and surrounding space to the available composition.
Fluid sizing with clamp can interpolate between chosen limits, but the formula still needs judgment. A viewport-only font size can work against user preferences and zoom. Combining relative units with a viewport contribution is a more flexible starting point, not a guarantee that text will enlarge sufficiently. Test browser zoom, increased default font size, long headings and narrow windows.
Avoid fixing the height of a text container merely because one screenshot fits. Translation, a font swap or larger text can add lines. Prefer content-driven height and wrapping. Keep manual line breaks for cases where you really intend a fixed composition; do not use them as a general solution for paragraphs or every responsive title.
.reading-copy {
max-inline-size: 65ch;
font-size: 1.125rem;
line-height: 1.6;
overflow-wrap: anywhere;
}
.article-title {
font-size: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
line-height: 1.08;
}
.reading-copy p + p {
margin-block-start: 1.1em;
}The design must tolerate a different reading preference.
Contrast, size, weight and spacing work together. A subtle gray may look elegant in a large sample and become difficult in a small caption. WCAG’s AA contrast thresholds are 4.5:1 for ordinary text and 3:1 for qualifying large text. Passing that color calculation does not establish that the chosen weight, size or wording is easy to read.
WCAG’s text-spacing criterion is often misread as a mandatory default style. Its requirement is adaptability: relevant text must tolerate specified spacing overrides without loss of content or function. That includes line height of 1.5 times the font size, paragraph spacing of 2 times, letter spacing of 0.12 times and word spacing of 0.16 times, with exceptions for properties not applicable to a language or script.
Reflow matters for similar reasons. Ordinary vertically scrolling content should work at a width equivalent to 320 CSS pixels without requiring horizontal scrolling to read the lines, subject to the criterion’s exceptions. A narrow-window check is useful, but it does not replace testing text enlargement and actual zoom behavior.
Keep meaningful text as text. A paragraph drawn into an image cannot wrap or respond to a reader’s font settings in the same way. Our visual studies below and above use native text for the specimens, so the content remains selectable and the browser can shape the script. An illustration may support an explanation; it should not become the only accessible copy of it.
A font arriving late can change the layout.
The page has to work before a web font finishes downloading. The fallback may have different character widths, ascenders and line metrics, so replacing it can rewrap headings and move surrounding content. This is why font delivery belongs in the design review rather than being left as an invisible implementation detail.
The font-display descriptor controls the font display timeline. With swap, text can appear in a fallback and later change to the web font. That supports early text visibility, but does not eliminate layout shift. Optional permits the browser to keep the fallback in some circumstances. The useful choice depends on how important the custom face is and how much change the experience can tolerate.
Choose a sensible fallback and compare its metrics with the final face. CSS font metric overrides and size-adjust can help reduce mismatch, but they need values measured for the actual pair. Do not paste arbitrary adjustments from another project. The comparison below deliberately uses two installed font categories to illustrate rewrapping; it does not download a font or report a real layout-shift metric.
Limit the delivered families and styles to what the page uses. WOFF2, appropriate subsetting and careful discovery can reduce unnecessary transfer, but a subset must retain the characters required by the languages you support. Preload only critical resources you know the page needs; preloading every weight can compete with other important downloads.
Different metrics can change wrapping before any other setting changes.
A useful system is small enough to explain.
Build one specimen page from the project’s real content: a long title, several paragraphs, a link, a caption, a button, an error message, a price and every supported script. It should contain the awkward cases as well as the beautiful ones. That gives design and development the same material to evaluate.
Define a small set of roles with their family, weight, size, line height and measure. Document where a role changes across screen sizes and where it must stay stable. Prefer named decisions such as body, caption and display over a growing list of almost-identical values with no purpose attached.
Then read the page. Read several paragraphs without skipping. Scan the practical information. Change the width. Turn the theme. Try larger text. Watch a cold load. If the hierarchy disappears or the layout breaks, repair the relationship rather than adding another exception to one sentence.
The goal is not to make every project share the same typographic personality. It is to make each project’s personality survive real content and real reading conditions. A good type system leaves room for expression because the ordinary work of reading has already been considered.