HTML Font Face

You're first temptation when starting to put together a webpage is to pick out a couple of striking fonts and use them to spice up the layout. Unfortunately, display depends on what fonts your visitors have installed on their computers.

This page provides examples and coding for HTM font faces. Listed below are Microsoft's Web Fonts that come with Internet Explorer and tend to be installed on all Windows computers. By default, most browsers will use Times New Roman to display text.

Microsoft Core Web Fonts
Arial face="Arial"
Arial Black face="Arial Black"
Comic Sans MS face="Comic Sans MS"
Courier New face="Courier New"
Georgia face="Georgia"
Times New Roman face="Times New Roman"
Trebuchet MSface="Trebuchet MS"
Verdana face="Verdana"
Windings face="Wingdings"
If you do not see all the font faces above, it means that they are not installed on your computer.

Windows minimum fonts are Arial, Times New Roman, and Courier New. Microsoft's Core Web Fonts includes Andale Mono, Webdings, Trebuchet MS, Georgia, Verdana, Comic, Arial, Arial Black, Impact, Times New Roman and Courier. If you have Microsoft Office or Corel WordPerfect, you find many other fonts installed.

But the real question is whether you really want to turn your page into a ransom note. You're safest best is to stick with one or two fonts for text and headings. Verdana and Georgia are fonts that have been specially design for monitor display, making them easy to read. If you have an office application suite or a word processor installed on your computer, you may have more fonts installed.

If you decide to use a non-standard font, say for a logo or a heading, you will probably have to make a small graphic file and place the text in it.

Be careful of using font faces that are too small. The smallest viable size is 9px (px = pixles). Though anything smaller may appear legible on your screen, the text will be minute on an Apple Mac or a Linux computer. In addition, you have visually impaired people who need to keep font faces large. Avoid using pt (points) to designate size because it does not have any meaning for computer displays.

Warning: if you use px (pixels), the drawback is that users cannot increase the font size. If you user Cascading Style Sheets, you can get around this shortcoming, by using the a smart workaround. See our page on CSS.

Typofile ::: Verdana and Georgia

Microsoft's Web Workshop Typography on the Web

Yale's Web Style Guide has sections on typography, layout considerations and type faces, especially the differences between Windows 95 and Apple Macintosh displays. All about Fonts and More

Other Resources: WebPage Design for Designers - typography ::: Web Type 101, a primer