Hierarchy With One Typeface
Six moves, an order to apply them in, and the observation that only three of the six are preattentive. Reaching for a second typeface usually means the first five were not used.
Date
Category
Writer
In 1991 the School of Visual Arts hung an exhibition of Massimo Vignelli's work called A Few Basic Typefaces. Vignelli later described what was on the walls: "The exhibition showed work that we had done over many years by using only four typefaces: Garamond, Bodoni, Century Expanded, and Helvetica. The aim of the exhibition was to show that a large variety of printed matter could be done with an economy of type with great results." Four faces, decades of output, and the four are not even a system: a garalde, a didone, a Scotch-derived text face and a grotesque. He was not arguing that those four were the correct four. He was arguing that the number was small.
The number most working designers actually need on a given page is one. Not because one is virtuous, but because a single typeface still leaves you six independent controls, and most pages that look flat are pages where two or three of the six were never touched.
The six moves
Hierarchy is the reader's ability to tell, before reading, which piece of text is which. It is a perceptual claim, not an aesthetic one, so it is worth checking against perception research rather than against taste.
Christopher Healey, at North Carolina State University, maintains a long-running survey of preattentive processing in visualisation. His working definition: "Tasks that can be performed on large multi-element displays in less than 200 to 250 milliseconds are considered preattentive." The features his table lists as detected that fast include size, intensity and luminance, colour hue, line orientation, curvature, closure, and density and contrast. The research lineage he cites runs through Treisman and Gelade's feature integration theory (1980), Julész on textons (1971, 1981) and Wolfe's guided search (1989, 1994).
Line that list up against the moves a typographer has when locked to one family, and something useful falls out. Size is on the list. Intensity and luminance are on the list, and weight is read by the eye as exactly that: a change in the density of dark marks per unit area. Hue is on the list. Case is not on the list. Neither is letterform shape. Spatial position is not itemised as a separate feature in Healey's table either, though grouping and density are.
So of the six moves available, three of them (size, weight, colour) act on channels the low-level visual system reads in a quarter of a second, before the reader has decided to read anything. Two of them (space, position) work by grouping and by the geometry of the scan path. One of them (case) does not work preattentively at all. It works because the reader already knows the convention.
That ordering matters, because it tells you which moves survive being seen at arm's length, at a glance, on a phone held at the wrong angle, and which do not.
Move | What it buys | What it costs | Where it fails |
|---|---|---|---|
Size | The strongest and most immediately legible signal; works at any distance | Vertical space, and it compounds: every step up pushes everything down | Runs out fast. Beyond about three steps the largest item is a graphic, not text, and small items fall below comfortable reading size |
Weight | Contrast without any change in footprint; the line keeps its length | Font payload, and the risk that the light end of the family renders fainter than specified | Two adjacent weights in a family are often indistinguishable at text size; and W3C notes that thin or unusual fonts may be rendered "with a much fainter color than the actual text color defined in the underlying CSS" |
Space | Separation with zero change to the type itself; the most reversible move | Page length, and therefore scroll and print cost | Fails when the container is crowded or when space above and below an item is equal, which reads as no relationship at all |
Case | A conventional signal readers decode instantly in labels and eyebrows | Reading comfort in any run longer than a few words; needs tracking added by hand | Not preattentive. Works only where readers already expect it, and collapses entirely in a language without a bicameral alphabet |
Colour | A channel that is fully independent of size, weight and position | Accessibility obligations and printing cost | WCAG 1.4.1 forbids colour as the only visual means of conveying information; and hue differences do not survive monochrome displays or several kinds of colour vision deficiency |
Position | Uses the reader's existing scan path rather than fighting it | Horizontal room, which phones do not have | Fails in narrow columns, where indent and hang have nowhere to go, and fails whenever the layout is centred |
An order to apply them in
The order is not arbitrary. It follows from cost. Apply the cheapest move that does the job, check, and only then spend.
Step six is the one designers habitually promote to step one, and it is the one with the clearest external constraint. WCAG 2.2 Success Criterion 1.4.1 states that "Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element." The W3C technique G183 spells out what that means for the most common case, a coloured link inside a paragraph: "the contrast ratio between the link text and the static text must be at least 3:1", and even then the technique warns that "it can be difficult to visually distinguish between differently colored text even when the link text contrast to surrounding text meets the required ratio of 3:1", recommending an underline or bold as well. Colour is a real move. It is just never a sufficient one.
Space is the only move on the list that costs nothing but paper. Everything else spends a resource you will want back later.
A worked example
Take the page I set most often: a long article with eight distinct levels of information. Section label, headline, standfirst, byline and date, body text, subheads, a pull quote, and source notes at the foot. One family, four optical weights available, one accent colour.
Three things in that spec are deliberate and worth defending.
The subhead is the same size as the body
It is set in Bold, it has thirty-six pixels of space above and eight below, and it is otherwise identical to the paragraph it introduces. Two moves, both cheap, and the level is unambiguous. Making it larger would have been a third move spent on a distinction already made, and it would have pushed the sizes above it further apart to keep the steps legible.
The weight step skips a grade
Most extended families offer Regular, Medium, Semibold and Bold. Regular to Medium at seventeen pixels is not a hierarchy, it is a rendering difference. The W3C's own guidance on contrast notes the problem from the other direction: "Due to anti-aliasing, particularly thin or unusual fonts may be rendered by user agents with a much fainter color than the actual text color defined in the underlying CSS." Weight is not a continuous control in practice. It is a set of discrete, device-dependent steps, and the small ones vanish.
There is a production cost too. Each extra weight is another file. The web.dev guide to variable fonts, by Dave Crossland, Mustafa Kurtuldu, Roel Nieskens and Thomas Steiner, cites a Monotype experiment in which "storing 48 individual fonts in a single variable font file meant a 88% reduction in file size", but also warns that "if you are using a single font such as Roboto Regular and nothing else, you might not see a net gain in font size if you were to switch to a variable font with many axes". Three weights is a real decision about bytes, not a free stylistic one.
The section label is the only uppercase
Case is the move I trust least, and it is the one design writing over-claims about most confidently. Kara Pernice's eye-tracking work at Nielsen Norman Group, published in November 2017, is a useful check on what we actually know about scanning: across studies including one in which forty-seven people tried to learn about Sumatran tigers, the finding was that "many fixations concentrated at the top and the left side of the page", and that the "first few words on the left of each line of text receive more fixations than subsequent words on the same line". Her practical instruction is about position and wording, not about case: "Start headings and subheadings with the words carrying most information: if users see only the first 2 words, they should still get the gist of the following section."
What the legibility literature will and will not support
Here is a correction I owe. For years I repeated the claim that all-capital setting is measurably slower to read, and attributed it to the Tinker and Paterson experiments of the 1920s and 1930s, which are the studies almost everyone points at when a percentage is wanted.
Mary Dyson examined those methods in Design Regression in November 2023 and the picture is less tidy than the citations suggest. On the line-length work, she notes that "each pair (standard and test line length) was tested on a different group of 80 university students adding up to a total of 560 participants, across 7 comparisons", and that the design was confounded: "Material set in each pair of line lengths was read by a different group of participants who always read Form B after Form A and the test line length always followed the standard. This means that the content of each form is confounded with line length." She also observes that Tinker and Paterson had used proper counterbalancing in 1928 and then abandoned it, and that "the statistics are not reported in the detail that is now required in psychology journal articles."
That is a critique of the line-length studies specifically, not of every finding in the corpus, and I have not been able to locate a modern replication that settles the all-caps question with the precision the popular figures imply. So the honest position is narrower than the one I used to hold: uppercase is a convention with a known cost in reading comfort over long runs, it needs tracking added because the faces were not spaced for it, and it is not a preattentive signal. Those three reasons are enough to restrict it to labels. A percentage is not available.
Why the second typeface is usually an admission
A second family is a seventh move. It is also, unlike the other six, not independent of them: a different face changes apparent size, apparent weight and apparent colour all at once, which is why pairing is hard and why pairing guides read like superstition. You are not adding a control. You are adding a coupling.
The question I ask before adding one is simple. Of the six moves, how many are currently doing work on this page? If the answer is two, the page does not have a typeface problem. It has three unspent moves.
Butterick's Practical Typography puts the same discipline on a smaller scale, for emphasis inside running text: "Bold or italic, think of them as mutually exclusive", and "use bold and italic as little as possible. They are tools for emphasis." The principle generalises. Two signals for one distinction is not twice as clear. It is a designer hedging.
There are genuine reasons to reach for a second family, and they are structural rather than decorative. A text face that has no usable small sizes for interface labels. A display face with no italic. A script that the primary family does not cover at all, which is the ordinary condition of any bilingual Korean and Latin setting, where the Latin companion to a Hangul family is a separate design decision with its own metrics. Those are cases where the first typeface cannot physically do the job.
What is not a reason: the page looks boring. A page that looks boring with one typeface will look boring with two, because boring is almost always a spacing failure, and spacing is move number one, the cheapest thing on the list, the one that costs nothing but paper.
Vignelli's four faces were not a limit he suffered. They were a limit he chose, because the interesting decisions were elsewhere. In The Vignelli Canon he extended the list a little, allowing that he could work with "a half a dozen, to which I can add another half a dozen, but probably no more." Twelve typefaces, for a career. Most briefs need one.
Sources
Fonts In Use, "Massimo Vignelli's A Few Basic Typefaces", entry on the 1991 School of Visual Arts exhibition, including Vignelli's own description of the four typefaces used and his later remarks in The Vignelli Canon. fontsinuse.com/uses/14164/massimo-vignelli-s-a-few-basic-typefaces
Christopher G. Healey, "Perception in Visualization", Department of Computer Science, North Carolina State University. Definition of preattentive processing, the 200 to 250 millisecond threshold, and the table of preattentive visual features, citing Treisman and Gelade (1980), Julész (1971, 1981) and Wolfe (1989, 1994). csc2.ncsu.edu/faculty/healey/PP/
W3C Web Accessibility Initiative, "Understanding Success Criterion 1.4.1: Use of Color", Understanding WCAG 2.2. Text of the criterion and its intent. w3.org/WAI/WCAG22/Understanding/use-of-color.html
W3C Web Accessibility Initiative, "G183: Using a contrast ratio of at least 3:1 to distinguish inline text links from surrounding text", Techniques for WCAG 2.2. w3.org/WAI/WCAG22/Techniques/general/G183
W3C Web Accessibility Initiative, "Understanding Success Criterion 1.4.3: Contrast (Minimum)", Understanding WCAG 2.2. Source of the note on anti-aliasing and thin or unusual fonts. w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
Kara Pernice, "F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile)", Nielsen Norman Group, 12 November 2017. Eye-tracking findings on fixation distribution and the instruction to front-load headings. nngroup.com/articles/f-shaped-pattern-reading-web-content/
Dave Crossland, Mustafa Kurtuldu, Roel Nieskens and Thomas Steiner, "Variable fonts", web.dev, last updated 19 February 2018. Monotype file-size experiment and the caveat about single-style use. web.dev/articles/variable-fonts
Mary Dyson, "Examining the research methods used by legibility legends Tinker and Paterson", Design Regression, 17 November 2023. Methodological critique of the Tinker and Paterson line-length experiments. designregression.com/article/examining-the-research-methods-used-by-legibility-legends-tinker-and-paterson
Matthew Butterick, "Bold or italic", Butterick's Practical Typography. practicaltypography.com/bold-or-italic.html
Related reading
Latest Articles.
© Moc Mallen Studio
Thoughts, ideas, and perspectives on design, simplicity, and creative process.
