How to Boost Readability and Charm in Web Typography

Making typography beautiful and readable

When it comes to web and UI design, typography can be often overlooked. Like with all aspects of design, trends and visual aesthetics can sometimes take over, and the user experience becomes a second thought. In this article, we’ll discuss some easy-to-remember design tips that will make your typography readable as well as charming, because there's no reason why beauty and UX can't mix!

Contrast

Great design includes a deliberate use of high-contrast to boost visibility and to catch the viewers attention, however when it comes to typography, we specifically have to think about readability and legibility too. If you're not sure of what the difference is, readability is how easy it is to read the words, whereas legibility is how easy it is to distinguish one letter from another.

Color Constrast

While the obvious choice is black text in front of a white background, a contrast too stark can negatively affect readability, so a dark-gray color on an off-white background is usually better. Light text on a dark background on the other hand helps those reading at night.

Fine-tuning color contrast

Font Shape Contrast

Contrast doesn't apply only to color - it applies to shape and form too. A sans-serif font such as Bodoni 72 shows a clear contrast between the horizontal and vertical strokes, whereas some letters/glyphs in a geometric font like Gotham look similar to one another, so it may be harder to distinguish them from one another (legibility).

High-contrast fonts work well in larger sizes (i.e. headings and subheadings), while low-contrast fonts work better in smaller sizes, making them a good choice for body text. In fact, many fonts designed to be used as body text (Avenir for example) deliberately use lower-contrast letters to allow for easier overall readability.

At a smaller scale (i.e. body text), something like Bodoni 72, which may be more legible, would be nonetheless difficult to read. Gotham would be easier on the eyes.

Serif vs sans-serif fonts

Convey Your Tone Correctly

Match the mood of your design by carefully selecting typefaces. If you’re designing an editorial website for attorneys then you’d want to use a more classical typeface reminiscent of legal documents such as PT Serif, as opposed to something like Avenir, which looks too modern and friendly for the tone you’re trying to convey.

Pick fonts with the right tone

White Space

White space is the empty areas of your design; white space isn't a bad thing, it means that you're giving your design room to breath and not overcrowding it, and when it comes to typography, breaking up your content allows for easier reading. You can do this in two ways:

1. Line-height: as a rule you should choose a line-height between 1.3 and 1.5 for body text, while using a shorter line-height (between 1.1 and 1.3) for headings and larger texts, depending on the typeface you're using.

2. Letter-spacing: this is the space between each letter, as opposed to the space between each line. Like with line-height, you should use your gut instinct and choose a value dependant on the typeface being used. It may seem like an insignificant change, but it can drastically improve the overall readability of text.

Want to learn more about spacing? Here's a terrific article on kerning.

Type Scale

Making use of a type-scale leads to a unified rhythm in your design, making your font sizes look “right”. A type-scale is a number that you multiply to your smallest font-size and keep multiplying it until you get the largest font-size that you’ll use. A great resource to generate type scales is type-scale.com.

Scaling fonts with a type scale

Font-Pairing

If you’re using multiple typefaces, make sure they compliment each other. Generally, fonts with similar x-heights and character-spacings work well together. If you need inspiration, make sure to bookmark Canva’s Ultimate Guide to Font Pairing, which also has a tonne of information about the more advanced aspects of typography.

Tip: Did you know that you can store fonts in Sympli, as well as styles and specs? This makes it easier to handoff fonts to developers alongside your inspectable design!

Conclusion

Typography can make or break a design - these seemingly small tips can drastically increase the effectiveness of the text in your design, complimenting the other aspects of the layout and boosting the readability of the words.