Are Your Fonts Always Welcome

No!

Graphic designers have an unlimited library of fonts but web designers have about twenty. The reason that your library has been vastly reduced is because the fonts you use, need to be on all of your users’ computers and there are very few fonts that are common to all computers.

Although you can embed a particular font into a page it is not recommended. Before embedding a font you need to be sure that the font is copyright free which is not the case for the majority of fonts. More information about embedding fonts can be found at:
http://www.ssi-developer.net/design/embed-font.shtml There are now subscription-based services from companies such as http://typekit.com that for a fee allow font linking but I will get to that in another article.

Fonts Embedded into Images:

For your banners and other design elements where it is necessary to use a particular font you need to embed that font into an image.

Serifs / Sans Serifs:

Your library of fonts is further reduced because most text on the web needs to be sans serif. Although it is easier to read serif typeface in print it is harder to read it on a screen.

Serifs If your fonts are 16px or under then you need to use sans serifs. Once you use sans serifs for the majority of your copy you will need to use sans serifs for your titles and headers because from a design perspective you should not be mixing your fonts.

Font Sizes

You can select the size of fonts either with pixels, points or ems. Points are not suitable for the web. Pixels are frequently used for the web but they do not resize in Internet Explorer. Some users like to have the ability of resizing the text. Ems allows all of your text to be resized proportionately.

You need to set up the base font size in your CSS. The default font on most browsers is set to medium which is 16px. The math will be easier for you if you set the base font to 10px.

First you need to set the base font in your CSS to a percentage.
10px is 62.50% of 16px the body in your CSS would look like this:
body{
font-size: 62.50%;
}

Now lets set up the rest of you font size in ems. Base on how we just set up the body font size in the CSS 1em is equal to 10 pixels.

h1{
font-size: 1.8em;
}
#menu{
font-size: .1em;
}

#content{
font-size: 1.2em;
}

You need to experiment a bit to find the sizes that work for you or you can use:
Type Tester www.typetester.org
Which allows you to select in various font values and then gives you the result of those values.

Which Fonts to Use

Common Fonts

The following fonts, each shown at 20px are common to almost
all computers.

FONT FACE

Six sans serif fonts that work very well for the web are:
Arial,
Comic Sans MS
Helvetica
Trebuchet MS
Verdana, which was designed for the web

Serif
Georgia
Georgia was also designed for the web but its best not to use it under 16px.

You would list their values in your CSS as follows:
.content{
font-family: Arial, Helvetica, san-serif;
font-weight: normal;
font-style: normal;
font-size: .9em;
line-height: normal;
text-decoration: none; text-indent: 0px;
word-spacing: normal;
color: #333;
}

The Selector:

You need to use a selector which will identify which element(s) in the web page will be affected by a particular style. The selector can either identify the style element by specific tags, class or id.
You CSS could have:
p{
font-size: 20px;
}
Now everytime you use the paragraph tag your text will be 20px;
You can also redefine the heading tags
for example:
h4{
color: #fff;
}
Now all of your text between the h4 tags will be white.

Div

When you want to affect a large section of text you can use a “div” tag. The “div” is a block tag.

Span:

When you want to affect a word or a few words then you use the “span” tag. The “span” in an inline tag.

Specific Tags:

Instead of naming the selector you can use a specific tag such as body, p, etc and use it as the selector for example:
body{
then your styles
}

Font Family

To match the font name, the user’s browser uses an available font that has the same family name that is on the users computer. The font’s appearance and metrics might not be the same. In this case, the user’s computer uses an available font that is the closest match in appearance to the requested font.

In order to get a closer match you just list a series of fonts that are similar to each other in height and width in the hope that one of them is on the user’s computer. For instance with the CSS listed above, if the user’s computer does not have Arial then it will display Helvetica if it does not have either it will display another sans-serif font that is close in appearance to Arial or Helvetica (these two fonts are very close to each other in appearance, their width is almost the same.

Even though the browser tries to match the font you still need to list fonts that you believe to be on the majority of computers or the results could be a disaster.

Line Height:

Line height controls the leading. Leading is the extra space between lines of text above and beyond the font’s size. We have 100% in the example above, in which case you could just leave it out. Leading is normally 1.2 the size of the font.

Font Weight:

It can be normal, bold, bolder or you can give it a numeral value 100, 200 and up. I have not found the numeral values to work well. Bold does not normally work on font sizes that are under 11pxs.

Color:

It is best if you only use Web Colors (216) or Web Smart colors (4096). You only need to use 3 digits for the hex number. For example for the color red which is #ff0000, you can only have to write the first digit of each two digits: FF 00 00 can be expressed a #F00. If the color is not represented by a number that is listed as pairs then it is not a Web Safe or Web Smart color.

Text Decoration:

None, underline, overline, line-through

Text Align

Left, center, right, justify. Text on screen should not be justified or centered it is harder to read.

Font Variant

Either normal or small caps (small-caps) for lower case characters.

Font Stretch

The font stretch indicates the desired amount of condensing or expansion in the glyphs used to render the text, relative to other fonts in the same font family.