Make sure that you don't miss out on anyone of your potential audience with these web typography tips.

As content creators, we all want people to stay to read what we’ve written. Yet I’ve seen many web typography oversights that make an otherwise graceful copy so frustrating and difficult to read. That’s why in this post, I’ll be uncovering 5 web typography tips to entice your website readers to stay longer.

Why web typography matters

Typography is one of the first web design elements that your visitors see

This is the undeniable fact. Your site visitors see your web typography all the time. Web typography can be the difference between a visitor leaving your site in 10 seconds, and someone intrigued enough to browse your whole blog archive, begging to read more.

Since web typography shapes a visitor’s first impression, why don’t we make the most out of it? In this day and age, people have so much content to consume. We, as website owners, writers, designers, don’t need to give them more reasons to click away.

So you may have heard that people’s attention span have plummeted, that no one reads any more etc. That may be partly true, but how can anyone focus on reading when websites bombard them with dozens of messages on the side bar, popup, push notifications etc?

Regardless of what you have heard, people still read content on the web. Even if you’re not a typographer or web designer, as long as you create content, you want to give readers reasons to read your content, do you?

Good web typography promotes legibility and readability

Web typography is more than pairing fonts like a pro. Actually, the very purpose of typography is to arrange type to promote reading.

Essentially, a person’s reading experience is determined by two factors: legibility and readability. These two terms are often used interchangeably, but there’s a difference between them.

Legibility measures the ability to decipher something. If you look at something and can’t make sense of it, then it has poor legibility.

On the other hand, readability measures how much a person wants to read. Your website copy may be perfectly legible, but is it appealing enough to invite people to continue reading?

unreadable web typography
Unfortunate line length

Above is a random web copy I came across. It uses a familiar typeface, reasonable font size and clear hierarchy, but in the end, I don’t want to read it. Each line is spaghetti long and after the first paragraph, I clicked away.

As you can see, legibility and readability goes hand in hand. You can’t have one without another. Luckily, you can raise the readability of your web copy with these five web typography tips. Let’s dive in.

Tip 1: Use serif typefaces for your body copy

There’s a reason why Times New Roman is the default font in Microsoft Word, why most high-profile news site use serif types for the body of their articles, and why you’ll never see a book typeset in sans-serif.

Indeed, it has long been believed that serifs are slightly more legible than sans-serifs due to the little feet that provide extra detail. For example, the serifs make it easy to see the difference between an l and an i.

web typography tips–serif vs sans serif
Which paragraph do you find easier to read?

But hey, that’s not a die-had rule. There are studies supporting the belief that serifs enhance legibility, but at the same time they also observed that the legibility increase is tiny.

By the way, I should mention that not serifs are born equal. There are four major categories of serifs, and not all of them are suitable as body text, such as Slab Serifs and Modern . You can read more about serif classification here.

Moreover, the popularity of serifs as body copy typefaces dates back to the old time when books were written in florid proses, and there weren’t many types to choose from.

The case for sans-serif

Nowadays, stories have become generally shorter, especially on the web, and there are many contemporary sans-serif designed with long-form reading in mind. On lower-resolution displays, sans-serifs tend to display better. However, higher-resolution displays can better handle the fine details of serifs, and the world is only going to lean more on high-resolution devices.

Given those points, serifs or sans-serifs? That’s such a hard call. However, there are so many typefaces nowadays that I don’t think it has to be an either or proposition.

Ultimately, it is up to you. Using an Old Style or Transitional typeface like Garamond, Sabon, Baskerville is a safe bet, but you can also experiment with some contemporary sans-serifs. Just make sure that they have large x-heights and wide counterspaces.

If you find yourself going “Huh? I don’t know how to tell a good typeface”, don’t worry. Click on the image below to opt in and receive my free guide to the top 30 Google fonts.

web typography tips–Top 30 Google fonts
Feeling overwhelmed? Opt in to receive my FREE guide to the top 30 Google fonts.

Tip 2: Use medium weight types

I’ve noticed a lot of blogs that I visited used light types, and it was such a pain to read. Lightweight types may look elegant and trendy, but imagining how hard your eyes will have to work when reading a 2000-word article in that sinewy type.

Similarly, a heavy type will also make it harder to differentiate between similar letters, thereby reducing the legibility of the text. What we want is medium-weight type, and you can tell if their names contain words such as “normal”, “roman”.

typography tips—too light vs too heavy

Tip 3: Pay attention to leading

In typography terms, leading is simply the vertical spacing between two lines of text. It’s an important factor affecting the legibility of your written content.

Tight line spacing is obviously uncomfortable, but you should also avoid using too loose spacing. Some people probably think that will allow readers’ eyes to rest, but in face the eyes will have to work harder to jump from one line to the next.

typography tips—too tight vs too loose line spacing

To target the leading of a certain part of your website copy, apply the CSS property line-spacing to the class that contains. Even so, how much leading is appropriate? How do you make sure that the readers’ eyes continue to move along the line rather than tempted to wander down the page? Here are some considerations:

Characteristics of the types

Typefaces with low x-height like Avenir can get away with relatively less leading. Typefaces with high x-height require a bit extra leading.

typography tips—leading for low x-height vs large x-height.

There should be enough space between the lines so that the letters aren’t touching, plus a little more.

Text color versus background color

typography tips—Leading for white text against black background

If you set your text white against a dark background, you need to increase the leading. Otherwise, the highlight effect from the white text will make your website copy very hard to read.

Less leading for display type

With display type, you can achieve more impact by using negative leading. Auto leading can fail miserably in situations like this.

typography tips—negative leading
Notice how the the headline on the right is much more commanding?

Less leading for all caps

When you have headlines set in all uppercase, they can benefit from negative leading. Because the type has no part of the letters that dip beneath the baseline, the whole line will look too far apart when using auto leading or positive leading.

typography tips—negative leading for uppercase

Tip 4: Line length matters

I can go on and on about web typography tips, but if you can only remember one rule, then this it it.

Line length is a vastly overlooked legibility factor. If there are too many words per line, the eyes have a long way to travel back and forth to find the beginning of the next line. Too few words is also a bad idea, because the lines have to jump lines frequently, and that’s tiring.

typography tips—line length

With this in mind, a good rule of thumb is 52 to 70 characters per line, or you can go up to 75. In CSS, you can set max-width on a class that wraps the paragraph instead of setting a max-width value of the paragraph itself. The code will look something like this:

Tip 5: High contrast makes for easy reading

Lightening or colorizing the text, or darkening or colorizing the background will make it harder to see the letterforms. Any texture or image behind the type will also impair its legibility. I know I know, gradient is cool, but please use it sparingly.

Studies have shown that readers experience a slightly disturbing sparkle effect when white type or light type is on a dark or black background. You can go to all the esteemed publishing platform, newspapers etc and see that they always use black text over white background.


A wrap-up

And that’s it. Good design gives you and edge, and 80% of design is typography. There are a lot more rules when it comes to typography but if you apply those web typography tips I outlined above, you’ve got a great head start.

Do you have any other web typography tips that I overlook? Please share your lessons, frustrations, advice, observations, examples via comments below.

Stay inspired. Subscribe to my infrequent newsletters.(You won't regret it).

Leave a Reply

Your email address will not be published. Required fields are marked *