Believe me when I say I’ve seen a lot of ugly-looking sites and this isn’t about how weird the colour 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?
Table of Contents
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 because its first aim is to develop its visible form out of the functions of the text… Form must be created out of function” — Jan Tschicold.
“Typography must invite the reader into text, reveal the tenor and meaning of the text, clarify its structure. And also 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 types. 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 between using our designer eye or know more about typography for a pleasing result.
Choosing a good typeface can be hard, but choosing the right one makes a superb impact on whatever its purpose (it’s the opposite when you choose a bad one).
Anatomy of Typography
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 will mention about the anatomy on typography but know the x-height is one of the most important parts to remember, as typefaces with larger x-height are considered being modern and are easier to read.
How does typography improve the User’s Experience?
Now you know a little about the technical part of typography, it’s safe to say you know 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 hard for users to read, even though we skim the contents found in your site, this makes it difficult for a user to stay. Good typography is good business and understanding how typography work is also good business.
Most sites use texts that are too small and therefore lack readability, are too short making the user skip text or are too long making the user get tired really quickly.
How To Improve your UX with typography?
1. 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. Whichever your choice is, just make sure it’s readable.
2. 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.
3. 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. Using 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. And this 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 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.