Web design development. Everything about Font Families

A Better Way.

As HTML moved into the mainstream, it came under increasing pressure to provide a text formatting model that matched current WYSIWYG tools, which in turn matched the typographic conventions developed over the centuries by traditional printers. This model doesn't use simplistic tags like bold or bigger, but instead relies on an orderly definition of font families, sizes, weights, and variations. In a return to tradition, HTML style properties use this same model to provide explicit control over the appearance of your text.

There is a downside to HTML styles: They eliminate contextual information from your styles. While <strong> may seem like a boring way to get some sort of emphasis, it certainly helps when the browser must make formatting decisions for non-visual media.

While there are HTML 4.0 extensions that associate different styles with different display media, styles in general strip contextual information from your document. Only you can decide if the increased visual control outweighs this loss of information.

All in the family

You won't find it too surprising to learn that you can change the font family used to render text with the font-family property. The value of this property is a comma-separated list of font names that may or may not exist on the user's computer. The browser will search for each font in turn, rendering the text with the first one it finds. If it can't find any of the fonts, it will use the default font for your system.

For example, suppose you absolutely must have all your text in Desdemona. This style creates a class you can use whenever the urge strikes:

Simply adding CLASS="desdemona" to the <P> tag gets the desired effect:

<P CLASS="desdemona">

This should be in Desdemona.

</P>

If your browser supports the font-family property (both Netscape and Internet Explorer 4 do) and your system has a font named "Desdemona," you probably saw the results. If your system is missing Desdemona, the text is probably no different from everything else on this page.

You want what style of Font ?

Not finding the font is a pretty big problem. Fonts vary wildly from system to system, with Unix, PC, and Mac systems using very different font names and families. We all know that Swiss, Arial, and Helvetica are pretty much the same, but it gets to be a pain when you must specify all three every time you want a sans serif face in your text.

HTML provides a solution to this by defining five generic fonts: serif, sans-serif, cursive, fantasy, and mono space. Each browser maps these generic names to local fonts that approximate the desired style. For your browser, these fonts look like:

Generic font	Sample text
serif	Sample text
sans-serif	Sample text
cursive	Sample text
fantasy	Sample text
monospace	Sample text

How did your browser do?

The best way to use these generic fonts is to place them at the end of a list of fonts as a sort of backstop when all else fails. Thus, if you need a sans serif face, you might try this style:

    .sans {font-family: Helvetica,Swiss,Arial,sans-serif;}

If all three "real" sans serif fonts are missing, the generic one will be used.

Family concerns, even with font families, can be troublesome. Like with real families, it can get complicated when you start getting personal. Nevertheless, next week we'll delve into the size and weight of the members of your [font] family.

<< BACK

Font Families and Styles