Typefaces and Fonts for Your Website

by Joelle Steele

Being able to select from thousands of typefaces is great, but selecting the right ones for your website is another story entirely. Most people tend to select way too many typefaces for their websites, and all too often at least one of them is almost unreadable. So, here’s a look at what typefaces are and how to select and use them on your website.

Typeface v. Font

While the words “font” and “typeface” are used interchangeably these days, there is actually a difference. The typeface is the design itself, such as Arial, Times Roman, Galleria, Helvetica, Imago, etc. The font is the collection of variations within each typeface design, such as bold, italic, bold italic, and normal. But there can be many more. For example, the font collection for the Garamond typeface might include such variations as Garamond Bold, Garamond Narrow, Garamond Light, Garamond Small Caps, Garamond Italic, Garamond Wide, Garamond Extended, Garamond Bold Italic, etc. The number of font variations allows you to select a single typeface for your website — which makes for good design — and then use those variations to provide variety to your chosen typeface.

Serif and Sans-Serif

Typefaces are defined by whether they have small horizontal or curved lines at the tops or bottoms of the vertical lines in a letter. The ones with the lines are called “serif,” and the ones without the lines are called “sans-serif” (sans is French meaning “without”). Arial and Helvetica are sans-serif, while Times Roman and Garamond are serif typefaces. The typeface Verdana is called a “humanist” typeface. There are other humanist typefaces, but Verdana comes loaded with most PCs and is the most widely-used typeface on the Internet — and with good reason: It was designed specifically to be read on a computer screen and is the most readable typeface, particularly for articles and large blocks of content. It has the clean lines of a sans-serif typeface with just a tiny bit of serif in its letters.

Font Sizes

Typefaces are usually measured in “points,” but in websites, typefaces are best designated in pixels (although ems and percent are also good choices in some cases). A 10pt typeface is roughly equivalent to 13px; 12pt is equal to 16px, 14pt to 19px, 16pt to 22px, etc. When you specify typeface sizes in your style sheets, remember NOT to put a space between the 13 and the px.

Typesetting Websites

It may be tempting to want to use some beautiful old typefaces or some “fancy fonts” on your website. But, while many computer users have lots of typefaces loaded on their computers these days, there are still many others who do not, especially people using hand-held devices with limited storage capacity. In order for your typeface choices to show up on your website visitors’ computers, they have to have your typefaces loaded on their systems. Since this might not always be possible, and since the results can be disastrous and completely unreadable if they do not, it is best to stick with some typefaces that are on almost every computer, such as Times Roman, Verdana, Trebuchet, or Arial. If you want to use some fancy fonts in banners or headlines, make the banner or headlines in a program such as Illustrator or Photoshop and then import them into your Web design software as graphic images in .gif or .jpg format. That is how you get around the problem of a visitor not having your chosen typefaces on their machine.

In general, and whenever in doubt, keep your website typesetting simple to ensure that the typefaces you use in your Web design will be both attractive and, most importantly, easy to read.

This article last updated: 09/27/2013.