Transform your designs with these simple Typography tips

The content-driven nature of the web demands a decent understanding of Typography to enable you to create solid UIs and ensure that your users remain engaged, thus enhancing their overall user experience.

To help improve your Web Typography skills, I wanted to share some tried and tested tips that will enable you to work with typography more confidently on your next project and the project after that...

Let's take a look at them...

Use a Type Scale to create a harmonious set of font sizes

Using a Type Scale helps you define a set of font sizes easily, practically, and without any guesswork.

As the name suggests, a Type Scale works based on a scale factor (1.25). The idea is that you start with a Base font size (18px) and multiply (or divide) it with the scale factor to get font sizes of either a higher (i.e., H₁, H₂, etc…) or lower hierarchy (i.e., Caption, Button etc…)

A Type Scale will help you produce harmonious texts because their sizes increase and decrease along a fixed scale you’ve set.

I highly recommend checking out — type-scale.com

Choose a suitable Line Length for your body text, and improve Readability

Working with Body text and finding a suitable line length is a balancing act.

45 to 75 characters are regarded as a satisfactory line length for a single-column page, with a 66-character line (which includes both letters and spaces) found to be the sweet spot.

Of course, font size and line height also play a role when deciding on readability, but keep line length between the 45 to 75 character guidelines, and you’ll be good to go.

Reduce Letter-spacing on your Headings to give a better optical balance

Reducing Letter-spacing on long-form Body text? That’s a ‘No’ from me.

But for Headings…

… that’s a resounding ‘Yes’.

Your Headings will most likely be much larger and heavier than their Body text companions, so the spacing between the letters can sometimes appear optically larger, which is not always what you want when you’re looking for that perfect aesthetic.

Reducing the Letter-spacing by tiny amounts can make your Headings more optically balanced, readable, and generally more pleasant.

Use the x-height or Il1 test to determine readability of your chosen Typeface

Basically, the x-height is the height of a lowercase ‘x’ relative to an upper-case letter (i.e., T) of the same Typeface.

If your font has a large x-height, then this will generally make for much better readability, especially when used in long-form body text.

Another way to determine the readability of a Typeface, and to narrow things down if you have a few Typefaces that you can’t decide between, is to do the Il1 Test (Credit to the amazing Jessica Hische for this tip).

Here you compare three characters from a specific Typeface; Uppercase i (I), Lowercase L (l), and the number one (1).

How different the letterforms look against one another can help determine readability, especially when working with Sans Serif Typefaces.

Always aim for the best legibility via x-height, Il1, or both when choosing a Typeface for your Body text.

Set your line height based on the Typeface’s x-height

Typefaces with differing x-heights need different line height measurements to achieve the right kind of separation between lines of text.

Even though you may have 2 Typefaces with the same font size (i.e., 18px), their x-heights can differ significantly, which plays a big part in choosing the right line height to implement.

Merriweather, for example, is a Typeface with a large x-height and, as such, requires a larger line height. In contrast, something like Mr Eaves Sans, with its small x-height, requires less line height to achieve optimal readability and legibility.

Hopefully, this article has shown you that following a handful of simple, timeless rules can transform your designs when working with Typography on the Web.

Pay attention to your Type. Content is king, remember.

See you next week,
Marc.

If you enjoyed this, there's a couple of other ways I can help you out right now...

Design Guides: A collection of bite-sized UI & UX Design guides to reference frequently. Improve your knowledge and skills with little effort required. Oh, and they're absolutely Free. Grab the Guides here.

Cabana Design System for Figma: My best-selling system is a powerful kit for designers short on time. Think of it as a cheat-code that enables you to create beautiful designs... fast. Check out Cabana here.