Basics and Best Practices of Web Typography

Typography is an integral part of a website. Knowing the basics and best practices of web typography is important to enhance the user experience.

If you were wondering what’s with all the buzz about “good typography” and “bad typography” on a website, then you’ve come to the right place and are reading just the right piece. Let’s change the typeface and see if you can read this bit (no squinting allowed!):

It’s funny how some words in the above text appear to be reading something else (I had a hard time figuring out why “zooming” looked like “rooming”). And clearly, that’s not the only issue with the block of text above.

Now that we have a fair idea about why designers and writers emphasize so much on good typography, we can move on the basics and best practices that would ensure your website’s typography is in the safe zone.

The Basics

Here’s the break-up of your webpage and how each element affects typography.

Headings

The headings are the very first thing your reader will notice. Web users don’t usually read the whole content, but they scan it by reading the headings and sub-headings. Hence, your heading has to grab the attention of your viewers and to do that, it must have a large, readable font. Most designers go with serif typefaces for headings. We’ll discuss more about this later on.

Body

This is usually the crux of any website. In other words, it’s the main section of your page. Once your readers reach this part of your page, your amazing design skills (and of course the quality of the content) will be tested. Some designers stick to a serif typeface in this section, while most choose to go with a sans-serif typeface for their body copy.

Background

Although the background isn’t composed of text characters, it is nonetheless an equally important element in typography. This shouldn’t come to you as a surprise since the background plays a major role in making sure the text in the foreground is readable. A good rule of thumb to follow is to choose a background that has high contrast with the text. This makes the text stand out more. While some prefer the standard black text with white background, others say that the contrast is too high and piercing. For this reason, many websites are now experimenting with a beige background and dark gray text.

Best Practices

Now that the basic elements contributing to the typography on a webpage are covered, let’s move on to the best practices of typography.

Use The Most Readable Typefaces

As we mentioned earlier, the use of serif and sans serif typefaces are most popular because of the fact they are simply the “most readable” types.

Examples of typefaces under sans-serif category that are used most commonly on the web are; Arial, Helvetica, Geneva, Lucinda Sans, and Verdana.

Verdana was specifically created, by a world renowned designer named Matthew Carter, to address the issue of reading on a screen display. Some designers believe that this is the best typeface for websites, while others disagree because of its little aesthetic appeal.

Serif typefaces are usually preferred for print designs since their “tops” and “bottoms” make it easier to follow the text on a tangible paper. These include typefaces such as Times New Roman, Times, Garamond, and Georgia.

Source: www.webdesignerdepot.com/2011/02/eight-ways-to-combine-typefaces

Most designers make use of both serif (for heading) and sans-serif (for body) types on web pages. This has become more like a common practice in web designing.

Avoid Fantasy and Script Typeface

You weren’t the only one that had a hard time reading the fancy block of text in the beginning of the article. No matter how great your eyesight is the script and fantasy typeface are not meant to be used on a webpage. A script typeface may be used on a print material, like a greeting card, but only if the text is short and simple. Examples of script typefaces include Script MT Bold, Brush Script MT, Lucinda Calligraphy, Lucinda Handwriting, and Apple Chancery.

Keep Text Large Enough

Your webpage’s typeface may look great on your computer monitor’s LED display. However, not everyone has that enormous 42 inch screen. Think about someone who’s using a MacBook or any other device with small screen. They won’t be happy about the itty-bitty 10px font. It’s best to keep your font size 11.5px or above. Try not to go below that!

Spacing

The spacing also has to be just right. They all say it’s best to “let your type breath”. Scrunched text with awfully close characters is not advised (on a smaller device they may just overlap).The line spacing should be at least 140% of your text.

The next time you wonder why you couldn’t read the text on a certain website, don’t run off to a doctor to get your eyesight checked! It might just be the designer’s poor choice of typeface. Don’t be that designer yourself and do your client a favor by keeping these tips and tricks in mind. The readers will thank you a bunch – or at least the client will!

Learn More: Typography 101: Kerning (Some Tips and Tricks)