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:

  1. Primary — The most noticeable text on the page, usually bigger and a brighter color than the other layers of text. Because it’s so powerful, this level should be sparse — reserve it only for headlines and decks (known as “furniture”).
  2. Secondary — Less noticeable than the primary level, but more noticeable than the main content, the secondary level handles everything in between. This level features some minimal but distinct elements in size and color, and typically includes subheads, captions, pull quotes, infographics, or supportive blocks of text separate from the main content.
  3. Tertiary — This is the main content, the most common, and the least noticeable. It should be simple and not flashy — the goal of the other layers is to attract attention; the goal of this layer is to encourage the reader to become immersed in the text, hence less distraction.
  4. Other — Smaller levels of hierarchy can be created by sparingly applying italics, color, bolding, underlining, and other effects to tertiary type. These levels might include underlined links, a few bolded words for emphasis within paragraphs, etc. Text that shows up in banners, logos, or other background graphics also fall in this category.

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.

  • Size — The basic unit of typographic hierarchy. Text of different sizes attracts different levels of attention.
Image for post
Image for post
  • Weight — The thickness of the text, most easily increased through bolding. Although subtler than size, it’s still a straightforward method of making your text stand out. Bolding is especially effective for adding weight to tertiary type.
Image for post
Image for post
Photo credits: “Fraktur”. Wikimedia. Creative Commons.
  • Italics — Italicized letters draw attention is a less dramatic way than bolding. Because it’s a subtle touch, this works well for tertiary type.
  • Capitalization — Just like emails written in Caps lock sound like you’re yelling, the same applies to web typography. Always be careful when capitalizing letters, because they appear disproportionately larger and pop into the foreground.
  • Color — Now we’re getting into the complex factors. Warm colors (red, orange, yellow) tend to attract more attention than cool colors (blue, purple), especially if warm-colored text is set against a cool-colored background. Color contrast also matters, since saturated or bright colors jump out more than muted ones.
Image for post
Image for post
  • Contrast — Contrast between any of these factors — size, weight, or color — will attract attention. Contrasting typefaces for headlines versus body copy helps create hierarchy.
Image for post
Image for post
Photo credits: www.talkpr.com
  • Space — White space can make text appear larger (and therefore more readable). Lack of space makes text feel more cramped and smaller. Every space affects your hierarchy, from simple kerning to the relationship between words and the edge of the screen.
  • Position — Just like we talked about in both the Gestalt and space chapters, proximity can be a fast and simple way to convey meaning.
Image for post
Image for post
  • Orientation — Turning letters and words sideways, diagonal, or upside down adds to visual appeal. The effect creates surprising eye candy for users. This works especially well for adding emphasis to short words/phrases within primary text. Tilting, rotating to vertical, and other methods immediately focus the user on the affected text.
Image for post
Image for post
  • Texture — As Carrie Cousins describes, texture is highly subjective, making it one of the hardest elements to master. This doesn’t refer to the texture of the lettering itself, but of the texture created through the typographic patterns on the page. Each block of text produces its own pattern, so to create texture, break the pattern by changing any of the other elements. Apply sparingly, otherwise it becomes distracting.
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