Website Developer HTML CSS Flash Tutorial Help Tools Online Editor

tutorials

GUIDE TO FONTS

This tutorial is a guide to the use of fonts in Web pages.

TYPES OF FONT

Here we will look at the types of font available and how to use them on your site.

Cascading Style Sheets (CSS) List the following families of fonts:

serif
sans-serif
fantasy
cursive
monospace

This is serif
This is sans-serif
This is fantasy
This is cursive
This is monospace

It is important to remember that a font will only display if it is available on the user's computer.

I think the best font to use on Web pages is a sans-serif.
I strongly recommend that you AVOID serif fonts.
Serif fonts such as this one look OK in print but, because of the pixel size on the screen, the serifs appear bigger and therefore distorted and difficult to read.

If you want to use an unusual font, the only way to do it is to either create an image file or put it into Flash.

A NOTE ON SEMANTICS

Strictly speaking what are now called fonts are really typefaces. So Times New Roman is a typeface, and the font of the typeface is italic or bold etc. However, the word font tends to be used nowadays to describe what was once called a typeface.

HOW TO USE FONTS IN AN HTML PAGE

I suggest that you do not use the <font> tag.

A better way is to use style sheets.

An HTML page set up with a style sheet may look like this:

<html>
<head>
<style type="text/css">

a:link {
background-color: transparent;
color: #0000ff;
font-weight: bold;
font-family: Verdana,Helvetica,Arial,sans-serif;
font-style: normal;
font-size: 14pt;
text-decoration: underline;}

a:visited {
background-color: transparent;
color: #cc0099;
font-weight: bold;
font-family: Verdana,Helvetica,Arial,sans-serif;
font-style: normal;
font-size: 14pt;
text-decoration: underline;}

a:hover {
background-color: transparent;
color: #ff0000;
font-weight: bold;
font-family: Verdana,Helvetica,Arial,sans-serif;
font-style: normal;
font-size: 14pt;
text-decoration: underline;}

a:active {
background-color: transparent;
color: #ff0000;
font-weight: bold;
font-family: Verdana,Helvetica,Arial,sans-serif;
font-style: normal;
font-size: 14pt;
text-decoration: underline;}

.thebodystyle{
background-color: #ffffe0;
color: #ffd700;
font-size: 12px;
font-family:Critter,Cottonwood,Studz,fantasy;
font-family:Caflisch script,Sanvito,Ex ponto,cursive;
font-family:Everson mono,Prestige,Courier,monospace;
font-family:Baskerville,Garamond,New Century Schoolbook,Times New Roman,serif;
font-family: Verdana,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight:bold;
text-decoration: none;
line-height: normal;
text-align: left;
text-indent: 0%;}

.redtext{
background-color: #ffffe0;
color: #ffd700;
font-size: 12px;
font-family:Critter,Cottonwood,Studz,fantasy;
font-family:Caflisch script,Sanvito,Ex ponto,cursive;
font-family:Everson mono,Prestige,Courier,monospace;
font-family:Baskerville,Garamond,New Century Schoolbook,Times New Roman,serif;
font-family: Verdana,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight:bold;
text-decoration: none;
line-height: normal;
text-align: left;
text-indent: 0%;}

</style>
</head>

<body>

<div class=thebodystyle>
This is the bodystyle.
</div>

<div class=redtext>
This is red text.
</div>

</body>
</html>

and the output looks like this:

This is bodystyle.

This is red text.

You can use the CSS Designer/Editor in the TOOLS section to test you own styles. (Works in IE only.)

SOME PAGE DESIGN GUIDELINES

It is a good design rule to USE AS FEW FONTS AS POSSIBLE when doing a page. Ideally, only one font should be used, possibly two (one for titles and one for the main text) but never more than two unless you have a really good reason to do so. (This web page contains examples of several fonts but there is an obvious reason for that.)

A dark color on a light background is to be preferred.
Light colors on dark backgrounds might make design statements but do not make for easy reading!!!

Leave a margin at the sides of the screen. Most people find reading right across the screen tiresome.

WHERE TO GET FONTS

You can get fonts at several sites. There are free fonts available but the better ones cost money.
SIMPLY THE BEST
CORE

FONT TOOLS

THE FONT THING is a font cataloguer.
TWISTER is a font distorter.
COOL3D is a 3d creator.

HOW TO MAKE YOUR OWN FONTS

FONT CREATOR
CHANK
ANDREW
VINTERSTILLE

COLORS

Try to make your colors match!
COLOR IMPACT
COLOR SCHEMER

FLASH FONTS

To look at its best, you need special fonts with Flash because Flash tends to blur ordinary fonts.
PIXEL FONT CONVERTER
FONTS FOR FLASH