Fonts For Web Design: a Primer

When designing websites, we’ve moved away from using default fonts, towards an age where the font is deliberately chosen to support the design and content on the website. A font can also have a profound effect on the readability and accessibility of a site.

In some cases, using the wrong font could land you with a legal bill, or create unexpected problems with your layout.

How do you select the correct font for your website, and how can you avoid the pitfalls? Here’s a brief history of the font as used in web design.

Serif vs Sans-Serif… on the Web

We use the word “font” to describe the shape and form of characters that display text on a web page. Technically, the font is actually the computer software that tells your computer how to display a particular typeface. We’ll stick to the word “font” to make things simple in this article.

Serif fonts, such as Times New Roman, have small curls attached to the edges of individual characters. Sans-serif fonts, like Helvetica, do not.

Serif fonts are generally accepted to be better than sans-serif fonts for printed text, because they make each letter appear unique, and therefore make reading faster and easier. Studies suggest that readers can scan horizontally much more quickly when serif fonts are used.

But despite the readability advantage of serif fonts, there are some very valid reasons to choose sans-serif fonts for the web. At small sizes, sans-serif is more readable on-screen; serif fonts tend to degrade when displayed at smaller sizes, and the resolution and backlighting on a computer screen both contribute to that.

So if your website body copy is small, that’s one reason to go with sans-serif.

CSS and Fonts

When the World Wide Web was in its infancy, Times New Roman was frequently the default font used to display web pages. Times New Roman is derived from the font used to print the British daily newspaper The Times for much of the 20th century, and it was the default serif font on Windows computers for many years.

When Cascading Style Sheets (CSS) entered usage in the late 1990s, it changed the way we used fonts. CSS separates the style of a webpage from its content, and allowed designers to specify a default font, and, optionally, a family of fonts that could be used as alternatives. This included the ability to simply choose a generic family: serif, sans-serif, cursive, fantasy, or monospace.

In 1996, Microsoft attempted to standardize the fonts that could be used on the web. Its Core Fonts For the Web project was shelved after problems appeared regarding font licensing, but there was a clear need for more choice and a more consistent way to display fonts.

Font Licensing

The legal technicalities of fonts are complex. There are two different categories: scalable and bitmap fonts. Most of the fonts we use today are scalable, but it’s important to understand the laws that apply to each category.

A bitmapped font, like a typeface, is not protected by copyright in US law. But scalable fonts have the same copyright protection as computer software, despite the fact that the actual shape of the characters is not copyrighted.

To complicate things further, typefaces are protected by copyright in some parts of the world.

Many fonts are distributed under a free licence, which allows unrestricted use of that font. But other fonts have to be paid for, and the owner of the font will typically restrict each license holder to using the font on a maximum number of computers.

This complicated legal approach to typefaces and fonts presents a problem for web designers. They want to use fonts creatively, and they want greater choice, but purchasing and licensing a font specifically for a website is a costly and complicated affair.

For practicality and efficiency, most web designers had to stick to the 5 generic font families provided in the CSS 1 and CSS 2 specification. They were already present on most users’ machines, and could be used without restriction. But the default font families were not always the most aesthetically pleasing fonts to use. What’s more, it was boring to see the same fonts used on most websites.

Enter Google Fonts

Starting with CSS 3, designers could import their own choices of fonts by importing them through the style sheet. This meant that web designers were no longer forced to consider the fonts installed on the end user’s device, and could dip into vast font libraries, with the confidence that the fonts would render correctly.

Various services allowed web designers to import fonts into their websites. Services like Typekit charged a fee for a premium selection of fonts, while Google Fonts offered an (arguably) more basic selection of fonts for free.

This made creative typography a possibility for the first time, while also bypassing any complicated licensing requirements. With web fonts, there was no chance of the chosen font being missing on the user’s computer.

Accessibility Considerations

When designing a website, you should make sure that visitors with vision impairments can easily read your content. This is good practice, and in many countries, it’s the law. In addition, it also makes good business sense to ensure your website can be used by everyone who visits.

The font you select, and the colors you use both have an impact on legibility and accessibility.

Generally, sans-serif fonts are easier for people with visual impairments to read. Additionally, sans-serif fonts tend to help people with reading impairments, such as dyslexia, to read and digest the information.

Even more important, consider the contrast of the font color against the background. High contrast is always desirable. As a simple test, take a screenshot of your page and convert it to grayscale to see whether the content is still easy to read.

Aside from the choice and color of the font, there are some other best practice guidelines you can follow:

• Use a clear heading structure (h1, h2, etc), and don’t go deeper than h3;
• Avoid overlapping text onto a picture; resize your browser window to make sure this isn’t happening by accident;
• Don’t use capital letters excessively; ALL CAPS ARE HARDER TO READ;
• Use CSS to increase line spacing to make your content more readable;
• Avoid full justification; justify only to the left.

Further Reading

• A Brief History of Times New Roman: read this fascinating history of one of the most commonly used fonts on the Web.
• CSS Font Properties: a simple guide on using specific and generic fonts in CSS.
• Web Font Services: a list of all of the web font services in existence, in addition to Google Fonts and Typekit.
• Typefaces for Dyslexia: further reading about on-screen fonts for people with reading impairments
• Typography for Visually Impaired People: a reference PDF from the Royal National Institute for the Blind (RNIB).

Summary

Using fonts on the web is a huge subject. But you should be on your way to mastering the subject with this introduction and the references we’ve provided.