It's true that preferences for visual appearance vary from person to person, so that one man's meat is another man's poison. However, where web pages are concerned, the range of fonts that webmasters can select for their pages are not as wide as you may think. Even if you were to have a million fonts installed on your computer, you are mostly limited by what your website users have installed on their computers. This article briefly discusses some of the things you should consider when selecting a font face for your website.
Why You May Not Be Able to Use Your Favourite Font
When you create a web page and specify a particular typeface (loosely called "font" here) for that page, the font is not embedded in your web page. All your web editor does is to put a reference to the font into the page. For example, if you create a web page that uses the Comic Sans font, then a modern web editor like Dreamweaver might insert the following line into the style sheet of your web page:
font-family: "Comic Sans" ;
The Comic Sans font itself is not embedded in the web page. If your visitor does not have that particular font, his/her browser will use some other font, even if it does not suit the content and design of your page.
This is the reason why most webmasters choose commonly available typefaces and avoid esoteric ones that only few people have.
Importance of Using Lists of Fonts
When you specify a font for your web page, it is important that you do not just specify a single font, even if it is a font that you think that most people have, like the ubiquitous "Arial" font. If your visitor uses a different type of computer, such as a non-Windows computer, even fonts like Arial may not be available. Cascading Style Sheets, which is the underlying technology used by a web page to control its appearance, allow for web designers to specify a list of fonts to be used on a particular page. If the first font in that list is not available, the browser will try to use the next font specified, and so on.
For example, the fonts used in all of thesitewizard.com's articles, including the one you are reading, are specified as follows:
font-family: Arial, Helvetica, sans-serif ;
This means that if a computer has the Arial font installed, a browser is to use that font to render the pages on the site. Otherwise, it will try to use the Helvetica font. If the latter is also not available, then it should just use any sans serif font it can find.
(For those not familiar with the terminology, "serif" fonts are those that have little hook-like lines at the ends of the main strokes of each character. For example, the Times New Roman font, found in Windows system, is a serif font. "Sans serif" fonts are those without the small hook-like strokes. Well known sans serif typefaces include Arial and Helvetica.)
I chose these three items to place in my list of fonts to use for thesitewizard.com's pages because they are somewhat similar to each other. Or rather, Arial, which is a sort of poor man's version of Helvetica, looks almost the same as Helvetica. This way, I can be sure that if a particular computer only has Helvetica and not Arial, my page will still look more or less the way I intended, and things that I carefully aligned will not go out of alignment which may happen if a fatter or thinner typeface is used.
However, if the user does not have either of these fonts, then all bets are off. The browser can use any other sans serif font it finds on the system. This probably means that on such a system, the appearance of my web page will differ somewhat from my intended design.
Most Commonly-Used Lists of Fonts
In general, if you want to create a web page that looks mostly the same no matter what sort of computer your visitors use, it's best to think of three groups of fonts.
1.
Sans Serif Fonts
Many websites tend to use one of the following series of fonts mainly because most people find the sans serif fonts easier to read on a computer monitor.
*
Arial, Helvetica, sans-serif
As mentioned earlier, this is the combination I use in most of my sites, including thesitewizard.com, thefreecountry.com and howtohaven.com. Arial and Helvetica look very similar to each other, and to the average casual reader, may even be indistinguishable. Between the systems that have the Arial font and those with the Helvetica font, I think this combination basically covers most, if not all, commercially sold operating systems.
Some people prefer the combination "Helvetica, Arial, sans-serif", so that if the Helvetica typeface is available, it will be used in preference to Arial. These people probably have Helvetica installed on their systems and find it preferable to Arial.
*
Verdana, Arial, Helvetica, sans-serif
Verdana looks somewhat like Arial, but is larger, wider and spaces the characters further apart from each other. In theory, this is supposed to improve legibility, but in practice, some people find that it decreases the speed at which they can read a block of text since the bigger spaces between words make it harder for them to visually scan the text.
Verdana is installed by default only on Windows systems, so if a person uses another system that does not have Verdana installed, the next font in the list will probably be used.
2.
Serif Fonts
Although not many sites use serif fonts, since they seem to be harder to read on a computer screen, if such fonts are used, the combination most commonly listed is:
font-family: "Times New Roman", Times, serif ;
3.
Monospace Fonts
Monospace fonts, where the width of every single character is the same regardless of whether the character is a wide one like "w" or a thin one like "i", are commonly used on the web for source code listings. For example, most of the code listings on thesitewizard.com employ the following list:
font-family: "Courier New", Courier, monospace;
In fact, if you look carefully at the list in the box above, you will see that it is rendered using that very series. If you are reading this on Windows, and have not removed the Courier New font, it will be displayed in that typeface.
