What Is Typography And How Is It Important To UX & UI?

It’s easy to forget that language is just one of the factors that gives words the power to persuade, inform, or entertain. Despite seeing typography everywhere, people are generally unaware of just how influential the appearance of words can be when it comes to UX/UI design and how we absorb information. Found in all sorts of written content, be it a book, article, report, post, forum, or website, typography is all about the aesthetics of text. Typography reinforces the impact of language by focusing on the art, style, and appearance of the words themselves. Language and typography work together to create impressions and convey meanings.

To a degree, you engage in typography whenever you edit typefaces, fonts, spacing, alignment, size, or the appearance of text. However, typography in UX design is about more than just pretty fonts. Any skilled designer carefully considers how typefaces work with other design elements of a web page or interface to reinforce and complement a desired message. In this guide on typography, we define what typography is, how it relates to UX/UI design and key considerations when choosing a typeface for your project.

This guide covers:

What is typography?
The importance of typography in UX/UI design
The key elements of typography
5 things to consider when choosing a typeface

What is Typography?

Typography refers to the appearance and style of text published online or in print. In essence it’s the art of arranging text to make it legible and aesthetically appealing. This includes carefully selecting elements such as typefaces, fonts, text size, as well as line, , letter, and word spacing to generate a desired message or reaction from the reader. Although historically considered in reference to language, typography is also a significant aspect of UX/UI design.

As an artform, typography dates all the way back to the 11th century. It was originally studied for its use in printed materials such as books, magazines, and newspapers. Inevitably, the use of typography on digital platforms grew with the rise of the internet, which greatly increased access to written information and different typestyles. From Times New Roman and Arial to Cosmic Sans and Helvetica, an ever-growing array of different typefaces, line spacing options, and design features have been developed thanks to the digital age.

However, the use of typography in the modern era is not just about setting the tone of a text using fonts and typefaces. Typography plays a key role in improving the UX and UI of websites, products, and services. Great use of typography in UX/UI design does not only improve legibility and help a reader to invest in text, it also encourages deeper exploration of a web page or website. Use of typography in UX/UI design is often considered with other design aspects, such as spacing, styling, and contrast in relation to the background and other graphics.

The Importance of Typography in UX and UI Design

Anyone who has used the font Comic Sans should understand the significance of typography on the aesthetics of text and web pages. Tweaks to seemingly small visual elements such as typeface or line spacing can have a dramatic impact on how well a page is received, its legibility, and general look and feel. It can also help determine how likely a reader is to engage with a brand, and is often a factor in whether users delve deeper into a website.

From a UX and UI perspective, typography should improve legibility, engagement levels, and user experience. It should also help establish a good visual hierarchy and graphic balance to any web page. Typography is also important for website design because it...

Captures Attention

While bad typestyles reduce legibility, an attractive typeface will draw people in and encourage them to start reading or engaging with a website or brand.

Influences Behavior

Poor typefaces turn people off, often causing them to ‘bounce’ from your website and back to a search engine. However, when paired with compelling language and visuals, good fonts and spacing can persuade users to spend longer engaging with the content, brand, or products on your website.

Supports Brand Recognition

Typeface works with logos and other visual elements to propel a brand identity. Over time, people can subliminally relate a typeface with a brand which helps to build trust and recognition.

Helps Create a Visual Hierarchy

Typography can act to create structure and clear signposting within content, which in turn naturally helps direct attention to the most important aspects. In a world that’s increasingly time poor, this is important for users and helps designers to direct people to the most salient information.

The Key Elements of Typography

Before launching into decisions about typography and which typefaces to use, it’s first important to learn the key aspects of typography and how they relate to UX design.

Typefaces

The visual style of characters is clearly a key element of typography and is at the heart of its power in communicating to a user. However, fonts and typefaces are not synonymous. Put simply, a font is a single graphical visualization of text. A typeface is a family of related fonts which can differ from each other in widths, weights, and sometimes different styles. Typically, serif, sans-serif, and decorative are the basic types of typefaces, with serif and sans-serif often used to distinguish between headers and body text.

Hierarchy

