Web Typography: Making Text Do the Work

Type Is the Interface

On a content site, ninety per cent of what a visitor looks at is words. The typeface, the sizes, the spacing and the line lengths are not finishing touches on the design — they are the design, and they determine whether reading feels effortless or like work.

This is also why typography is the cheapest quality upgrade available. You do not need new photography or a new layout to make a page feel considered. You need a coherent set of type decisions applied consistently.

Choosing a Typeface for the Job

Mood boards produce typefaces that look right in a headline and fall apart at fourteen pixels in a paragraph. Choose for the work the type actually has to do: long-form reading, dense interface labels, numeric tables, or a single large statement.

Check the practical things before the aesthetic ones. Does it have the weights you need, or will you end up faking a bold? Are the numerals well designed, and does it offer tabular figures for anything in a column? Do the ambiguous characters — capital I, lowercase l, the digit one, zero and capital O — stay distinguishable at body size? For Turkish, verify the dotted and dotless i, the ğ, ş, ç, ö and ü, and check that they are drawn rather than mechanically assembled, because badly made diacritics read as cheapness on every page.

One Family Is Usually Enough

A single well-built family with a range of weights will carry an entire site. Two families can work when they have clearly separated jobs — one for headings, one for text — but three is almost always a sign that nobody made a decision. Pairing is harder than it looks and the failure mode is a site that feels vaguely uncoordinated without any single obvious error.

A Type Scale Instead of Arbitrary Sizes

Sites accumulate sizes. Somebody needs a heading slightly smaller than the h2, so they type 26. Six months later there are eleven sizes in use and no relationship between any of them, and the page reads as noisy without anyone knowing why.

Define a scale — a small set of sizes with a consistent ratio between steps — and treat it as fixed. Five or six sizes is enough for almost any marketing site. The constraint is what produces the sense of order that people read as professionalism.

Hierarchy With Fewer Styles

Hierarchy does not require more sizes; it requires more contrast between the ones you have. Weight, colour, spacing and position all separate levels as effectively as size, and usually more elegantly. A heading that is bolder and has more space above it does not also need to be twice the body size.

Measure, Line Height and the Comfort of Reading

Line length is the setting most often ignored and most felt. Somewhere around sixty to seventy-five characters is comfortable for continuous reading; much longer and the eye loses the return to the next line, much shorter and the rhythm breaks. On a wide screen this means constraining the text column even though space is available.

Line height works with it. Longer lines need more leading; short lines and large headings need less. A single global value applied to everything will be wrong at both ends of your scale, which is why line height belongs to each step of the scale rather than to the page.

Spacing Belongs to the Relationship

Space above a heading should be noticeably larger than the space below it, because the heading belongs to the text that follows. Getting this backwards is one of the most common typographic errors on the web and it makes a page feel subtly disorganised, since every heading appears to float between two blocks rather than introducing one.

Loading Without the Flash

Custom fonts arrive after the page does, and what happens in between is a design decision you should make deliberately. Showing nothing until the font loads risks a blank page on a slow connection; swapping from a fallback causes a visible reflow that is jarring and can move content under someone’s finger.

Subset the files to the characters you actually use, keeping the Turkish characters in the subset, serve modern formats, preload the one or two faces that appear above the fold, and choose a fallback whose metrics are close enough that the swap barely moves anything. Every additional weight is another file, which is a direct cost against the metrics in our Core Web Vitals guide.

Colour, Contrast and Reading in the Dark

Light grey body text on white is the most common accessibility failure on modern sites, and it is entirely self-inflicted. Contrast is not a stylistic preference; there are thresholds, and text below them is unreadable for a meaningful share of your audience.

Test the real combinations rather than the swatches, including text over images and over your brand colour. If you offer a dark theme, remember that pure white on pure black is uncomfortable and that type often needs slightly lighter weights in dark mode to look the same. These decisions sit alongside the ones in our guide to colour in web design.

The Details That Separate Professional From Amateur

Use real typographic characters: curly quotation marks and apostrophes, proper dashes, and a genuine ellipsis rather than three full stops. These are invisible when right and cheap-looking when wrong, and most content management systems will do them for you if you let them.

Then tidy the rag. Avoid a single word alone on the last line of a paragraph, avoid a heading that breaks after one word, and use a non-breaking space to keep numbers with their units. This is fifteen minutes of work on the pages that matter and it is the clearest visible difference between a site somebody cared about and one that was merely assembled.

Turkish Text Is Longer

Turkish translations of English copy typically run longer and use longer individual words, so a headline that fits neatly in English will wrap awkwardly or overflow its container. Design the components to tolerate that rather than tuning them to the shortest language, and always review the Turkish pages at real breakpoints rather than assuming the English layout transfers.

Making It Hold Over Time

Typography decays faster than any other part of a design because every new page is an opportunity to introduce a new size. The defence is putting the scale into text styles in the CMS so editors apply a named style rather than a number, which is the same discipline described in our guide to design systems.

Review it once a year: list every size and weight actually in use across the site and delete the ones that crept in. If you want the scale defined properly and enforced in the build, our UI/UX team treats type as the first system decision rather than a late one, and our design work starts from how the words will read.