The perception of black & white and the effect of contrast

My colleague Yves has already covered pretty much most of the aspects of whitespace between words and letters in the ongoing series Adventures in Space. Meanwhile this text should be seen as an emphasis on the perception of contrast in general. In the following, let us use ‘black’ as a term for stroke elements and ‘whitespace’ or – for that matter – ‘white’ for the shapes enclosed within the strokes or around them. The core idea of this perception, that black and white are equal partners, got lost a bit in the transition to digital interfaces. The blank paper problem is evident in HTML as well as in page maker software: When I begin to design a page, I start off with a lot of white space to which black is then added in a second step. In the letterpress days, however, the starting point was more or less ‘nothing’ (actually a big metal surface). Black and white are equally added—a different thinking process.

Reading black and white

“The relation between shape and countershape, which in writing amounts to the relation between white and black, is the foundation of perception.”¹ These are the words that Gerrit Noordzij used. In the first chapter of his best-seller The stroke (London, 2005) he explains a theory of his own. He uses a number of simple sketches to explain this relationship. First line: If you change the black in any of the letters, alternations will be the consequence in the counterforms. Second line: Equipped with rectangles the relation changes. In the third rectangle, the exterior space gains significance as opposed to the first one, where the counter draws most of the perceptual attention.

While the white space between the characters of the first and second line in the next sketch is equal, our perception of the white in the second line seems to create a gap between them. The reduction of the space solves this problem in the third line.

Experiencing black and white

‘Moving black squares’ on a light background is known as one of the earliest basic design exercises to reveal this relationship. I don’t want to use the Bauhaus school as an explicit example, but if you look into Johannes Itten’s Design and form (London, 1975) you will find very similar exercises.² I was taught this practice in my first fundamentals course and have continued to include it in my own teaching of different typography classes—usually as the first exercise before anything else: sets of squares are used to visually interpret adjectives such as light, heavy, slow, fast, easy, complex, etc. They can be set in grids or wildly across the given space. To create confusion, I make a point of using white squares on a dark background. The exercise schools an awareness and forms a new perception of the power black and white equally possess.

Designing black and white

In an interview Erik Spiekermann once revealed: “You don’t actually design the black, you design the white: the space inside it and the space around it.”³ This statement becomes apparent in Spiekermann’s design of the typeface FF Meta®. If you look at the letters closely, you will notice a certain tension between smooth and slightly squared-off counters, with the goal to increase clarity and legibility.⁴ The bold weight is 15% heavier and is also given enough definition in the inner shapes to withstand use in smaller sizes.

Hermann Zapf applied the opposite idea to his newspaper typeface Melior® (D. Stempel/Linotype, 1952) and later re-introduced the concept in the first digital typeface Marconi® (Hell, 1974). While the inner shapes are smooth, the outlines are based on the concept of the super-ellipse, a shape mathematically sitting between a circle and a square. The idea of tension between form and counter-form was taken to extremes in the typeface FF District™ with geometrically square counters. Not to forget Roger Excoffon, who literally turned all that was known about contrast in letterforms upside-down and designed Antique Olive™ (Fonderie Olive, 1962), a reversed style also known as ‘top-heavy’.

Using contrast

All of these observations can be taken into account when you choose a certain text weight for a designed page. The eye prefers good contrast. Some designers speak of “a nice grey tone underlying the page,” but really that’s not what you want. When you achieve ‘grey,’ it means the weight you are using for the main body text is too light. Besides the regular font in a typeface, most designers provide a weight marked as ‘book’, but they may also carry a different name to stand out. These weights are usually slightly bolder than the regular with the right relation between black and white to set text in a crisp contrast. Mike Abbink’s FF Milo® Regular for example has a sister weight called Text which is slightly higher in contrast and therefore looks sharper. The better text weight of Lukasz Dziedzic’s FF Good® is known as News. Fred Smeijers’ famous text face Arnhem (OurType, 2002) is already contrasted quite well. Instead, Smeijers designed a slightly lighter companion with the name Arnhem Blond.

A typeface with several styles of the same regular weight for different purposes is FF Transit®. When FF Transit was conceived out of Adrian Frutiger’s Frutiger® Condensed by Lucas de Groot at MetaDesign in the early nineties for the Berlin transit authorities BVG, multiple adjustments became necessary for various applications. Besides a proper regular weight for print jobs, FF Transit includes positive and negative styles for back-lit signs as well as positive and negative signs that are illuminated from the front. When letters are back-lit, white type on a black background (FF Transit Back Negative), they glow and their stroke widths seem to increase; thus, the weight should be lighter. It is the other way around, black letters on a lit background—that’s when you need FF Transit Back Positive.

This approach may seem extravagant, but it is an example that demonstrates: A regular is not necessarily a regular as we know it—always watch out for the context in which a typeface can be used.

Footnotes

<sub>1. Gerrit Noordzij: The stroke. Theory of writing, London 2005, p. 15
2. Check out Johannes Itten: Design and Form. The basic course at the Bauhaus, London 1975
3. Stated by Spiekermann on Design Within Reach dwr.com
4. Erik Spiekermann: Post Mortem. Or: How I once designed a typeface for Europe’s biggest company, London 1985, p. 7</sub>

_{Trademark attribution notice
FF, FontFont, Meta, Milo, Good and Transit are trademarks of Monotype GmbH registered in the U.S. Patent and Trademark Office and may be registered in certain other jurisdictions. District is a trademark of Monotype GmbH and may be registered in certain jurisdictions. Frutiger, Marconi and Melior are trademarks of Monotype Imaging Inc. registered in the U.S. Patent and Trademark Office and may be registered in certain other jurisdictions. Antique Olive is a trademark of Madame Marcel Olive. All other trademarks and copyrights are the property of their respective owners.}