A Book Apart: Flexible TypeSetting By Tim Brown
Over the weekend, I read Flexible TypeSetting by Tim Brown. This book, from the ABookApart series, discusses the fascinating and beautifully nuanced art-form of font selection and responsive text layout design. If you're strictly a back-end engineer, this is probably not the book for you. But, if you work with the front-end in any capacity - and you believe in crafting a joyful user experience (UX) - knowing more about TypeSetting is important. Font selection, white-space, layout, contrast, texture, tempo - these subtle choices create the foundation upon which the rest of a successful product experience is built.
Last year, Saturday Night Live (SNL) released a delicious skit about the font, Papyrus. In that skit, Ryan Gosling is haunted by the fact that the Avatar movie used Payrus on its posters and marketing materials:
On its face, the skit is ridiculous because such a seemingly insignificant detail is able to drive an individual to the point of self-destruction.
He just highlighted "Avatar", he clicked the drop-down menu, and then he just randomly selected Papyrus like a, like a thoughtless child, just wandering by a garden, just yanking leaves along the way. (SNL)
As with most hyperbole, however, the theme of this skit is founded in Truth. TypeSetting speaks to our emotions. It speaks to our gut. Font-face selection molds our emotional state. And, the texture, tempo, and white-space choices that we make can create feelings of deep discord or sublime harmony in our readers.
In fact, just last week, in a conversation with Talasan Nicholson - one of our marketing engineers - I described text that butts-up against its surrounding elements as simply "disgusting". And, I lamented the frustration that I feel when other developers don't see and experience the same thing.
One of the aspects of Flexible TypeSettings that I truly appreciated was the fact that Tim Brown fully embraced this abstract and emotional component of typography. Yes, he discusses some mathematics, module ratios, and formulas for calculating acceptable ranges for line-height. But, he reminds us that we ultimately have to read with our "eyes" and lead with our "instincts":
"We read with our eyes, not with rulers," writes Tobias Frere-Jones, "so the eye should win every time". Your own intuition, an instinct about what feels comfortable to read, is just as valid an approach as a mathematical one. Hone your instincts." (Page 118)
You can see this mentality reflected in his word choice throughout the book. Whether it's describing ligatures as having "energy" and white-space as having "liveliness":
The lowercase "t" in Source Sans (bottom) has a slight taper, which gives it an upward energy; that same energy is exaggerated in the lowercase t of Modesto Text (top). Look at the liveliness in the white space of the letter sequence use in both typefaces. Look at the attitude in the question marks. Modesto has a very happy, casual vibe that really comes out in its lowercase. (Page 94)
Or, the fact that a font can look "horsey" and "exaggerated" as it scales in size:
Georgia can feel horsey - exaggerated - at large sizes because it was designed for use at smaller ones. (Page 206)
Or, how blocks of text can have a "color" that distracts the reader:
Good body text typefaces also have an even color - meaning typographic color, the overall gray value of the text. Sometimes it helps to squint at a text block to zero in on this gray value. What we're looking for is a consistent, pleasant gray. Avoid typefaces that seem to have white spots or dark patches, because these inconsistencies can distract readers. (Page 80)
Or, the fact that text proportions can make an interface seem "complete and tranquil" or, if chosen poorly, "agitated and discordant":
Shared proportions throughout a typeface palette can work wonders in a composition, making it feel complete and tranquil in a way that's hard for people to describe without taking a very close look at the type. Contrasting proportions in the palette, on the other hand, can make a composition look agitated and discordant. Use proportional relationships to achieve the effects your composition needs. (Page 97)
Tim Brown describes all of these abstract, touchy-feely, emotional components of TypeSetting as "pressures". Which, incidentally, is absolutely the perfect word for it! These "pressures" build up in our heads and our tummies as we read copy and they leave us in a wanting state. Thankfully, Brown articulates these various pressures and walks us through techniques for relieving them.
He does this both in a ground-up approach, creating a website from scratch. And, from a top-down perspective, describing how to retrofit good practices into an existing website.
Of particular interest to me was the methodology with which he iteratively explores a layout in order to discover these pressure-points:
Now slowly widen the composition by resizing the inspector pane. Watch how the text reflows and changes. Scroll up and down and resize the width repeatedly so you can see how the whole composition flexes. Stop when you notice something new to write about, title a new row using the width from the inspector, and keep taking notes. Do this continually, making the composition wider and wider. If you notice that certain pressures have gone away, write that down too.
.... By doing this evaluation exercise, we're looking for what Ethan Marcotte calls seams. When he talks about seams, about an element losing its shape, this is in many cases directly analogous to pressures that typeset text blocks face as they are pushed beyond their natural limits. (Pages 197-198)
I don't know what it was exactly, but there's something in the way that he describes his process that struck a chord in me. He took something that has historically flustered me; and, he turned it into something that made sense.
After reading Flexible TypeSetting, I feel like I am finally armed with the tools - and the vocabulary - needed to think effectively about font-selection and content layout. It still feels very much like an art-form. But, one that is grounded in established mechanics.
ASIDE: In 2007, Gary Hustwit released a documentary about typography and graphic design called, "Helvetica" (see trailer). If graphic design is important to you, I recommend it. Also, check out "Objectified" (see trailer), one of my absolute favorite documentaries on design.
Reader Comments