Font Selection When Designing Web Pages

There are two basic kinds of fonts - serif   and   sans serif

Serif fonts have small lines on the end of characters.  Sans serif fonts have no lines.  Below are examples of serif and non serif fonts.




What kind of font type should be used on a web page?

Go to the  web sites of the following large companies and check out the font that font did the web site developers choose - Serif or Sans Serif

Canadian Broadcasting Corporation (CBC)


Microsoft Corporation

Air Canada

It should be Arial, a Sans Serif font.  Try other web sites of large corporations.  You should find these also use a sans serif font.


Print (Paper) Medium
Pick up a newspaper - Reach for a novel from your bookshelf - Examine five books on your bookshelf.

What is the prevalent font type - serif or sans serif?  You should find it is a serif font, probably Times Roman.


What the "Experts" say.

Sans Serifs fonts are easier to read on a computer screen, so web pages should be written using a sans serif font.  Arial is the preferred font.

Serif fonts are easier to read in printed materials such as books, magazines, etc.


Suggested Fonts

I recommend the Arial font for your web page.  A primary grade level web page can look good in Comic Sans.

Do not choose a variety of fonts for your web page or web site - you may find that users do not have your chosen fonts on their system and what you feel is an wonderful font, may be indecipherable on another computer.  Most users have Arial font installed so if you use this one, then you are almost certain they will view your page as you designed it.


How to change your font on your web page

With some web page editors, the font on your editing screen may appear to be sans serif, but when you preview your page, it is displayed in a serif font.

To change all your font to a sans serif font:

Open your web page in your web page editor.

Hold down the Ctrl key and press the letter A  (Ctrl -A) - this selects all the text on your page.

Change the Sans Serif font by selecting one from the drop down font list on the toolbar in your editor.

Warning:  If, after changing your font to Arial, you add some more text, preview your page to ensure that the new text maintains your selected font.  Sometimes it will revert back to the default font.