Back To Blog

Typography in UX

Elements of typography we want our clients to consider during the UX phase of our projects

Featured Image

At FortyFour, collaboration is at our core. Working closely with our clients keeps us aligned on the goals and objectives of our work, and for each step of the process, it allows us to explain why we make the choices we do and what impact they have on the overall outcome.

For example, typography is often considered an aesthetic component of the designed end product, but today, it’s as important to the overall user experience as ever. Using only type, we can guide a user to take a specific action, help them prioritize certain bits of information over others, or prime them to anticipate what comes next. That’s powerful stuff that we want our clients to understand so they can engage with us in a conversation that results in the best work possible.

What other elements of typography do we want our clients to consider during the UX phase? Let’s discuss.


Hierarchy

As a design element, the typographic hierarchy provides the structure through which a piece of content communicates itself visually. From a UX perspective, hierarchy is the principle that lends priority to some information over others, establishes and supports the voice and tone of your content, and guides users through the experience as you’ve laid it out.

Sorry, English majors, when it comes to content, less is often more. People don’t like to spend time reading large blocks of text. The thinking behind this behavior revolves around the idea of “Scannability.” Steve Krug, in his now legendary UX-centric book “Don’t Make Me Think” says, “What [users] actually do most of the time (if we’re lucky) is glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. There are almost always large parts of the page that they don’t even look at.”

How does typography fit into this model? By providing clear visual hierarchy that suggests what’s most important on the page, good typography helps a user gain an understanding without an in-depth reading. It’s always a good idea to provide them with more info just in case they do want to go deeper, but a user should be able to get the gist of things with a quick once-over.

Size, Color, Weight & Style

One of the easiest ways to establish typographic hierarchy in a user experience is through size variation. Broader or more important ideas can be presented in larger-scale type, while supporting content and details can be presented in smaller type. The relationship between headlines, body copy, block quotes, and others generally start with adjustments to the scale.

Color is also an easy way to signify the importance or difference in content. In the early days of the web, signifying a link in a piece of text was as simple as displaying the text underlined and in bright blue. At the most basic level, this still works, but it doesn’t look very good. Through a consistent color system, users can quickly identify links from non-linking content. For example, when dealing with active and inactive content, we can move from a lighter color to a darker one as an indication that an element has been activated. Another good example of using color to direct a user’s attention is seen with validation errors popping up red above or below a form field we’ve filled out. The red jumps out from other other labels and fields, which we generally understand to mean that something’s gone wrong.

Like scale, the weight and style of a typeface establishes differentiation. Bold type, for example, is implicitly more important than regular weighted type. There are always exceptions to this rule — a larger, lighter weight typeface larger will call more attention than its heavier weight, smaller body copy. But in general, if two pieces of content are the same size, the bolder type will appear more important. Italics and underlining are another way to show importance. For example, we’ve established that our nice red alert type is going to be pretty intuitive for most users to understand, “Hey, something’s wrong here.” But what if that user is colorblind? Italicizing that same error type is one way to ensure that it stands out as different (and therefore worthy of special attention) even if the user is unable to distinguish a color difference.

Leading & Tracking

Leading, or line-height as we know it in CSS, is the amount of space between the lines of text. This is usually considered more of a design-specific aspect of typography, but I’d argue that legibility, whether good or bad, is at its core a UX issue vs. an aesthetic one. Ensuring that you’ve got proper spacing between your lines makes it easier for a user to digest. Along similar lines, tracking (or letter-spacing in CSS) can help you ensure legibility at smaller sizes – by increasing the amount of space between letters at small size, we increase the ease with which those letters (and the overall message) are interpreted.

Your Audience, and the Devices They Know & Love (& Use)

When thinking about the overall user experience and how typography fits in with the bigger picture, we can’t forget to take both our audience and their devices into consideration. Who are we designing the experience for? If we’re designing an app to be used by the residents of a nursing home, we’re going to make different typographic choices than we would with an app for tech-savvy 20-somethings. We’d likely skew towards larger overall point size, higher contrast, and more open leading with the former.

As important as knowing our audience, anticipating our users’ devices can influence those typographic decisions as well. For example, Christian Miller says in his article “Your Body Text Is Too Small” that:

“While the minimum font size for body text has been acknowledged as 16px for a while, I believe a better starting point would be 20px on small desktop displays and greater. We should only have to resort to 16px for body copy on very small mobile devices. Even then, it would be better to start at 18px depending on the typeface and increase it responsively for larger screens.”

There are exceptions to this – for example, helper text may be as small as 12px on mobile (as long as the typeface being used remains legible). But in any case, knowing what devices you’re designing an experience for will (and should) influence the typographic decisions you’re making.

Final Thought

A solid understanding of typography and all its nuances is becoming more and more important to UX as a whole. Knowing how to use these tools to your advantage will help you in crafting great experiences, regardless of device or medium, and that’s exactly why we teach our clients about these principles: we want to create great work that we can all be proud of. That only happens through a collaborative approach to projects.

FacebookTwitter

Leave a Reply

Your email address will not be published. Required fields are marked *