When I first started using an Apple II computer many years ago, there was no such thing as a choice of fonts. There was one font and only one font. Of course, that was also before the web. Today we have hundreds if not thousands of different fonts to choose from, not only for our web pages, but for use in other applications such as word processors, presentation applications, and even data reporting applications. With so many fonts available, how do you choose the right one for your web page or document?

First, let’s narrow down our choices a bit by dividing the font universe into major categories. I usually start by separating the script-style fonts from the non-script fonts. Script fonts are any that have the appearance of handwriting. The figure below shows just three of the many script fonts that I have on my computer. Your computer may have these or other script-style fonts.

These scripts may be perfect if you are creating invitations to your next party and you want the text to appear as if you hand-wrote the invitation. However, I generally do not recommend script-style fonts for web pages because they may be difficult for some people to read.

Next are the non-script fonts. Here, I divide the hundreds of fonts between those that are called serif fonts and those called non-serif fonts. What is a serif font? A serif has a small extra stroke found at the end of the main vertical and horizontal strokes of some letters. Some serifs are subtle, and others are pronounced and obvious. Many people believe that serifs aid in the readability of text as they encourage the eye to move horizontally across the line. In fact, most books that you pick up at your local bookstore or library use a serif font for their text. That is even true of many magazines and newspapers. But you may find exceptions. Here are three common examples.

These three fonts are among the most commonly used serif fonts with Times New Roman being the default serif font used on many websites. Perhaps this is a good time to introduce another font characteristic, monospaced vs proportionally spaced fonts. A monospace font uses the exact same character width for every character from the letter ‘i’ to ‘w’. You might think of manual typewriters which used a monospace font that looked very similar to the Courier New font shown above. Don’t remember manual typewriters? That’s okay. Monospaced fonts made it very easy to align columns by hitting the spacebar to align text on a new line under the text of a prior line. This made typing tables a matter of just hitting the spacebar enough times to move from one column to the next.

On the other hand, a proportional font like Times New Roman or Georgia uses a different amount of space for letters such as ‘i’ and ‘w’. This also means that the width of a space is different from most characters. If you try to build a table the old way by hitting the spacebar to align text into columns, you not only will not get it exactly right, but if a user renders your web page on a computer that does not have exactly the same font and font definition, the vertical alignment will become jagged. That is why information that must appear in columns on a web page is best achieved by inserting a table with columns and rows on a web page even if the table frame is hidden (transparent).

There is however a place for Courier New font or another monospace font such as Consolas which is a sans-serif monospaced font. If you need to display program code within a web page, I find it easier to read the code in a monospaced font.

I just used the term sans-serif in the prior paragraph. What does sans-serif mean? ‘Sans’ means ‘without’. Therefore a sans-serif font means a font that is without serifs on their characters. Some common examples of sans-serif fonts are shown in this figure.

Just like a serif font uses serifs to help the eye move across the eye across the line of text, a sans-serif font forces the eye to slow down. Therefore, sans-serif fonts are often used for titles, headers, and other places where you want the reader to slow down and read the text carefully. However, I’ve also seen the use of sans-serif fonts on entire websites. This may work because in general, a web page does not have the quantity of text that a book, newspaper, or magazine has. In addition, you generally do not read a web page in the same way as you might read a book.

Finally, there are the fancy fonts. These fonts are not quite the same as script-style fonts although some may have script characteristics. They also may or may not have serifs. Their primary purpose, however, is to call attention to perhaps a title or individual words on a page or an image. But they should never be used as the default font for the entire page or website. The following figure shows a selection of fancy fonts starting with the most infamous fancy font, Comic Sans Serif. This font was released by Microsoft Corporation in the mid-1990s and was inspired by comic book lettering. It is a non-connected script according to some and does not have serifs on characters.

I’m sure that you can imagine how hard it would be to read an entire webpage consisting of Snap ITC or Ravie font. I would strongly recommend restricting these to use in images such as those to promote events in which the text must also appear in the alt-text of the image. While I’ve seen a web page in which the entire text on the page used Comic Sans Serif because the page creator thought that it was such a ‘cool’ font or intended the page to be for children only, I believe that the use of fancy fonts in general for all the page’s text detracts from its readability.

Next week, I’ll dive deeper into the use of fonts. Until then, have a good week.