Lesson Three

The type of font you use for your Web page can either look professional or it can look awkward. Using the <FONT>...</FONT> tags to identify each font in each instance can clutter your HTML. That's why setting your fonts using cascading style sheets is not only the better way to go, but you can also do more with cascading style sheets than you can with HTML alone.

A font family is a category of font faces that enhance the text in an HTML document. If you think about when you type a letter or report in a word processor, you are able to choose what font you want your text to be in. The person who wrote the program for your word processor set all the fonts to be usable by selecting from a drop-down list. Now, consider you being that programmer and your Web page is the word processor. You can set the font face to how you want it to look. One thing to remember, just because you have that font loaded in your browser or on your computer doesn't mean your visitors do as well. It is good practice to use browser-safe fonts so that your page renders the same on your visitors computer as it does yours.

There are some common fonts that form a group called generic font families that cascading style sheets supports across most browsers:

Although there are many fonts that each browser shares, there may be some that none of them will recognize. This is where you can use graphic text, which is simply an image file. However, graphics use up too much space and take too long to load. That's where vector text comes in. Vector text is easy to edit, can position itself dynamically depending on the screen size, and it allows you to apply limited amounts of special effects to any font. The down side is most browsers don't support it. Currently, you need the Flash plug-in, or the recent version of Firefox or Opera to support viewing vector text, also known Scalable Vector Graphics (SVG).

Dingbats, or symbol/picture fonts, are a collection of icons or pictograms that correspond with a letter or number on a keyboard. One problem with dingbats, or webdings, is that not all computers will have this font.

Character entities are a more common form of dingbat. You may know these better as &, ™, ©, or ®. They are created by typing &amp;, &trade;, &copy;, and &reg;.

To set the font-family to property so that your text looks the way you want it to, you need to type something like this between the curly brackets of your style declaration: font-family: Georgia, "Times New Roman", Times, serif;. The visitors computer will render the fonts in the order they are set in your style. For instance, if their computer has Georgia installed, that will be the default text that they see. If none of these are installed, will choose the most common type of font found in the serif family. If no serif fonts are found, it will display in the font that's the default on the visitors computer. Notice we have quotes around Times New Roman. Any font names that have spaces must be enclosed in quotes.

However you want you text to look depends both on what fonts you choose in your style and what fonts the visitor has on their computer. Below are the browser-safe font types that Apple Macintosh, Microsoft Windows, and Microsoft Core Fonts have in common:

Is your text too small? Or, is it too big? With cascading style sheets, you can set the text size in a number of ways:

You set the font-size the same way you set the font-family; in fact, you usually set the font-size at the same time by adding: font-size: 1em;. Although using any of the above types is acceptable, it is preferred that you use the relative types as they are more printer-friendly.

Setting your font so that it is in italics or bold is just as easy as setting your text type or size. For italics, you would type: font-style: italic;. You have the option to set the style as italic, oblique, or normal. For setting the boldness, you would type: font-weight: bold;. With this, you have the options of bold, bolder, lighter, 100 - 900 (in increments of 100), or normal.

Sometimes you may want to emphasize a title or header of a page. The most common form is using small caps. Small caps sets all lower case letters to smaller, capital versions of the capital letters. This is done by typing: font-variant: small-caps;.

Finally, now that you know how to set each font property, you can combine them into one set style. You can do this by typing: font: bold italic small-caps xx-large/110% Georgia, "Times New Roman", Times, serif;. This is called the shorthand version. You can leave out any style you want and the default value will take over. If you need to override a value, you may use the full font property value; such as font-family.

Question: Cool!! Now I can make my text look a lot better than with just HTML. Is there anything else I can do to make my text look different?

Answer: Yes there is. Next, we are going to look at setting the text properties.