Deeper Into Type

Picture for a moment that you are a director of a theater in another place, in another time. Exciting innovations in stage technology are made almost daily and your productions are the most advanced in the world. You use a new lighting system that you can dim and pan live, build movable stage designs for each play, and procure expensive props from out of town. You wow the audience again and again. They respond with wild applause.

You don’t give much thought to casting actors. There are just four of them in town and they only work locally. They are good actors, though, seasoned professionals ready to work with any content. You can require them to arrive shortly before opening night, show them their positions, and walk away as they are picking up their cues. You tell yourself the audience will get over seeing Romeo and Tybalt and Lord Capulet, Macbeth and Hamlet all wearing the same face, speaking in the same voice. There simply is no other choice.

Then a new generation of eager young actors, ready to tour, floods the scene, and theater work starts changing fast. You are quick to learn about casting actors; you are out scouting for fresh faces—ones the competition hasn’t spotted yet; you stage them beautifully, watch them perform. Sometimes they stumble; some of them mumble. But having a variety of actors from which to choose is priceless.

New Faces on Web Typography’s Stage

Hungry for the same diversity of faces to deliver content to its audience, the web design scene is enthralled by a newfound love for type, fueled by the advent of webfonts. In this typographic gold-rush fever, we’ve seen typefaces shine. But fonts soar to the top of trendiness only to soon be labeled overused and then cast aside. We’ve seen showcases and freak shows; illusionists creating shining beauty from next to nothing, their abracadabras written in CSS. It’s wonderful to see web designers get excited about type, learn to love type. I think what web typography needs next is not hotter but deeper love.

Yes, type is sexy—especially in a medium as starved for typographic expression as the web. But it is mistakenly viewed as merely concerned with the so-called visual layer of design. As designers become excited about type choice, big type, sexy type—and web type the competition hasn’t used yet—it is all too easily forgotten that typography’s visual and functional aspects are deeply intertwined.

Leaving aside type design (the actual design of type), typography is designing with type, and two aspects of it are central: selecting type and typesetting it; in effect, casting your actors and directing them in delivering the content. It is worth noting that the term typesetting originally encompassed much more in print typography, where one would be manually perfecting hyphenation and line returns, eliminating widows and orphans, etc.—tasks that in web design are either automated or virtually absent.

There’s an important distinction to be made here between display type (used in a large size and for few words at a time, such as in headings) and type for body text. Display is more glamorous, freer, easier. It has to be legible, but most of all it needs to work visually (read: look good and be appropriate). With body text typography (on which I will focus), surface beauty matters less. This craft is murkier, more complex; its repercussions reach more deeply into the functional layers of design.

As more webfonts have become available that are appropriate for text sizes rather than just for titling, body text is becoming our new focus. Knowledge of typographic design methods (such as grid systems) is spreading. We’re also seeing increased calls for a “typography-out”¹ approach. This phrase describes designing from the body type “outwards,” letting the character of the main typeface “bubble up to whole experiences,”² rather than forcing the type to meet other, predetermined design considerations. Shifting our discourse to these topics has the potential to carry web typography forward, past the point where we’re simply enraptured with new typefaces.

Making It Convincing

Does that typeface look convincing delivering that copy? Look it in the eye. Does it feel appropriate and inviting? Does the texture lend clarity and liveliness and draw you in? Does it feel at home on screen or is it struggling? Even typefaces that look great in print won’t necessarily shine in the still-crude resolution of most screens, where details get lost in the pixel grid, lending antialiased noise instead of graceful finish. Elegantly thin letters turn out too spindly, and if special care has not been taken with the hinting, things can quickly fall apart in Windows-based browsers.

Does the expression of the typeface match the text? The differences between text typefaces are certainly small as they all share the same basic structures, but they’re not negligible—any more than all actors look the same because they all have two arms and two legs. Wouldn’t text spoken loudly by a big bald guy sound quite different when uttered by a petite lady with glasses? Tone, volume, facial expression, and body language of the speaker color and shape the content, and—though the effect is subtle at text sizes on screen—typefaces do the same. Indeed, studies have shown that laypeople rather consistently attribute atmospheres or feelings to typefaces and that congruity between this perceived feeling and the content can make text easier to read and process.³

