Typography, from the ground up

Typography is arranging text, not picking a font

The first thing to put aside is the idea that the job is finished once you have found a good typeface. Typography is the set of decisions taken after the typeface is chosen, and in practice there are four of them: size, weight, spacing and line length.

The easiest way to see this is an experiment. Take a page you like and swap its typeface for an ordinary system font. The page still works. Now do the reverse: keep the typeface, make every size identical and strip out the spacing. The page falls apart. What was holding it together was never the typeface.

Our position, after years of Persian site work, is blunter still: on most projects the list of usable typefaces is so short that the choice makes itself. For Persian on the web, the number of families that have a web licence, enough weights, and correct Persian numerals is not large enough to deserve a week of anyone time. That week belongs to the other four decisions.

One thing this lesson deliberately leaves out, because it has a lesson of its own: everything specific to the Persian script, from letter joining to the half-space and the numerals. That argument is opened in Persian typography, and without it this lesson is not complete for a Persian site.

What makes a typeface legible?

Legibility is not taste, it is a handful of measurable properties. The most important is x-height: the height of a lowercase letter without an extension, relative to the full letter height. Typefaces with a taller x-height read better at small sizes, which is why two faces set at the identical size can look nothing alike.

Three more worth knowing: ascenders and descenders, the parts of a letter that leave the baseline and that decide how open your line spacing must be; the counter, the enclosed space inside a letter, which fills in at small sizes if it is tight and makes the letter unreadable; and stroke contrast, the difference between thick and thin strokes, where more contrast means a better display face and a worse one for long text.

And a practical test that discards bad typefaces in twenty seconds: write the lookalike characters next to each other. In Latin, capital I, lowercase l and the digit one. If all three are a plain vertical stroke, that typeface is bad for an interface, because your user has to read a tracking code and a password in it.

In Persian the same test takes a different form and is stricter still: the dots. What separates beh, peh, teh and theh is nothing but dots, and in decorative typefaces those dots either shrink or fuse into the body of the letter. A page of headlines set that way is fine; a signup form set that way sells the client a support desk.

How do you build a size scale?

A scale is a short list of permitted sizes, and its rule is simple: every size in the design must be on that list. If a page contains eight different sizes, that page has no scale and each of the eight was decided separately.

The simplest way to build one is this: start from the body text size and derive the rest with a constant ratio. A smaller ratio gives a calmer scale suited to long text; a larger one makes headlines fuller and suits sales pages. The exact ratio does not matter much. That it stays constant does.

The numbers from the site you are reading, so you have seen a real one: the root is 16px, body text is 1.0625rem, about seventeen pixels, and small text such as breadcrumbs and figure notes is 0.85rem. The headings are all written with clamp(): h3 between 1.15 and 1.4rem, h2 between 1.5 and 2.2rem, and h1 between 2 and 3.3rem. The smallest number on a phone, the largest on a big display, with no breakpoint anywhere.

That clamp() is the most useful practical tool in this section and it replaces three or four media queries. It takes three values: a minimum, a fluid size usually based on viewport width, and a maximum. The common mistake is writing only the fluid part and leaving the minimum off; the result is a heading that shrinks to body size on a narrow phone.

And one rule that matters more than any ratio: reduce the number of sizes. Five sizes are enough for almost any site, and if you feel you need a sixth, the problem is usually not size but spacing.

Line length and line height: the two numbers with the most effect

If you keep only two numbers from this lesson, keep these. A very long line loses the eye on its way back to the start of the next one; a very short line turns reading into a series of jumps. And tight line spacing presses two lines together until the reader unconsciously reads one of them twice.

For line length there is a formal ceiling. WCAG criterion 1.4.8, which is level AAA rather than AA, says the width of a block of text should be no more than eighty characters. The same criterion says two other things that get quoted far less often: text should not be justified to both margins, and line spacing should be at least one and a half.

In CSS you set this with the ch unit rather than pixels, because the measure has to rise and fall with the font size. The numbers on this site: the intro paragraph of every page is 56ch and article bodies are 78ch, which is just under that eighty ceiling.

One point almost nobody writes down, and the one everyone gets wrong the first time: ch is the width of the digit zero in the current font, not the width of a real character. In the typeface this site uses, that zero is 570 units of a 1000-unit em, so 0.57em. So 78ch is a repeatable number but it is not "seventy eight letters", and in Persian, where letter widths vary a great deal, the gap widens further. Treat the number as an adjustable measure, not as a count.

For line spacing, WCAG criterion 1.4.12, which is level AA, says a user must be able to raise line height to at least 1.5 times the font size without losing content. That is a floor, not a recommendation. Body text on this site sits at 1.9, and that choice is for Persian: the script carries many dots and descenders below the baseline, and at spacing that suffices for Latin it looks crowded.

Do you need two typefaces or one?

The honest answer for most sites: one. A single family with several weights nearly always beats two different families, because a weight difference is a designed difference and a family difference is an accidental one.

If you genuinely want two, the rule is that they must differ by category and not by mood. A sans for headings and a serif for body is a difference the eye grasps at once. Two sans faces that differ only slightly are the worst possible case: the reader cannot tell whether the difference means something or is a mistake.

And the cost that usually goes unseen in the decision: every extra family is more files to download. For Persian that cost is heavier, because a Persian typeface carries more glyphs and its file is larger than an equivalent Latin one. A second typeface that appears only in headings can cost as much as several images on a mobile connection.

Weights follow the same logic. Three are usually enough: one for text, one for emphasis inside text, and one for headings. If a design has six weights, three of them probably never catch anyone eye and are only downloaded.

How do you know the hierarchy works?

Hierarchy means the reader can tell what matters most without reading. The test takes ten seconds: squint until the page blurs, or look at it from two metres away. Whatever is still visible in that blur is what lands first in the reader mind. If what you see is not what you intended, the hierarchy is not working, however clean the design looks.

You have four levers for building it: size, weight, spacing and colour. The first three nearly always work better than the fourth, and among those three, spacing is the cheapest and the least used. When something is not prominent enough, everyone first reaction is to make it bigger or darker; usually it is enough to empty the space around it.

Colour is the lever to reach for last. The reason is simple: some of your readers do not see colour the way you do, and if the only signal that an element matters is its colour, then for them that element is no different from the rest. Colour should be the third emphasis, never the only one.

One common mistake, visible in headings more than anywhere else: the space above a heading must be larger than the space below it. A heading equidistant from the paragraph above and the one below belongs to neither, and this one small adjustment raises the structural legibility of a long page more than any other change.