The grey of a paragraph

A block of text is a texture

Blur a well-set paragraph and it becomes an even field of grey. Blur a badly set one and you see patches: dark clots where something is bold or cramped, pale holes where spacing has opened up, and channels running down where word spaces have aligned.

That overall greyness is called typographic colour, and the word colour here has nothing to do with hue. It is the density of ink per unit of area, and it is produced by four things together: the weight of the strokes, the size, the letter and word spacing, and the line height.

Even colour is the mark of competent setting. It is also easy to check and easy to fix, which makes it one of the highest-return habits in this course.

How to check it

Three methods, all free and all taking seconds:

1. Blur. Export the block and apply a Gaussian blur of about 3 to 4 pixels at body size. Even grey is good.
2. Turn it upside down. Rotate the page 180 degrees. You can no longer read it, so you stop attending to the words and start seeing the texture. Any editor does this in one command.
3. Squint at it from two metres. The cheapest, and surprisingly reliable.

What you are looking for is uniformity. Not lightness — a dense, dark paragraph can have perfectly even colour — but the absence of patches.

The five things that ruin it

Rivers, from the justification lesson. Vertical pale channels. Fix by un-justifying, widening the measure, or enabling hyphenation.

A bold word mid-paragraph. Bold creates a dark clot visible from across the room, which is exactly what it is for when a scanner is hunting for a term, and exactly wrong when you only meant to stress a word in a sentence. Use italic for stress.

Acronyms in capitals. A paragraph containing NHS, HTML and PDF has three dark blocks in it, because capitals are taller and denser than lowercase. The traditional fix is small capitals, which have the same weight as the lowercase around them:

abbr { font-variant-caps: all-small-caps; letter-spacing: 0.03em; }

Where the font has no real small caps, setting acronyms about 8 to 10 per cent smaller than the body gets most of the benefit.

Links in a bright colour. A paragraph with six blue links has six attention-grabbing marks in it and reads as a list of links with some connective text. This is a real trade-off rather than a rule — the links have to be findable — and the usual resolution is a link colour close in lightness to the body text, distinguished by hue and underline rather than by being much darker or lighter.

Line height that is too tight or too loose. Too tight and the lines merge into a dark mass; too loose and the lines stop being a paragraph and become separate objects. The 1.4 to 1.6 range for body text on screen exists because that is where the horizontal band of a line is clearly separate from its neighbours without floating free.

Paragraph separation: indent or space, never both

A new paragraph is signalled either by a first-line indent or by a space between paragraphs. Both together is redundant, and it is the most common setting in documents made by people who have not thought about it.

• Indent is the book convention. It costs no vertical space, which is why books use it. The first paragraph after a heading is not indented, because there is nothing before it to separate from.
• Space is the screen convention. It suits short paragraphs and scanning.

One or the other. If you use space, a full blank line is usually too much: something like 0.75 of the line height reads as a separation without breaking the block apart.

Measure, size and colour interact

A setting is not a list of independent decisions. Increase the measure and you need more line height, because the return sweep has further to travel. Increase the line height and the block gets lighter, so it may need a slightly heavier weight to hold its own against a photograph beside it. Reduce the size and you need slightly more letter spacing.

This is why copying a set of numbers from an article does not work reliably: the numbers were a solution to somebody's combination of typeface, size, measure and medium. What transfers is the method — set it, blur it, look at the texture, adjust the thing that is causing the patch.

Colour in the other sense

One genuine overlap with hue: grey body text. Setting text at 60% grey instead of near-black lightens the typographic colour and is a common way to make a page feel calmer. It is also the single most common cause of failing contrast requirements, covered in the next block. If you lighten text for texture, check the ratio afterwards, because the texture argument and the legibility requirement pull in opposite directions and only one of them is measurable.