• Typographers: the Original UX Designers

    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 wellmust 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:

    Use Restraint

    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).

    The number of typefaces, sizes, and colors on limited on THEME Magazine’s website and yet
    the hierarchy of information is clear. There is good contrast in type size to indicate titles, subtitles,
    and 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.

    Article titles are allowed to breathe on the Reeder iPad app.

    There has been a lot of disagreement here at Adaptive Path over the Google Mail redesign but
    I have to give them credit for making better use of white space.

    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.

    Distorting type is never a good idea. Instead of using Photoshop to compress or stretch letters
    look for a typeface that has been specifically designed to be condensed or extended.

    Some Resources

    A Cliff Notes style overview of the Elements of Typographic Style

    Two articles on type basics for the web:
    On Web Typography
    Typography in Web Design

    How do rules of typography and book design translate on tablet devices?

    Type classification and history

    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.

    There are 6 thoughts on this idea

    1. Stu Collett

      I love this book too, Kim. Love the quotes you’ve highlighted.

    2. Rob

      Please learn the difference between “then” and “than”. I’m not normally one to pick on grammatical errors, but this error appearing multiple times (and in a quote from the book no less!) on such a respected website taints an otherwise good article.

      What use is the correct typeface if it is applied to the wrong words?

    3. Kim

      Rob, you caught me! That’s what I get for trying to rush to get a post up before the weekend. Thanks for catching the error.

    4. Brody

      Good article! It would have been nice to see some mention of Metro (by Microsoft) on here though, as it’s clearly the inspiratoin behind Google’s recent overhaul.

    5. Neil

      Great quotes shared here, many thanks!

    Comments are closed.

  • Close
    Team Profile