Web Design Fundamentals: Typography in UX Design

On the surface, it may seem that choosing an attractive font for your next design project is the last thing to worry about. However, with over 90% of online information being in text form, the effect of typography in UX design goes far beyond aesthetics.

Whether you are building a website, developing a digital product, or working on a marketing asset, it is vital to communicate your message clearly to your target audience. And the type of typography you choose can either push that communication to another level or bury it under a pile of letters, words, and lines.

In today’s article, our web design agency in Chicago will make an effort to bring terms and principles of typography in UX design closer to you. We hope to help you become more proficient in this discipline and manifest your creativity in a way that enhances usability, readability, clarity, and accessibility. Let’s work together and entice curiosity that will invite your users to continue reading.

What is typography in UX design?

Excuse us for being a bit nerdy here, but we believe that the best way to fathom a word’s meaning is to understand its roots.

The word “typography” in English takes its root from two Greek words: τύπος (typos), which means impression, and -γραφία (-graphia), which means writing.

Now that we’ve unraveled the core meaning, let’s check how Wikipedia defines typography:

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning). The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.

Using typography effectively can help you boost user experience, optimize usability, and increase conversions.

This is a great definition to which we have nothing more to add. That being said, let’s move on to defining the most important typography terms.

Typography terms

These are the most commonly used terms in typography:

Typeface

Though many people consider typeface and font to be synonymous, the term typeface actually refers to a font family. In other words, a font is a part of the typeface. The term itself comes from a physical print referring to the faces of physical letter blocks. It is a style shared across all characters, numbers, and symbols. For example, Arial and Times New Roman are typefaces.

Font

Fonts are various weights within a typeface. For example, if you choose Arial as your typeface, then bold, italic, and regular would be fonts within that typeface. So, you would select a typeface and then use stylized characteristics within that typeface. Those variations are called fonts.

Character

Character is an individual element—for example, a single letter or a number.

Baseline

This is an invisible line on which characters rest.

X-height (midline, mean line)

It is the distance between the baseline and the height of the lower case letter x. It is best to avoid using fonts with unorthodox x-height, may it be too large or too small, since this discrepancy could impact your interface in a manner that can completely break the layout.

Stroke

A stroke is a line that creates the body of a letter. It can be straight or curved.

Serif

This is a tiny decorative foot-like element found at the bottom of a character. It guides readers’ eyes by connecting characters, thus improving readability.

These elements may not always render well on smaller screen sizes.

Sans serif

This typeface has none of the extra elements at the bottom of the characters.

Due to smaller screen sizes, these typeface solutions were often preferred for digital interfaces. However, as the screens come equipped with higher resolutions, this is less and less becoming a deciding factor.

Weight, height, and size

These terms refer to the thickness, length, and size of a typeface, respectively. You should consider experimenting with multiple variations to direct readers’ attention to specific elements or break the monotony of long passages.

Ascender

Ascender is the vertical stroke that goes upward beyond the x-height.

Descender

Descender is the vertical stroke that goes downward beyond the baseline.

Letter spacing (tracking)

Letter spacing is the horizontal distance between the widest point of a character, while tracking marks the uniform increase or decrease of space between characters.

Leading

In digital product development, leading is usually referred to as line spacing or line height. It is measured from baseline and represents the space between multiple lines of type.

White space (negative space)

This is the empty area between various design elements. Employing white space will let your users’ eyes rest, thus improving UX and readability.

Alignment

This term refers to text positioning and provides composition coherency. There are four types of alignments:

Left
Right
Centered
Justified

Hierarchy

Hierarchy is the principle of organizing elements according to importance. By creating a strong visual hierarchy, you can help your users figure out where to direct their attention first. Since your interface often has multiple elements, it is essential to guide your users to the most important sections of the screen. All of the elements we’ve talked about work together to create a visual hierarchy.

Typeface classification

There are multiple classes of typefaces. In this section, we’ll outline some of the most prominent characteristics of each typeface class.

Let’s start with serif typefaces:

Old Style (examples: Adobe Jensen, Garamond, Goudy Old Style)

Diagonal stress (the tin parts are on the diagonal rather than the horizontal or vertical axis)
Bracketed serifs (with a curve attaching the stem and head)
Minimal contrast
Wedge-shaped serifs
Angled heads serifs

Transitional (examples: Baskerville, Perpetua)

Usually vertical strokes
Vertical stress
Pronounced contrast
Oblique and bracketed serifs

Modern (examples: Didot, Bodoni)

Little to no bracketing on the serifs
The vertical axis on curved strokes
Increased contrast between thick and thin strokes
Ball-shaped stroke terminals

Slab Serif (examples: Museo Slab, Rockwell, American Typewriter)

Heavy serifs with little to no bracketing
Almost no contrast in stroke weight

Glyphic (examples: Albertus, Cartier Book, Newtext)

Emulate lapidary inscriptions rather than pen-drawn text
Minimal stroke weight contrast
Triangular serif shapes

Moving on, let’s explore some of the essential characteristics of sans serif typefaces:

Grotesque (examples: Franklin Gothic, News Gothic)

