Web UI Design for the Human Eye: Content Patterns and Typography — Part 3

This is an excerpt from the Web UI Design for the Human Eye: Content Patterns and Typography ebook, written by Jerry Cao, Kamil Zięba, Krzysztof Stryjewski, Matt Ellis, and originally published on UXPin.com.

Image for post
Image for post

A Structure for Practical Typography

Typography is a second language communicating on a subtler level beyond your actual words. The actual content is what you say, but typography is the first impression of how you say it.

Image for post
Image for post

Typography creates an experience before users have even read a single word or clicked a menu button. Typography doesn’t just tell a story, it creates an atmosphere and emotional response the same way as a tone of voice.

As we described in Interaction Design Best Practices, words are the foundation of all interactions. Great designers understand this distinction and treat text not as content, but as its own interface.

In this chapter, we’ll talk about how to use typography to its fullest extent. We’ll begin by exploring the levels of typographic hierarchy, then dive into individual elements, and finish off with additional tips.

Levels of Hierarchy in Typography

As we described in Web UI Best Practices, typographic hierarchy is a subset within visual hierarchy. Typographic hierarchy arranges lettering so that important words stand out easily to readers who are scanning for information.

Image for post
Image for post
Photo credits: www.burningofcolumbia.com

Without this hierarchy, every letter and word in a design would appear identical. Your design would be about as visually appealing as an MS-DOS command prompt. As a general rule, Designer Carrie Cousins recommends that your typography supports at least three levels of hierarchy.

Try to shape your typography into these levels:

In order to illustrate the separation of layers utilized properly, let’s look at the below example from Jon Tangerine.

Image for post
Image for post
Photo credits: www.v1.jontangerine.com

The typography here has 3 distinct layers to clearly explain the elements of the piece without explaining a thing. The title is obviously “We, Who Are Web Designers,” but why is it obvious? The text is bigger (size), bolder (weight), and is set at the top-left where the viewers eyes go first (position).

The second level is the publication date, set in a different size and color than the rest of the text, and also italicized to give more distinction.

The third level, the article preview, is devoid of features. Compared to the other layers it may seem plain, but that is so readers aren’t distracted when trying to appreciate the actual content.

Elements of Hierarchy in Typography

Like other design fields, typography follows its own structural hierarchy. Knowing typographic hierarchy is like knowing how to use typography, specifically knowing how to give certain words priority over others.

Image for post
Image for post

UXPin includes hundreds of fonts included from standard libraries and Google Fonts. The styles, colors, and background colors can be modified for any text.

Before we delve into the levels of typographic hierarchy, Jeremy Lloyd, Creative Director at Sparkbox, thoroughly deconstructs the dozens of factors at play in your text. By manipulating the fields below, you’ll better control your typography, and thus better control where your users’ eyes go.

Image for post
Image for post
Image for post
Image for post
Photo credits: “Fraktur”. Wikimedia. Creative Commons.
Image for post
Image for post
Image for post
Image for post
Photo credits: www.talkpr.com
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

For more details on the theories that govern typographic best practices, read Mandy Brown’s article on the Adobe Typekit Blog. To check out some of the best examples of web typography, take a look at this gallery from awwwards.

Takeaway

Designers tend to be visual thinkers, so they embrace typography with open arms. If all visual elements of a web page design factor into the user experience, then of course typography will make a huge impact, especially on content-heavy sites.

It helps to keep in mind the different variations one can put on text, like size, weight, and the others mentioned above. Once you have a solid understanding of the different ways you can alter your typography, try implementing the experts’ tips we compiled here. Don’t neglect the language of typography: poor or lacking typography will be just as repulsive to readers as glaring grammar errors.

With typography and with actual writing, the rule is the same: learn how to speak the language. We hope you’ve found this e-book helpful, and feel free to try out some of the tips in UXPin.

Image for post
Image for post

Written by

The design tool for teams and professionals. From UI design and prototyping to collaboration and handoff. Speed it up with UXPin. • www.uxpin.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store