Typographic Color

In typography, "color" refers not to hue, but to the visual density or tone of a block of text — the overall grayness or darkness it creates on the page. A passage of text seen from a distance or slightly blurred reveals this: some text looks light and airy; some looks dark and dense. This visual mass is typographic color.

The concept is easier to perceive than to define. View a text block from arm's length, or squint until individual letters blur, and you see the overall gray value — that's typographic color.

Factors that affect typographic color:

Font weight has the most direct impact. A text set in a light weight (300) appears markedly lighter than the same text in regular (400), which is lighter than medium (500). This is visible at the paragraph level:

/* Lighter typographic color */
.light-text { font-weight: 300; }

/* Darker typographic color */
.dark-text { font-weight: 500; }

Letter-spacing changes color by altering the proportion of white space to ink. Wide tracking lightens typographic color; tight tracking darkens it:

/* Lightened color via tracking */
.airy { letter-spacing: 0.05em; }

/* Denser color via tight tracking */
.dense { letter-spacing: -0.02em; }

Line-height affects the vertical density of multi-line text. Generous line-height creates more white space between lines, lightening the overall tone:

.open { line-height: 1.8; }  /* Lighter, more air */
.tight { line-height: 1.3; } /* Darker, more dense */

Typeface design itself — independently of weight — determines how much ink lands on the page. A geometric sans-serif like Futura (Nunito is the open-source equivalent) with perfectly round letterforms has different color than a humanist sans like Gill Sans with its more irregular strokes. Old-style serifs like EB Garamond create a distinctive warm, medium-dark texture from their stroke variation.

Why it matters:

Typographic color affects readability and perceived quality. Color mismatches between text elements create jarring visual discontinuities — a pull quote in a heavy weight feels like a shout next to light body text. Body copy that's too dark or too light strains the eye over long reading sessions.

Designers evaluate typographic color when approving a typeface for body text — a typeface that looks beautiful in a headline might create an unreadably dark or uncomfortably light page color at 16px. Setting a few paragraphs at actual size and evaluating the overall gray value is a practical test every font choice should pass.

Color consistency across the type scale — ensuring each level of hierarchy feels like part of the same visual system — is one of the distinguishing marks of typographic craft.