4 TIPS ON TYPOGRAPHY IN UI DESIGN

Communication plays a vital role in design. Whether you design websites, mobile apps, or wearable UIs, your creations have to clearly communicate their intent and purpose. And since text does a lot of the heavy lifting in communicating purpose, you need a solid understanding of typography.

Of course, designing a user interface differs from designing an ebook or blog theme. But the principles of type-centric design still apply. After all, on-screen communication happens through words, and type is the UI of language.

Master typographer Robert Bringhurst opens his magnum opus, The Elements of Typographic Style, with this statement:

Typography exists to honor content

Every interface includes a series of choices the user can make. Your type should support that decision-making process, honoring the content in a way that never adds to the user’s cognitive load. Great typography draws the reader to the content, not to the type itself.

1. Choose a typeface that works well in various sizes
Most user interfaces require text elements of various sizes (button copy, field labels, section headers, etc). Choose a typeface that works well in multiple sizes and weights to maintain readability and usability in every size.

Avenir in useExamples: Avenir, Univers, Lato

2. Choose a typeface with easily distinguishable letterforms
Many typefaces make it too easy to confuse similar letterforms. Uppercase I’s and lowercase L’s can look identical. Set together, a lowercase R and N can easily become a lowercase M. So clarify things for your users by picking a face that makes a clear distinction between these forms.

Lato v Clear Sans

Example: Clear Sans vs. Lato (look at the uppercase I and lowercase L)

3. Treat text as UI

Cameron Moll has been preaching this message for almost a decade now, stating that while good designers treat text as content, the great ones treat text as UI.

At the risk of sounding redundant, this is so true when designing an interface. When your text represents a functional element, it is UI. All the practices of UI design apply to your type. And if you’re not convinced, just think of the confusion you felt when you encountered a door with pull handles … labeled “Push.”

4. Consider the job to be done
If you’re not familiar with JTBD, it’s a framework that focuses your design on the user’s needs. So ask yourself what problems you’re helping users solve. The answer to that question should dictate your UI decisions, type included.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.