| Fonts for the World Wide Web | back to Teachers Page |
or…
"Do you really think everybody is going to enjoy that lovely web page you've just designed using Uncle Stinky Bold?"
A typeface specified in a web page relies on the corresponding font file being installed on the users computer in order to be displayed.
If you use a platform specific font in your web pages, e.g. Chicago, which is only available for the Macintosh, the text will be displayed in the web browsers default font when viewed on any other computer platform, e.g.Windows, Linux, Unix. This is easily done if using non-webdesign software such as Microsoft Word to export web pages.
Unless altered by the user, the default font in Internet Explorer is 'Times New Roman'.
There is only a limited common set of fonts which we can rely on to be installed on all Macs and PC's.
These fonts, shown below, are deemed to be "Web-Safe".
If you use these fonts it is highly likely that the user will see your
web page as you intend it to appear. The fonts are pre-installed on all
Mac and Windows computers. The fonts below are displayed at their default
size - no HTML 'font size' tag added. Use your browsers "Text Zoom"
function to see what they look like at larger or smaller sizes
Recommended fonts for body text...
... for best on screen legibility, especially at small point sizes, are Verdana, as used in this text, and Georgia, as used in the rest of this paragraph, both of which were specifically designed for on screen rather than print use, and have a large x-height relative to the lengths of their ascenders and descenders. Verdana also has particularly generous letter and line spacing.
The widely used Arial (sans serif) and Times New Roman (serif) were both designed prior to the arrival of the WWW, and are less legible at small point sizes. Arial is particularly problematic because of its tight letter and line spacing. Use of a CSS style sheet to open up the linespacing is advised. An attractive more condensed alternative to Verdana, though not quite as good at very small point sizes, is Trebuchet MS
And the advice is...
Once you have chosen a combination of background colour, fonts, font colour for titles and body text that you are happy with, use it on all your pages.
Define a series of styles, and then save to an eternal stylesheet file (e.g mystyles.css) in your web site folder. This may then be attached to all your webpages. See your web page editor manual on how to do this. In Dreamweaver use the popup menu in the top right corner of the "CSS Styles" panel. 'Redefining' the 'body' tag is particularly useful - a basic text format, eg 10pt Georgia, green, with extra linespacing, can be established for the entire page (this can be over ridden with locally applied tags). Saves a lot of time, as the combinations of attributes (font. size. colour etc.) will then not have to be repeatedly applied to each block of text.
A consistent appearance gives the user an easier 'browsing experience', and helps to establish the 'identity' of your website. The 'green' pages of the St. Peters website use this stylesheet technique.
Text as graphics
If you wish to use a non web-safe font for a title or heading (or need to display a complex mathematical or scientific formula), you should set the text using a graphics program (e.g. Photoshop, ImageReady, Fireworks or PaintShop Pro) and fill the background layer of the image with the same colour as the backgound of web page for which it is intended. Copy the hexadecimal colour value from the HTML code of the web pages "bgcolour" attribute. e.g. At the top of the St Peters home page, which defines the page colour as a pure dark green:-
<body bgcolor="#006600" text="#FFFF33"
006600 can be transferred (typed or pasted) to the HTML colour picker in your graphics program. The number is composed of 3 eight bit hexadecimal numbers for the Red, Green and Blue colour channels, so in the above we have 00 Red, 66 Green and 00 Blue.
Ensure that you have anti-aliasing (smoothing) enabled for text in your graphics program. Crop close to the text, then Save as (or "Save for Web") a GIF image into your web site folder. Before saving, reduce the default 256 GIF colour table to 8 colours (any fewer and the text will start to look 'jaggy') for mono-coloured text on a mono-colour background. This will greatly reduce the file size.
 |
The caption to the left was produced in Photoshop using a font called "Da Vinci", which is based on Leonardo's handwriting, flipped left to right. The image is an 8 colour GIF, weighing in at a very reasonable 3Kb file size. Try resting your cursor over the image. |
The Web-safe Fonts
This is Arial
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Arial Bold
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Arial Italic
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Arial Bold Italic
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Arial Black
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Comic Sans
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Comic Sans
Bold
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Courier New
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Courier New
Bold
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Courier New
Italic
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Courier New Bold Italic
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Georgia
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Georgia Bold
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Georgia Italic
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Georgia Bold Italic
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Impact
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
good for large captions
requiring impact - do not use for body text!
This is Times New Roman
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Times
New Roman Bold
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Times
New Roman Italic
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Times New Roman Bold Italic
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Trebuchet
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Trebuchet
Bold
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Trebuchet
Italic
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Trebuchet Bold Italic
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Verdana
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Verdana Bold
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Verdana Italic
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Verdana Bold Italic
The Quick Brown Fox jumped over a Lazy Dog
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890
This is Webdings (size =7)
!"#$%&'()*+,/0
123456789:;<=>
?@ABCDEFGHIJKL
MNOPQRSTUVWXYZ[
\]^_`abcdefghi
jklmnopqrstuvw
xyz{|}~ÄÅÇÉÑÖÜ
áàâäãåçéèêëíìî
ïñóòôöõúùûü†°¢
£§•¶ß®©™´¨∫ÆØ∞
±≤≥¥µ∂∑∏π∫Ωæø¿
¡¬√ƒ≈Δ«»…ÀÃÕŒœ–
—“”‘’÷◊ÿŸ⁄€‹›
‡·‚„‰ÂÊÁËÈÍÎ
ÏÌÓÔÒÚÛÙˆ˜¯
¸
Style sheet used in this page
This page uses the following style sheet to control the appearance of text. You can copy and paste the entire stylesheet from below to the 'head' section of your own web page html code, or either or both individual styles to your own external style sheet.
<style type="text/css">
<!--
.VerdanaBodyText {
font-family: Verdana;
font-size: 10pt;
}
.GeorgiaBodyText {
font-family: Georgia;
font-size: 10pt;
line-height: 14pt
}
-->
</style>
The styles "VerdanaBodyText" and "GeorgiaBodyText" will then appear in the "CSS Styles" palette in Dreamweaver, and may be applied to objects (i.e. text selections, paragraphs, tables, table cells, etc.) selected in the Layout window by clicking the style name in the CSS Styles palette.