Typography in Product Design

A few weeks ago we were introduced to the art of type, and gained a basic understanding of the rules surrounding it. But where does it all fit in? Of what value is typography to the interfaces we interact with on a regular basis?

We put extreme emphasis into the code and pixels pertaining to our products. But both are rendered useless without the content. And as the esteemed Robert Bringhurst once wrote, "typography exists to honor content." In this lesson we'll learn where typography and product design cross paths, and how to properly implement it into our designs. We'll learn why it matters most.

  1. Reminder - Design is still about words

    This article is extremely short, but it contains a valuable message. List five websites that you visit regularly. Social networks, blogs, web applications, anything. Now imagine these sites without their text. What design would be left?

  2. Web Design is 95% Typography

    Oliver conveys the message that design is still about the words and their organization. Are you currently working on a product? You've scanned your code and design numerous times, but when was the last time you checked your type? How wide are your columns? Do your font weights and font sizes properly establish a visual hierarchy?

  3. Choosing The Right Font

    Practice makes perfect. With that said, using the knowledge you've gained from this article arrange three groups of text (make them up, our pull them from an article). You can use Typekit to select your font(s) and Typecast to arrange the text.

  4. On Web Typography

    While watching this video, jot down 5 takeaway points that effectively summarize Jason's talk. These will now form your personal typography checklist when working on your products.

  5. Interactive Guide to Blog Typography

    We all take our chances at blogging. If you have a blog (or know a friend who has one), take a look at its CSS. Does it take into effect the things you've learned in #3 and #4? If not, make some alterations. You can even use one of the arrangements you created for #3's task.

  6. Checklist for Better Web Typography

    Combine this checklist with the one you created in #4, and save it off as your go to doc for when doing anything that pertains to type.

Finally, an easy to follow design course

Receive a design lesson in your inbox each week, hand crafted by a design pro. Learn at your own pace, and apply it to your real life work – no fake projects here.

No spam ever. We promise.