Enhancing user experience through typography

As designers, we are all capable of picking a font and changing the size, weight or colour, but how often do we actually consider typography as a whole in our designs. Typography is more than just the font; it is an art form and a practice. In this blog I’m going to outline how good typography uplifts the user experience, as well as nail down specific considerations when starting out on your next design project.

Letterpress: The origin of typography

The art of letterpress is the oldest form of printing, where letters and forms were made of wood or metal blocks, simply called ‘type’. This movable type was composed into a press, inked, and stamped onto paper. The somewhat romantic notion of letterpress has all but disappeared in an oversaturated digital age and some contemporary uses of typography have all but forgotten the fundamentals of type design.

When two worlds combine

Despite an obvious disconnect between letterpress printing and desktop publishing, designing for print and designing for screen are still very much intertwined. In fact, a successful user interface is reliant on the appropriate application of typographic design principles.

Let's get down to it

For UX designers, typographic decisions are usually a subconscious choice. Let’s make those decisions conscious - highlight what we are successful at, and where we might be sabotaging our designs.

Typography is crucial for enhancing the user experience, and poor typographic treatment could prevent a user from experiencing your site to its full capacity. How you choose to use type design will influence the readability and usability of your site. Let’s break it down into smaller chunks to get started:

Choosing the right font

The first choice we have to make seems simple; what font? However, there are multiple factors that can impact your font choice. First narrow it down - modern sans serif or classic serif? What is appropriate for the brand? With an existing brand you may already have a typeface in your style guide. Figure out if this font will be readable as body copy or whether you should use it sparingly, perhaps as a heading. If you’re starting with a blank canvas and want to use Google fonts, there are tools that help you to pair two fonts that go well together. Font Pair has a set of featured pairs as well as suggestions for multiple combinations. Using this, combined with the new Font Combinations tool from Bold will give you plenty of suitable options. When choosing a font for body copy - go simple and readable.

Choose a font that is flexible. The more weights, the easier it will be to create visual hierarchy within your interface. Webfonts tend to have the most weights and you can host these on your site using CSS font-face. (For this you will need to get fonts from a site like Font Squirrel or similar). Otherwise webfonts can also be integrated from external sources such as Google Fonts of Typekit.

It pays to check your font is still readable in all sizes - think about applications where it might appear small, like mobile. Next consider if any characters are interchangeable - in sans serif fonts, and this font is a perfect example, an uppercase I and a lowercase l are sometimes indistinguishable.

Image from invisionapp

Extra for Experts

Finally, depending on your application, you may need to consider accents and macrons. At Fonts.com you can explore this article listing letters and words with accents that have slipped into everyday English language.

Also, if you're in New Zealand, you should be sure to choose a font with a sufficient set of macrons for use in Māori words.

Fact: Serif fonts are considered easier to read in print because the structure of the serif leads a reader's eye more easily across the form of the text.

Great - I've picked my font, how do I use it?

How you use spacing in your typography actually has a physical effect on the reader. By adding white space between lines you are giving a reader a break and not overwhelming their eyes with lines of text. Keeping lines lengths to the optimum number of characters ensures the eye can sweep across a page back and forward at a comfortable speed. A line of text that is too short can fatigue the eye by causing it to dart back too often.

Good spacing aids readability. By adding a little space to text — both between lines and in the margins — you are helping users better interact with the words. - UX Planet

Here are some handy tips to ensure users find it simple to interact with your design:

• The line length for a block of text should be between 55 - 75 characters (For a mobile application line length should be only 30 - 40 characters)

• To find the optimum line spacing, multiply your font size by 1.618.

Fact: In design for print, ‘line spacing’ is known as leading. This term originates from typesetting, where lines of lead were placed between lines of type to create different spacing widths. Tracking is the term for ‘letter spacing’.

Image of metal type with leading, credit: Hannes Wolf

Keep it in order

Visual hierarchy in your design will guide users as they navigate your site. Design shack discusses more broadly why “Every design needs three levels of typographic hierarchy”. This creates enough variation allowing a user to identify a title or a heading, then find the most important information and content breaks simply by scanning the page. Titles, subtitles, h1, h2, h3, pull quotes, captions and styling are all ways to apply a different level of hierarchy to text.

The absence of hierarchy will distract the users and prevent them from determining the most relevant section of information. - UX Passion

Contrast and colour

How much contrast and colour to use is a balancing act. What you see on your screen can be quite different to a user's screen. Test your application on different monitors to make sure the level of contrast is enough to make your text readable, don’t assume that everyone will see crisp and clear text like on your retina or 4k display.

If your text is bulky, the highest contrast (#000000 on #FFFFFF) may cause more eye fatigue over a long period of time. In this situation, consider if a shade of grey is easier to read. Also consider contrast in context of mobile - if your application needs to be viewed outside, text with low contrast will be harder to see in daylight.

Image from Tirachard Kumtanom

If you chose not to read any of that, here it is in 50 words or less:

• Letterpress is old

• Typography is a relevant art (I promise)

• Pick a flexible font

• Follow the simple rules for optimal line length and line spacing

• Line length of 55 - 75 character for web

• Line spacing at 1.618 x text height

• Create hierarchy - don't distract, lead.