The use of typefaces, styles, and font sizes can also be used to create a hierarchy which organizes text. Establishing this hierarchy is crucial to typography. For example, a larger typeface may indicate a header or sub header, which helps readers to navigate through the text easily. Breaking up text into paragraphs with different font sizes helps users to scan through content and locate key pieces of information quickly and more effectively.

Consistency

Being consistent and organized with how different typefaces and fonts are used is key to preventing text being seen as messy, disorganized, confusing, or unappealing for the user. A good designer will create a hierarchy of styles which dictates when fonts, sizes, and formatting should be used for different types of information, paragraphs, headings, subheadings or sections of text. Readers should subliminally notice the formatting pattern, helping them to more easily navigate the text—that is, provided the hierarchy is adhered to and built to be consistent and without too many layers.

White Space

‘White space’ is the empty space surrounding text or graphics. It’s typically the color of the page’s background. White space can be altered around text by changing margins, padding, line spacing, or surrounding graphics. While it may seem like a small element of design, the space between words and objects can have a large impact on the legibility of text and the page’s overall look and feel. Used correctly, increasing white space can also draw the eye to key text.

Alignment

Alignment in typography refers to ensuring that sections of text, and sometimes graphics, align (or situate towards a line) in correct proportions to create the desired impact. With text this is often best done by ensuring body text and headers are aligned sensibly and consistently in relation to each other and the related graphics.

Color

It should come as no surprise that color is one of the most effective ways that typography can be used to create impact. However, it’s important that designers look at the use of color in text in relation to the background and other graphical elements on the site. Not only is a clash of colors off putting and messy but using too many colors may also confuse the user. Use of color is important for creating a desired contrast, which may impact legibility and prominence of text on a page. A good designer will balance the value, hue, and saturation of the color used in text to ensure that it is readable and draws attention to the right areas.

Contrasts

Contrasts can be created by designers to vary elements of typography—for example by using different colors, typefaces, and sizes. The benefit of this is that it can improve legibility, break up a page, draw attention to key words or areas of the page and communicate different levels of importance within the text. It can also create an information hierarchy which will guide users through the content more easily, making it easier to navigate and more accessible to them.

5 Things to Consider When Choosing a Typeface

Now that you know what typography is and its key components, you may be wondering what else you need to consider when deciding on a typeface for your website or product. While the elements discussed above are key considerations for the design of your text, it’s important that you consider what typefaces, fonts, and styles say about your brand before making too many decisions about the typography you intend to use. While you should be influenced by both aesthetics and your own creativity, it is also important to consider...

Brand

We discussed earlier how typefaces, point sizes, colors, and styles go a long way to informing an impression to the user, so it’s important to consider this in relation to your brand identity. If you haven’t already, you first need to establish a clear idea of what your brand is all about. You can start by defining the core traits and key messages of your organization. For example, you might start by questioning whether your brand is more serious and hard hitting, or is it maybe fun and creative?

Tone

Once you have established the brand identity you can then use fonts and typefaces to convey the organization’s brand messages. For example, while a more informal font may work for a relaxed or creative company culture, it will likely be inappropriate for a business that wants to come across as serious, insightful, or industrious.

Legibility

While decorative or stylized fonts can look great in isolation, they can also be difficult to read, particularly if used in the body text. A lack of legibility may lead users to give up on your content, making legibility of the typeface an important consideration.

Consistency

Try to select a typeface or hierarchy of typefaces and stick to it consistently throughout your designs. Switching fonts and typefaces between web pages for example can be messy and confusing for users as they navigate through your website.

SEO

Choosing a font that is web browser friendly is important to ensuring that search engines such as Google can use their algorithms to crawl and index your website. Not doing so could lead to fewer people finding the content on your website organically.

Aa an all too often forgotten element of UX/UI design, we have explored how typography can be a key component in how users see your brand and navigate content on your website and use your products and services. However, by taking the time to understand its key elements before applying them consistently to a design, designers can use the art of words and typefaces to encourage users to engage with a brand or product.

Want to learn more about typography in UX/UI design? Check out these related blog posts:

To learn more about typography and other fundamentals of UX/UI design we encourage you to explore our UX Academy Foundations program.

Guide: How to Define & Use Typography in UX/UI Design

What is Typography?