A spurred uppercase G
Minimal contrast in the strokes
Some of the curves were more square in older versions
A double-story lowercase g in older versions

Neo-Grotesque (examples: Helvetica, Arial, Univers)

Increased legibility
Plainer than older Grotesques

Geometric (examples: Futura, Avenir)

Letter O is round
Based on simple geometric shapes
No contrast between strokes

Humanistic (examples: Gill Sans, Verdana, Lucida Grande)

Based on the proportions of Roman-style capitals
Created to improve legibility
More contrast than other sans serifs
Calligraphic influence

Script typefaces can range from very casual to formal and are great for display use:

Formal (examples: Bickham Script, Snell Roundhand, Kuenstler Script)

Flowing loops and flourishes
Generally connected letterforms

Casual (examples: Brush Script, Bianca, Mahagony Script)

A brush-like appearance with stronger strokes
Sometimes connected letterforms

Calligraphic (examples: Mistral, Vivaldi, Ballerino)

Emulate hand-lettered calligraphy
Generally have high contrast

Blackletter (examples: Goudy Text, Monmouth, Engravers Old English)

Very formal
Based on handwritten calligraphy
Strong contrast in strokes

Handwriting (Blog Script, Pacifico, Cedarville Cursive)

Casual
Mimic modern handwriting

Monospaced (examples: Courier New, Consolas, Source Code Pro)

Here, Every letter takes up the same amount of horizontal space. Monospaced typefaces can be serif and sans serif.

Display (examples: Broadway, Cooper Black, Curlz)

These typefaces vary in appearance. They are suitable for headlines and include practical and novelty fonts)

The best practices of typography in UX design

In this section of the article, we’ll provide some basic guidelines that may come in handy when designing your website or app for a better user experience. Let’s dive in.

Including too many typefaces can ruin UX

You’ve probably heard people say Less is more. This is very true when it comes to mixing multiple typefaces on the same project. That practice can only lead to confusion and an overall unprofessional look and feel. It also doesn’t bode well with Google’s Core Web Vitals update, as it increases the time your app or website takes to load. For optimal user experience, it is best to keep things simple and use typefaces that are most likely to be available at the users’ end.

Use typefaces that contrast each other

You’ll find no use in including typefaces that are not clearly distinguishable. If nuances are too small, your users will probably not even notice them. So, if you wish to pair different fonts, we suggest using one serif and one sans serif font. That way, you are allowing your readers to recognize and appreciate your design solution.

Include no more than two fonts

You may have noticed that Google also discretely suggests this practice by recommending font pairings when downloading fonts from their service. So, carefully choose a font combination that aligns with your brand’s personality.

Always think in terms of readability, legibility, and accessibility

The purpose of using text is to convey a message, so your choice of typography needs to work toward that goal. You need to consider the medium and the environment that people use to interact with your product.

Color and contrast are vital in terms of accessibility. For example, a pale yellow text on a white background will be extremely difficult to read, especially for people with some form of visual impairment. That’s where various WordPress ADA compliance plugins may help. Today, an increasing number of apps choose the dark mode as a default setting. And this is an excellent example of providing accessibility as it reduces the discomfort that people may feel when looking at a bright screen for too long.

A strong visual hierarchy provides a better user experience

Use character size, weight, and color to create a strong visual hierarchy that can guide your users to the most valuable sections of your content. These sections should be more prominent, while the least important elements need to be smaller and unobtrusive. This will allow your website visitors to rapidly scan the page in search of valuable information. Furthermore, besides providing a better experience to your users, an effective hierarchy also improves search engine optimization – a win-win situation indeed.

Make your typography scalable

Mobile searches make up over half of the internet traffic, so it is clear that your typography design choices need to provide a seamless user experience on both platforms, whether you are working on a website or an app. Typography in UX design should scale well in order to support all screen sizes. That is why we suggest you define a scale for both typefaces and fonts at the very beginning of the development process, considering not only different platforms but operating systems as well. This brings us to the next point.

Ensure that you are using proper size and line heights

This way, you will avoid eventual layout discrepancies. You also need to consider multiple breakpoints (pixel values) for the design and tweak the size and heights accordingly. Here is what you can try:

If you are designing for a desktop, you could use a 16px font or higher. It is a reasonable size that allows comfortable reading.
For iOS, make sure that the text size is not smaller than 11 points. That way, your text will be readable at a standard viewing distance with no zoom.
For Android devices, 12sp is considered to be a minimal legible font size. However, it is best to use at least 14 sp for body text.

Your line length (the number of characters that fit in a line) should provide a comfortable reading experience

Web Content Accessibility Guidelines (WCAG) suggest under 80 characters per line.

Don’t use large paragraphs

No matter how good your choice of fonts may be, huge blocks of text decrease readability. If your users are faced with vast portions of uninterrupted text, they are most likely to bounce, thus lowering your search engine rankings.

Don’t abuse upper case

We think that this is self-explanatory—nothing more to add here except that this type of malpractice reduces comprehension ability.

Mind the spacing between lines (leading)

