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.
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
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.
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.
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.
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.
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.
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.
By the way, if you want to improve your design skills fast, and save yourself hundreds of design hours, my Design System for Figma; Cabana could really help you out. Use the code CAB35 to receive 35% OFF. 👇
Thanks for reading the article,
Marc.