Design Tips

7 Tips to help improve your Web Typography skills

A good understanding of Typography (more than imagery, and colour in my opinion) is so important in the design of strong UIs.

Marc Andrew
Oct 29, 2020
5 min read
Photo by Brett Jordan / Unsplash

A good understanding of Typography (more than imagery, and colour in my opinion) is so important in the design of strong UIs.

Why?

Because the majority of what you see on the web is content-based, so having a better understanding of typography can enable you to keep the reader's attention, bring them a much better user experience, and strengthen the meaning of the text that is being presented.

With this article, I wanted to show you a handful of tips that will not only give you a better understanding, but also feel more confident when working with type on your next project.

Let's dive on in...


Use a Type Scale to define a harmonious set of font sizes.

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

As the name suggests, a Type Scale works based on a scale factor (say 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 (ie; H₁, H₂, etc…), or lower hierarchy (ie; Caption, Button etc…)

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

I highly recommend checking out — type-scale.com

A row of font styles at varying sizes

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

Working with Body text, and trying to find a suitable line length can be a bit of a balancing act.

45 to 75 characters is widely 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 for line length keep between the 45 to 75 character guidelines and you’ll be good to go.

Two type examples. One with too much line length, and the other with a more satisfactory line length

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

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

But for Headings…

… that’s a resounding ‘Yes’.

Your Headings are most likely going to 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, just by tiny amounts, can make your Headings more optically balanced, more readable, and generally more pleasant to look at.

Two typography examples side by side. One Heading set with default letter spacing, and the other with reduced spacing

Using just the one Typeface in your design is all good.

It’s absolutely fine to just opt for the 1 Typeface when creating your artwork, and sometimes doing this can help you produce much stronger, and consistent results.

Ignore the ‘Always use 2 Typefaces. Minimum.’ crowd. Using a combination of Weights, Sizes, and Colours you can still produce perfectly acceptable results.

Example of using one typeface with different font weights

Use Superfamilies when you're looking for great font combinations, but fast.

Is it a bird? Is it a plane? Nope. It’s a Superfamily!

When you’re looking to improve your typeface-combining skills and feel a little daunted when faced with 1000s of Typefaces to choose from, just go with a Superfamily!

Superfamilies are collections of Typefaces that can come in both Serif, and Sans-Serif variants for example, and are created to work together in close visual harmony.

A few that I highly recommend are Merriweather & Merriweather Sans, and Roboto & Roboto Slab which you can find here at Google Fonts.

If you want to combine Typefaces effectively, and without the worry of picking out an ugly looking combination you’ll rarely go wrong when choosing a Superfamily.

Two mobile design examples side by side with different font styles

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

Basically, the x-height is the height of a lower-case ‘x’ relative to an upper-case letter (ie; 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 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, either via x-height, Il1, or both, when choosing a Typeface for your Body text.

Two examples side by side with different Typefaces

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

Typefaces with differing x-heights need, well, 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 (ie; 18px) their x-heights can differ greatly, and this plays a big part in choosing the right kind of line height to implement.

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

Two text examples. One with too small a line height, and the other with a more suitable line height

By the way, if you want to really save yourself hundreds of design hours, my Design System for Figma; Cabana is now available.
Special Offer: Use the code CABANA35 to receive 35% OFF. 👇

Cabana - Design System for Figma
Cabana is a Design System for Figma that is super-powerful and feature-rich but gives you the creative freedom and flexibility to make it your own.

Thanks for reading the article,
Marc.