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.
When you create a web page and specify a particular typeface (loosely called "font" here) for that page using the default method provided by your web editor, the font is not actually 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 web editor like Expression Web or Dreamweaver might insert the following line into the style sheet of your web page:
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 (sometimes called web-safe fonts) and avoid esoteric ones that only few people have.
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:
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.
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.
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.
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 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 and Mac OS X (Mac OS X 10.5 and later, perhaps earlier too) systems, so if a person uses another system that does not have Verdana installed, the next font in the list will probably be used.
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:
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:
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.
Here are answers to questions that I have been asked on this issue in the past.
Not necessarily. I realise that some people, who have taken the trouble to download good looking fonts, want to be able to use them to beautify their site.
One way to make sure a particular non-standard font shows up the same in all computers is to put the text using that font in a picture, and include that image in your web page. However, this is really only useful for decorative purposes, such as for design elements on your web page, or for small snippets of text that you don't really need to be indexed by the search engines. As I mentioned before in my articles on creating search engine friendly websites and ranking well in the search results, search engines cannot "see" pictures, so you should not try to put your entire web page into an image and display that image, just so you can use your favourite fancy font. Your site will not rank well, if at all. Nor will it be usable for visually impaired people who rely on screen readers.
Update: this method is no longer strictly necessary in modern browsers. See the answer to the question below.
Yes, this is now possible in modern browsers. See How to Use Web Fonts: CSS Tutorial for details.
Here's how you can set or change the font used for your site.
See How to Change Fonts, Text Size and Use Bold and Italics in Expression Web if you use Microsoft Expression Web as your editor.
Information about how to change fonts using Dreamweaver can be found in my tutorials:
Please read How to Change Fonts and Customize the Text on Your Web Page with BlueGriffon.
Please see How to Change Fonts and Colours in KompoZer.
Please read How to Change the Font, Text Size, and Colours of Your Web Page with NetObjects Fusion 11
Please see How to Manage and Style Your Text Content in Serif WebPlus X2
If you are still using the obsolete Nvu web editor, read How to Change Fonts in Nvu.
If you're still using the outdated Mozilla Composer web editor, see How to Change Fonts in Mozilla Composer
To set the fonts for your entire document using cascading style sheets ("CSS"), use the font-family property on the "body" selector. For example, if you wanted to set your entire document to use the Arial, Helvetica, sans-serif set of fonts, you can include the following rule in your style sheet:
To selectively set the font for a particular selector, for example, all paragraphs only, just change the font-family property for that selector. For example:
Designing your web page using one of standard lists of fonts mean that your web page will have more or less the same appearance on all computers, regardless of operating system it uses. Although this may mean that you can exercise a little less creativity in the design of your page, given the current state of affairs, it is the constraint that web designers have to work within.
Otherwise you will end up like one of the visitors to thesitewizard.com who designed his site around a free font he found on the Internet only to find that when he accessed the site on another computer, it was displayed using a default browser font.
Copyright © 2008-2019 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
Which Font Should I Use for My Web Page? Tips on Choosing Fonts for Your Website
