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, 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:
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.
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.
Hopefully not.
I sincerely hope the browser makers have plugged all the security holes that made such drive-by installations possible. Imagine going to a website and having all manner of things automatically installed onto your computer. It used to be one of the methods used by spyware and adware sites to infect computers, forcing many people to install anti-spyware software to protect themselves.
Sure you can. But will they?
Chances are that they will just continue to view your site under some default browser font. In the end, you are better off designing your site around that fact so that your site looks optimal with that font rather than hoping they will download and install your designer font.
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.
The only fail-safe 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.
Here's how you can set or change the font used for your site.
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:
Information about how to change fonts using
Dreamweaver
can be found in my tutorials:
How to Change Font Typefaces, Weight, Style, Colour and Sizes in Dreamweaver CS4 (for CS4 users).
How to Change Fonts and Colours in Dreamweaver CS3 (for CS3 users).
Please see How to Change Fonts and Colours in KompoZer.
Please 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
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 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.
If you find this article useful, please consider making a donation.
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 http://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 this article in whole or part, in any form, without obtaining my written permission.
It will appear on your page as:
Which Font Should I Use for My Web Page? Tips on Choosing Fonts for Your Website
