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.