In order to follow the best practices of typography in UX design and provide good readability, make sure that the spacing between lines is 30% larger than your character height.

Use typography as a communication ornament to embellish user experience

Although content primarily communicates a message, typography is your extra chance to manifest creativity in UX design. That way, you’ll be able to set a tone and evoke feelings, all in an effort to present your brand just the way you want it to be perceived.

Test and use results to learn and improve

Just like with any other stage of the designing process, when it comes to typography in UX design, it is mandatory to employ regular testing and learn from the data you gather. We encourage you to step outside your comfort zone and experiment with different typefaces and fonts. Perhaps you’ll find new matches or conclude that what you thought would work together doesn’t result in the desired outcome.

As we have already mentioned, remember to test how different typefaces and fonts scale from one platform to another. For starters, let us reveal a “hack” that some designers use. The phrase the quick brown fox jumps over the lazy frog includes all the letters of the English alphabet, so it can be extremely useful for testing various typefaces.

Another thing to consider is the possibility of your website or app content being translated into multiple languages. In that case, it is vital to ensure that your typography design choices work well with different diacritics (marks placed above, below, or next to letters that indicate a particular pronunciation, for example, Ӧ) or various scripts. In the end, testing will be your best guide in using typography in UX design.

How to use typography in UX design to provide accessibility

Designing with accessibility in mind includes much more than simply choosing a readable typeface. Here are some points to keep in mind:

Don’t use curvy and flashy fonts
Conduct research studies when choosing the font
Employ adequate letter spacing
Your font should resonate with your audience
Use humanist rather than grotesque typefaces
Stay away from typefaces that have imposter letter shapes
Avoid mirroring letter shapes

Apple human interface typography guidelines

Apple has multiple guidelines for you to consider in order to deliver a premium user experience on iOS and macOS.

Designing for macOS: Apple uses San Francisco Pro as a system font for macOS, which provides excellent readability and clarity, as well as consistency with applications across their platform.

While designing apps for macOS, it is best to use the built-in text styles for your content. That way, the text will be visually distinctive and readable. As we have already mentioned, you shouldn’t use too many fonts. In fact, using only one font would be enough.

For longer passages, use more space between lines (loose leading), so it would be easier for readers to keep their place as they move from one line to the other. However, in case you need to display two lines of text in areas with constrained height, decrease the space between lines (tight leading) so the text would fit well. Avoid the tight leading for more than two lines, regardless of the height.

If you are using custom fonts, check whether they look properly on smaller screens. Mind the tracking and modify it if necessary.

Designing for iOS: You can use multiple fonts when designing for iOS. Apple recommends the following:
- San Francisco
- New York
- San Francisco
  - Pro
  - Compact
  - Pro Rounded
  - Compact Rounded
  - Mono

Pay close attention to tracking, leading, font sizes, and weight.

Google material design guidelines

Typography theming allows you to build styles that resonate with your brand’s personality. The first thing you should do is define a set of type scales to be used across your applications.

Type Scale is a range of contrasting styles that support the various needs of your product and its content. Thirteen styles that are supported by the type system. Type Scale comprises reusable text categories, each with an intended application and meaning.

You can use the Type Scale Generator by Google Fonts to create a type scale along with the corresponding code. All you need to do is pick a font, and the tool will automatically resize and optimize it based on Material typography guidance for readability.

Benefits of typography in UX design

Communication is one of the most critical elements of user experience. This is where typography plays a major role. Your business will thrive if you manage to get your users to understand what your product does and what your brand stands for.

The typography you choose needs to provide more than just legibility. It should evoke emotions that will push your users toward desired actions. Here is how your business can benefit from the right typography choices:

It shapes your brand’s personality: The choices you make on your website or product affect the way your customers experience your brand. Typography can paint the picture of how your brand would look and behave if it were a person.

It sets expectations: Your users are sure to form bars of expectations depending on how they perceive your brand. You can help them form an opinion on how professional your service would be, how approachable your staff is, or how much you deliver on your promises through the typography.

It creates the right visual hierarchy: Yes, we have already mentioned visual hierarchy. But, no matter how much we talk about it, we won’t be able to stress this point enough. The mixture of typefaces and font sizes impacts the depth of your messaging strategy. It allows you to decide which messages you want to implant into your users’ minds.

It increases conversion rates: This is yet another impact of the exemplary visual hierarchy. The clearer your message is, the more valuable your CTA will be, and increased conversion rates will come naturally.

It provides aesthetics without graphics: Too much graphics and animation can cause distraction. This is why we can see an increasing number of brands that value typography over graphics on their websites while maintaining that looking good appearance.

Final thoughts

When designing a product, whether a website or an app, both what you have to say and how you say it is equally important. Your words convey a message through their meaning and appearance. The creative use of typography can help you enhance usability, legibility, clarity, and accessibility of design. Though it may seem like an obscure element, your choices regarding typography play a significant role in creating a positive user experience. However, you shouldn’t go all out and complicate things too much. Keep things simple and follow the best use practices outlined in this article. By testing regularly and listening to your target audience, you’ll ensure that your digital product provides the best possible user experience.