Improving User Experience with Typography
By: Steve Anthony
Tags: UX Design, User Experience Design, UX, Typography

Typography

Believe me when I say I’ve seen a lot of ugly-looking sites and this isn’t about how weird the color looks or how bad the layout is or how stretched the pictures are, this is about how bad the typography looks.

I’ve always been a fan of good typography and reading the book Better Web Typography for a Better Web by Matej Latin made me understand how using effective typography can not only improve the look and feel of your site but also the User Experience (UX) of it too.

Let’s get on to that shall we.

Why is Typography Important?

According to Matej from his book Better Web Typography for a Better Web, he quotes Jan Tschichold (author of The New Typography) and Robert Bringhurst (author of The Elements of Typographic Style) as followed:

“The new typography is distinguished from the old by the fact that its first objective is to develop its visible form out of the functions of the text… form must be created out of function," — Jan Tschichold “Typography must invite the reader into text, reveal the tenor and meaning of the text, clarify its structure and order and link the text with other existing elements.” — Robert Bringhurst

Judging from these men, we can tell what they meant. People think typography is all about fonts, at least that’s what most designers think, but it isn’t, typography is about expressing language through type, it’s about clarity.

You will notice me mention both typeface and fonts, they’re not the same thing. A typeface is a family of different font weights and style (e.g Gotham), while a font is a variation of styles of a typeface (e.g Gotham.otf/ttf)

Choosing a good typeface

They’re many ways to go about this, we’ve got so many typefaces out there. We’re filled with amazing and sometimes confusing choices, we can choose to use our so-called designer eye or know more about typography for a pleasing result.

Choosing a good typeface can be pretty hard (I admit that), but choosing the right one makes a really good impact on whatever its purpose (it’s the opposite when you choose a bad one).

Anatomy of Typography

Understanding the anatomy of typography is a great way to understand how type works

I won’t talk much on the anatomy of typography as Orana Velarde wrote a wonderful article on the topic titled A Visual Guide to the Anatomy of Typography [Infographic]. They are:

X-height: This measures the height of all lowercase letters part of the same typeface Baseline: This is the line most of the letters sit. Ascender: This is the part of a lower-case letter that is taller than the font’s x-height. Descender: This is the part of a lower-case letter that extends below the baseline (e.g y, g, p etc)

This is all I’m going to mention about the anatomy on typography, but do know that the x-height is one of the most important parts to remember, as typefaces with larger x-height are considered to be modern and are generally easier to read.

How does typography improve the User Experience?

Now that you know a little about the technical part of typography, it’s safe to say you know a bit about where I’m going to. Seeing websites and app with bad typography is bad business. As stated earlier, good typography invites the user into the text, it’s about expressing language through type and it’s all about clarity.

When your website lacks this, you make it really hard for users to read (even though we skim) the contents found in your site, this in turn makes it difficult for a user to stay. Good typography is good business and understanding how typography works is also good business.

Most sites use text that are too small and therefore lack readability, are too short making the user skip some text or are too too long making the user get tired really quickly.

How do we go about this?

Use a good typeface

I don’t know how to stress this enough, but using a good typeface maintains readability and legibility, while a bad typeface, well that’s the opposite. There are so many options out there to choose from, if you want an elegant or classic look, you might need to go for a serif typeface, or if you’re going for a plainer look, a neutral sans serif works great. Which ever your choice is, just make sure it’s readable.

Don’t set type without a scale

Using a scale helps keep everything consistent, not only for you or the developer, but also for the user. This helps with readability as they can be able to tell the difference between a header and a body without seeing something too small or something too long. I like to use a modular scale where according to Matej, after choosing a preferred type with a good x-height, you choose a body size and then choose a ratio. Just like Matej pointed out, I like to choose the Perfect Fifth ratio (they’re many of them) as this is neither too big or too small and it looks great optically. Check out modularscale.com or type-scale.com to do this.

Don’t make the text too long or too short

According to Robert Bringhurst in his book The Element of Typographic Style, anything from 45 to 75 characters is widely regarded as a satisfactory length for a single-column page, although the ideal is a 66-character length. Anything beyond 75 is considered too long and therefore stresses the user, making them get tired, therefore ignoring the content and leaving your platform. Anything below 45 is considered too short which causes the user to make the mistake of skipping a line when reading a text. Always consider this to improve readability on your site.

Conclusion

Good typography has always been really important in whatever we do, be it Graphic Design, UI/Web Design, good typography means good business. Keep it clean and simple and watch your users fall in love with your platform.

If you enjoyed this, please do well to clap so others can find it too. Thank you!