Besides casting the right actor, making typography effective depends on how you direct that actor to speak.

Every typeface interprets the text, but typeface alone does nothing. […] Type size, length of line, line increment, column depth, position of the text area on the page… all contribute to the total impression it makes.⁴

My father is an actor, and growing up I remember him endlessly reciting his lines in the living room. He would repeat the same sentences over and over and over, with minute or surprising variations in tempo, in air between the phrases, in volume, in intonation and pitch. As he was thinking about the text, he was anchoring it inside himself and finding the point, I think, where it clicked, where it became his, and became true within the overall concept of the play. Only then could he deliver those words in a convincing way for the director to evaluate.

Good actors don’t pretend. The text is true to them when they speak it.

Now when I’m sitting at my desk, designing, say, a book, I imagine I’m in a similar state to that of my father—one that is a strange marriage of playfulness and meticulous attention to detail. For every project, every setting, I look anew at the actual words in my layout, I play with the type; make it slightly bigger, slightly smaller; let it breathe over shorter line lengths or longer ones; use more or less leading, and try to add emphasis through italics or boldface or color or a different font—until the type feels natural and convincing in its role. Like a good actor, good type, selected and set well, does not pretend.

Typefaces As Interfaces

Picture a designer creating a menu for an upscale restaurant famed for its rich and complex culinary creations. Fancy food deserves fancy type, so he picks out an elaborate script typeface, takes a long time setting it beautifully—elegantly subdued in size, and with all manner of extra swashes—and prints it on shimmering stock in metallic ink. It’s stunning. However, in the atmospheric dim lighting of the restaurant, it simply cannot be read—and thus fails at its most basic task, leaving dinner guests frustrated.

Letters aren’t just visual elements, little drawings for us to enjoy. Typefaces are interfaces. They make words visible, convert them to patterns of black and white for us to decode. Here is the actor that lends your text its voice. Let this actor be annoying to listen to, let him stutter or mumble or be difficult to follow, and your audience likely won’t listen—or at least not favorably, no matter how pretty the actor might be if you look at his features up close.

Making It Effortless

So while it matters to get the atmospheric quality right, what’s really crucial is to make the typography work. Ideally, to make it feel effortless: easy and inviting to read.

In a world rife with unsolicited messages, typography must often draw attention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn.⁵

Reading is a fragile task. It requires sustained focus and is easily interrupted. In this context, the goal of typography must be to reduce distraction and irritation as much as possible. That’s not the same intention as making text look beautiful; rather than drawing attention to its own prettiness, text typography should strive to make itself, if not invisible, at least inconspicuous.

The harder text is to read, the more effort is asked of readers. This will cause some to simply abandon the piece; and for those who do continue, their impression of the content may be negatively affected. In a study fiercely criticized on the type scene for its lack of typographic sensitivity, Hyunjin Song and Norbert Schwarz nevertheless made a finding that I think is fascinating and fundamentally relevant for anyone who communicates with type. They found that the exact same content (a set of instructions) was perceived as more demanding and less attractive when presented in a typographic setting that was harder to read.⁶ This implies that if you want to make something seem easy and accessible, make it easy to read—not just on the semantic level of the text but also on the formal level of typography.

When working, it’s difficult to precisely evaluate how readable your text is. The act of reading is not a fully conscious task; typography is really only noticed if it’s not ideal, if it gets in the way of the reading experience. And even then, readers will likely not be able to pinpoint what irritates them. Even if they comment on the content or the language, it’s quite possible that their irritation has originally sprung from a badly spaced typeface whose letters stumble into each other, or by the type being too small or too fuzzy or the lines too long or too tight, or even from an annoying blinking element way across the page that keeps tugging on the eye and the attention.

Powers of Observation

