vocab.design

typography

Typographic color

also called type color, grey value, gray value, page texture

The overall lightness or darkness a block of text produces when you stop reading it and look at it as a grey texture.

Nothing to do with hue. The word arrives from the printing trades, where a compositor stepped back from a forme of set type and judged how dark it looked as a patch of ink on paper, and it has stayed in the vocabulary because the judgment is still the useful one. Typographic color is a paragraph’s grey value: the average darkness of the texture the letters make once you stop reading the words. It is not semantic color, which is about what a hue means in an interface. The two words collide badly in a design system conversation, so it is worth saying which one you mean out loud.

You judge it by squinting, or by defocusing your eyes, or by looking at the block upside down. All three do the same thing: they take the words away and leave the texture, which is the only way to see the thing you are actually deciding. Four settings determine it, and they trade against each other. Weight and stroke contrast set how much ink each letter puts down. Tracking sets how much white sits between letters. Leading sets how much white sits between lines. Size shifts the whole balance, because a face at 9 pixels is proportionally much darker than the same face at 24. Tighten the tracking and drop the leading and the same words go several shades darker.

Even color is the goal, and unevenness is a symptom worth reading rather than a defect to sand off. A patch that goes pale usually means the rag has opened up a hole, or that justification has stretched the word spaces on one line past what the measure can absorb. A pale channel running down through several lines is a river, which is the same problem organised vertically. A block that goes suddenly dark is usually a run of capitals, a bold phrase, or an acronym; a block that goes light is usually a long stretch of lowercase with no ascenders to speak of.

The practical use is in comparison, not in absolutes. Set the same paragraph twice and look at the two blocks side by side: the greyer one is the lighter read, and if one is noticeably darker it will pull the eye on the page whether or not you meant it to. That is how a heading is chosen to sit against body text, how a sidebar is kept from shouting, and how vertical rhythm work stays honest, since a grid that lines up perfectly but alternates dark and pale bands still reads as broken. Legibility is about resolving letters; color is about what the block looks like from across the room. A page can pass one and fail the other.

Which word?

If you wantsay
judging a paragraph as texture rather than wordstypographic color
judging the setting, not the typefacereadability
naming the white streak running down a paragraphriver

Related

See also: Whitespace · Font weight

Sources