Which Font Should I Use for My Web Page?

Tips on Choosing Fonts for Your Website


Which Font Should I Use for My Web Page? Tips on Choosing Fonts for Your Website

by Christopher Heng, thesitewizard.com

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 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 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 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.

  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.

Miscellaneous Questions and Answers

Here are answers to questions that I have been asked on this issue in the past.

How to Change Fonts for Your Website

Here's how you can set or change the font used for your site.

Why Does My Font Not Show When I View My Site on Another Computer?

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-2014 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/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

Which Font Should I Use for My Web Page? Tips on Choosing Fonts for Your Website





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.