We named the project rooms in Adaptive Path’s new San Francisco office after typefaces. This made the type nerd in me happy and hopeful about the respect paid to typography on UX design.
Recently something inspired to me to crack open the bible of print typography, “The Elements of Typographic Style,” by Robert Bringhurst. As a student this dense book, first published almost 20 years ago, was the bane of my existence. But revisiting it I was struck by how the rules of good typography reflect those of effective UX design. Below are a couple quotes that resonated with both the type and UX nerd in me.
Honor the content.
“Typography exists to honor the content…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.”
A typographer walks a fine line between giving personality to a text without dishonoring the content. As UX designers we balance guiding users without over-defining an experience. We can provide a framework to guide behavior but in the end it is people’s individual interpretations and personal context that define an experience.
Guide but don’t intrude.
“Typographers, like other artists and craftsmen—musicians, composers and authors as well—must as a rule do their work and disappear.”
As Jared Spool noted, “Good design, when done well, should be invisible.” We notice design when it is done poorly and gets in our way (air travel, anyone?). But a frictionless experience (one without constraints or barriers) will often go unnoticed, as will the identity of the designer who created it.
Balance functionality and emotion.
“One of the principles of durable typography is always legibility; another is something more than legibility: some earned or unearned interest that gives its living energy to the page…including serenity, liveliness, laughter, grace and joy.”
As UX designers we hope that our work brings ease to people’s lives through seamless functionality. But what makes an experience joyful, exciting, calming or thought-provoking? Refined typography can add a layer of emotional impact to a text. As designers we hope to add that extra element that makes an experience memorable and emotionally resonant, as well as functional.
If I could make one recommendation to UX or interaction designers looking to hone their visual skills I would say, take a typography class. Typography is not just about picking the right typeface and a class will teach the nuances of using type like any other graphical element (color, shape, dimension, etc).
Plenty of people have said this better than me. See below for some great resources. But if I were to leave you with 3 simple rules to keep in mind when using type in UX design I would say:
Limit the number of typefaces and type sizes used in a design, whether it is a smart phone screen or giant retail signage. Start with two contrasting typefaces (serif and sans-serif) and three to four type sizes depending on the density of the information. Make sure there is enough contrast between the type sizes to indicate clear hierarchy such as 24pt (titles), 16 pt (subtitles), 12 pt (body copy).
Let it Breathe
Don’t feel the need to fill the page (or screen). White space (the space between elements in a composition) allows for groupings of information to emerge, helping users scan and interpret content. The most important aspect of using whitespace is consistency. Spaces between titles and body copy, paragraphs, images and copy should have a system and remain consistent.
Avoid Filter Happiness
Don’t feel the need to flaunt your Photoshop skills by stretching, distorting and layering filters onto some poor typeface. A good typeface can stand on its own without drop shadows and embossing, and be better for it.
A Cliff Notes style overview of the Elements of Typographic Style
How do rules of typography and book design translate on tablet devices?
The days of being limited to Verdana and Georgia are long gone.
Some great examples of website type design. Note the limited number of typefaces and sizes used in most designs, as well as the ample white space.