There is no recipe for making text effortless to read. But some guidelines and conventions are risky to break. Regularity of texture is important: gaps and clogging distract. Exaggerated monotony hurts too: lettershapes need to be clearly distinct from one another. A not-too-long line is helpful: a sixty to seventy character limit is a good rule of thumb. Sufficient (but not excessive) line spacing helps avoid errant line returns. Longer lines need more line spacing. Intuitive visual hierarchy clarifies the structure of the text. Decide just how active the emphasis needs to be: subtler emphasis is less visible from a distance but also less jarring to the reader up close.

Learn from experiences made in the old craft of print typography, and learn to see why they might be relevant. But also question if you might need to deviate from some of them. Web designers will have a different perspective on some problems than will their print colleagues.

Don’t just read about typography; explore it. Really look at books, at dictionaries, newspapers, magazines; observe how their formal vocabulary works. Maybe you’ll spot devices that seem promising for web layouts too. For example, many books use first-line indents instead of vertical spacing between paragraphs. Book design has its conventions but they aren’t set in stone; each book designer has his own sensibilities, constraints, and reasons. Some of these guidelines have been carried over to the web; some have been abandoned. How much thought was put into those decisions? Examine conventions in print design, and question usual practices on the web. Understand them fully, then try to adopt, adapt, or transform what promises to be useful. By all means play.

Stay honest. It’s better to respect constraints than feign typographic sophistication. Observe the subtle but crucial difference between the appearance of fake and real small caps. Fake small caps are actually spaced caps set at a smaller size. Type snobbery is one reason to reject them; a better reason is seeing that they don’t speak loudly enough. They look as if someone counterintuitively picked a smaller font size (which of course is exactly what happened). On a low-resolution screen the effect may not be as jarring as it is on paper, but it still doesn’t really work.

Focus on your own medium, the rules and conventions it needs. And all fascination with the new typographic web aside—don’t be blinded by excitement. The point can be made that the advent of webfonts has actually made some things worse in web typography; the biggest elephants in the reading room are the rendering differences between platforms and browsers. The web has gained a lot of pretty text, but also more dysfunctional text settings. We’ve all seen spindly, poorly hinted letters that fall apart on XP or fat letters that inflate beyond readability on the Mac. Type that’s set too small or lines that get too long. Incomplete character sets that let unusual diacritics default to a fallback font, causing the line to hiccup. These things do matter. They do hurt.

The Elbow Grease of Ants

If we accept that, as Oliver Reichenstein wrote, design for the web as a text-based medium is “95% typography,” let’s not just discuss OpenType feature support, CSS drop shadows, or even which implementation of grid layouts to use. Let’s instead take a closer look. What good typography requires is sensitivity and respect for the inglorious and invisible craft of making text work.

For far too long, many of us… have been guilty of focusing on decoration: the colours and the shapes and the textures. […] I’m talking about stripping away all the cruft and getting back to good, solid design principles, like well-formed grids and decent measures and incremental leading and appropriately paired typefaces. As the web is content and content is type, it’s no surprise that at the heart of this approach is typography.¹

The challenge then is this: Really dive into the micro-world of type. Learn to see; develop an eye for type, one that you trust. Force yourself to slow down. The web may be a fast medium, but reading is slow, and so is crafting text that is meant to be read. It takes time, and curiosity, and the patience to really stop and sniff the serifs, to precisely observe what changes with each decision. If design, understood as craft, generally requires elbow grease, setting body type well requires the sort of micro-level elbow grease that ants’ elbows would have. And lots of it.

Design is about obsessively caring to the point you will annoy most everyone around you.⁷

So cast the best actor you can and work with the text to really make it shine. Then sit back and watch. And know that even on an empty stage, this actor could deliver an experience more powerful and intense than a stage full of bells and whistles built around a voice that doesn’t reach the audience or just isn’t all that memorable. Know that the right type, set well, can make all the difference, can drive your site and carry your layout. Even—and especially—if readers don’t consciously take notice.