intro | design software | page elements | site structure | measurements | fonts | images | colours | layout | tables | templates

the studyzone | web design | course tasks: 1 | 2 | 3

the basic principles

fonts

font types

If you want your pages to appear as you designed them on everyone's computers you have to use fonts that they will have available. Just because you have a particular font doesn't mean that a visitor, especially one who doesn't use the same version of Windows, who uses Mac or other operating systems or who is in another country, will have it.

There are only a few that you can use with any degree of certainty. The official list is shown in the panel.

Although symbols and things like Wingdings feature in both operating systems, they will only be shown correctly in Internet Explorer. Other browsers will display a substitute font, usually not what you will want.

font sizes

There are many ways to set the size of text on a web page. The best choices are units which enable a visitor to adjust the size of text to suit their own preference. Browsers have an important facility to increase or decrease text size but this will usually not work if you use fixed sizes like points (the unit you'll be familiar with in Office-type applications) or pixels.

The best units are percentages and ems. These can be adapted by a user. Understanding and setting these, though, can require more advanced skills and the range offered by Dreamweaver MX by default is an acceptable and simple way to start. These are sizes 1 to 7. 1 is very small. 7 is very large.

Later versions may offer CSS sizes from xx-small, x-small, small, medium, large, x-large, xx-large. Although not the same as sizes 1 to 7 they are scalable and an acceptable method of sizing text.

the defaults

If you don't set a font style or size then users will get whatever their browsers offer by default. This will often be Times New Roman in a size that may appear a bit larger than you would normally want, I expect.

You may find that much of your initial work will appear in that style and size until you start making adjustments.

Windows Mac Font family
Arial Arial, Helvetica sans-serif
Arial Black Arial Black, Gadget sans-serif
Comic Sans MS Comic Sans MS cursive
Courier New Courier New monospace
Georgia Georgia serif
Impact Impact, Charcoal sans-serif
Lucida Console Monaco monospace
Lucida Sans Unicode Lucida Grande sans-serif
Palatino Linotype, Book Antiqua Palatino serif
Tahoma Geneva sans-serif
Times New Roman Times serif
Trebuchet MS Helvetica sans-serif
Verdana Verdana, Geneva sans-serif
     

For further information, this link has a full description of how fonts work across operating systems and browsers. At this link is an interesting description of font frequency and size.

size 1

size 2

size 3

size 4

size 5

size 6

size 7

If you want to see exactly how font sizes, browsers and monitor resolutions interact then this link has a very detailed (but heavy going!) explanation.