When users come to your website, they usually come with some goal in mind. This goal is rarely to spot your wonderful site design and enjoy its advanced functionality.

Users most frequently come for information, be it the one about some aspects of life in general or about a product you offer. Here, typography comes in as it’s meant to ensure best possible perception of the information on your website. Today, it’s time to dig into the intricate connection of UX and typography and trace the impact of your font choices on overall website browsing experience.

Why Typography Matters That Much for UX?

It’s been reported that more than 95% of information on the Internet resides in the form of text (written language). This information is meant to be absorbed by people and they try to do their best to process as much information as they can. Here typography functions as a supportive friend that helps people get most out of their browsing time and effort.

Good typography is often hard to notice. It makes the process of reading streamlined and you don’t pay attention to it. On the other hand, bad typography choices can ruin browsing experience and tank the rate of reading perception to the minimum. As no one likes wasting one’s time, typography becomes one of the intrinsic UX levers that highly impacts the overall user experience on a given website.

By tweaking your website typography, you improve:

• text readability;
• content accessibility;
• website usability;
• and overall graphic balance.

Here we’re discussing only the UX and typography link, not mentioning the role of typography in forming website’s visual personality, defining your brand and catching reader’s attention. Check out this article to learn more.

The choice of typography for this church website not only boosts UX on the website, but also helps shaping visual identity of the brand).

How to Boost UX on your Website by Optimizing Typography?

There are multiple ways you can boost UX on your website by optimizing typography. As UX and typography are closely connected, by optimizing typography, you also optimize readability of your text, and, thus add to overall UX on your website. Let’s see what the rules to optimize typography are:

#1: Minimize the Number of Fonts Used

If you want your website look coherent and professional, use up to three fonts (not more). Different fonts on one website clash and distract the user from reading the text. Employment of several similar-looking fonts helps you create coherency of UX throughout your website pages and frees users from adopting to frequent style changes.

This is exactly what you should avoid on your website.

Oftentimes, employment of just one font is enough. If you still feel you need a couple of fonts, go for the fonts that have the same character width. In this case, the fonts won’t differ too much from each other and distract the reader.

This remodeling website uses the unconventional Six Caps font to boost website visual identity. This font is combined with Roboto Condensed to have two fonts, the character widths of which match.

One more great idea about combining a couple of fonts is marrying the fonts that imitate handwriting into the regular ones. Handwritten typography adds a personal touch to your overall website design and develops the visual character of your website.

This website has a soft and feminine feel to it with Caveat Handwriting font.

#2: Go For Sans Serif Fonts to Improve Readability

Serifs are the small lines at the ends of letter strokes. In print typography, serifs help people to recognize printed letters quicker and more efficiently. However, on the screen, especially on a non-Retina one, serifs are not that well outlined as on the paper, which partially impairs reading.

In addition to ensuring better readability, sans serif fonts speak in bolder, more minimal way.

Here, I’m not arguing that you should completely abandon serif fonts. A better piece of advice would be to be more cautious with them and use the ones that are that are clean and precise.

For example, this creative photography website uses Open Sans sans serif font that helps the website to make a bold, stylish and decisive statement.

#3: Mind Decent Font Size

The space on the Internet is unlimited. That’s why there is no need to save it and go for small font sizes that impose additional eye-strain on users. Readers with impaired eye-sight may experience difficulties reading small text, while even the readers with good eye-sight experience fatigue and have to take breaks to get to the end of, let’s say, 10pt text.

If don’t want your users to struggle through reading the text you present or zooming it in, go for 16pt + font sizes. Such font sizes minimize eyestrain and help users accomplish their goal on your website without visual exhaustion.

Malcolmy website uses readable 16pt typography for its home and blog pages.

#4: Observe Optimal Line Length

On your website, you should not cram all the space available with your text. By minding an optimal line length, you stick to high reading experience standards. If the lines are too short, reader’s eyes have to go back and forth when reading the text, which imposes additional eye-strain. If the lines are too long, it’s too hard to concentrate on the exact word that you’re reading and too easy to get lost.

To avoid both adverse situations, stick to 60 characters per line (for tablet/PC screens).

This image illustrates that the texts with too short or too long lines are harder to read than the texts that stick to ‘golden middle’ line length of ~ 60pt.

The optimal line length for mobile devices (e.g. smartphones) is shorter. For the text to be legible on small screens, the line should include around 30 – 40 characters.

#5: Go for Typefaces that Work Well in Different Sizes

As you know, the letter size for headings is usually bigger than for body text. The headings also differ in size, ranging from the smallest to the largest. On your website, you’ll have to go for different font sizes for various elements (e.g. buttons, captions, navigation items, etc.), as well as for different font weights for emphasis.

To ensure distinguishability of your website elements, go for a font that comes in various sizes and weights. If you go for one of the standard fonts, e.g. Google Fonts Roboto typeface, you’ll see all the variations it has. Some fonts come in 10+ variations, some have just a couple. Go for a font that has a rich set of variations to ensure diverse content representation on your site.

Different font styles of Roboto Google font.

#6: Make Smart Color Choices

The times of multi-colored, screaming websites have passed. Now, readability and contrast are the ruling forces that determine color choices. First of all, your content should be readable, and the combination that was for many years thought as the best is black text on white background. This combination ensures maximum contrast and dates back to classic typography times.

However, recently, it’s often argued that black color imposes more eye-strain than dark grey one. The shades of dark grey also contrast well with white background, but they are a bit less dense and provide for a more comfortable reading experience.

These are the shades of grey that outperform black in ensuring comfortable reading experience.

A website page utilizing dark gray as the slider text color.

When making your color choice, make sure you test it on different devices and in different environments. The text that’s good to read in a typical office environment may be hard to distinguish on a smartphone, especially when it’s used outdoors. It’s hard to account for all the factors, but your goal should be to account for the majority of environments and bring different groups of users comfortable browsing experience.

#7: Do Not Experiment with Line Height

Minimizing line height to fit more content in is not a good practice. If the lines are too close to each other, a reader is more likely to jump to preceding or subsequent line and get stuck. The space between the lines (leading) should be 30% larger than the height of the characters used. Such a leading ensures best readability of the content and its clear visual perception.

When line height gets smaller than 1.3 character height, the text gets hard to read.

#8: Let Your Users Decide

When tapping into UX and typography, it’s important to keep in mind your target audience and its needs. Know what kind of readers your site guests are and what are the typical situations they are discovering your website content in. For instance, if you target youth, pay more attention to mobile UX and adjust typography accordingly.

Run A/B testing for your typography choices and see which one decreases bounce rate and brings more conversions in. Be ready to constantly adjust your typography to keep bettering oneself and bringing the user experience possible.

For more information on A/B testing, check out this article.

Conclusions

Digging into the link between UX and typography can result in multiple valuable improvements of user experience on your website. If you go for typography-related tweaks listed above, you’re bound to get a readable website, browsing which is a real pleasure. I wish you good luck in this undertaking!

Have I missed something out? Please let me know in the Comments section below. Your topic-related questions are also warmly welcomed.

Stay tuned!