settings
skip menu
change media type
xhtml+xml
change language
deutsch
scripting

URI: http://www.j-a-b.net/web/char/font-general
last updated: 2009-12-04
© 2002-2009 Contact

up down
Subject Index

Fonts

Fonts establish a connection between abstract characters and glyphs. An actual font file can be understood as containing pictures of each character defined for this special font.

Fonts can be divided into two groups, vector fonts and raster or bitmapped fonts. A glyph of a bitmapped font is made up of pixels whereas glyphs of vector fonts are defined in terms of bézier curves and lines which draw an outline. Vector fonts are scalable in contrast to bitmapped fonts, which means a glyph may have any size. If you magnify a bitmapped font the quality of the resulting glyph is usually very poor even when anti-aliasing mechanisms are applied. The most prominent vector font formats are TrueType (TTF) and Postscript (PS).

Apart from this rather technical division fonts can be grouped by their appearance.

The first two groups are proportional and non-proportional fonts. A proportional font has glyphs of varying widths which enhances readability and leads to a well- balanced typeface. Most fonts in use are proportional fonts. In non-proportional fonts all glyphs have exactly the same widths. This makes reading long prose texts quite tiring. However, non-proportional fonts are used for listings and displaying source codes. The typeface of non-proportional fonts resembles popup typewriter typefaces, the best-known font in this group probably is Courier.

Font families are another possibility of grouping fonts. Each font family describes basic specific typical variants. There are three classic font families:

Blackletter
Serif
Sans Serif

The Blackletter font family is characterized through lots of decorations and ligatures. Fonts denoted gothic or fraktur are members of this font family. Serif fonts are characterized by small strokes at the ends of glyphs. Prominent examples of serif fonts are Times New Roman, Goudy, and Garamond. This font family is preferably used in printing. The last family, sans-serif, is characterized by plain glyphs without any slabs or decoration. Sans-serif fonts are mostly used for text display on monitors, as the page you are currently reading, which uses Arial Unicode MS as the most preferred font.

When using CSS five different font families are distinguished. A generic font family should always be used as a last fallback when attributing font families in CSS. Thus when the user does not have any of the font families declared by the author installed on her system the browser will use the font family declared by the user for this generic font family. The generic font families defined in CSS2 are:

serif
Fonts with small strokes at the ends
sans serif
plain fonts
cursive
italic script, "handwritten" fonts
fantasy
any kind of whimsical font
monospace
non-proportional fonts

Obviously these generic font families reflect a mixture of different grouping concepts, as, strictly speaking, there does not exist a non-proportional font family in the classic grouping. For example the font family Courier New is a serif font while font family Lucida Sans Typewriter Regular is a sans-serif font. But both being non-proportional fonts as well, they are classified as monospaced fonts in CSS.
Comparison of font families "Courier New" and "Lucida Sans Typewriter Regular"

To decide which font family a font actually belongs to is best be done by looking at the font's panose information. Panose is a classification system for fonts. As this information is not always easily aquired and understood it should suffice to group one's fonts according to their appearance.

The following example shows six classes which could be used by an author when designing a page. The generic font family always is the last value of a font-family attribute and is marked cursive green

.sans {
font-family: 'Arial Unicode Ms', Arial, 'Lucida Sans Unicode', Lucida, Tahoma, Helvetica, 'Microsoft Sans Serif Regular', sans-serif;}
.serif {
font-family: Batang, 'Times New Roman', 'MS Mincho', Modern, Roman, serif;}
.mono {
font-family: 'Lucida Console', 'Lucida Sans Typewriter Regular', 'MS Mincho', 'Courier New', Courier, 'OCR A Extended', Terminal, Fixedsys, monospace;}
.cursive {
font-family: 'Monotype Corsiva', 'Lucida Calligraphy Italic', 'Lucida Handwriting Italic', cursive;}
.fantasy {
font-family: 'Harlow Solid Italic', 'Magneto Fett', Palette, 'Comic Sans MS', fantasy;}
.blackletter {
font-family: 'Fraktur BT', 'Old English Text MT', 'WalbaumFrakturEF', serif;}

How a browser decides which font-family should be used shall be explained by the following example. Consider this piece of code: <span class="fantasy">
Crazy Frederick bought many very exquisite opal jewels
</span>
The <span /> element is assigned the attribute class="fantasy". Looking at our above definition the first font choice for this class is Harlow Solid Italic. If this font is installed on the user's system, it will be used by the browser to display our text. Otherwise the browser looks if the second font, Magneto Fett, is installed, and so on. Now if none of the fonts are installed on the system the browser looks up which font is specified for the generic font family fantasy and uses this font.

Let us make a test:
Which font does your browser use for displaying this sentence? Crazy Frederick bought many very exquisite opal jewels If this sentence is not displayed like one of the following typefaces, none of the fonts specified for class fantasy in our stylesheet is installed on your system (or your browser does not support CSS).
Typefaces of class "fantasy"

Concluding this small excursion into fonts I want to draw your attention to using different fonts on a page sparingly as a mixture of too many fonts produce a bumpy layout and distract the user from the content of the page. Apart from that fonts should also not be used to emphasize or distinguish parts of text, as the user probably does not have the specified fonts installed on her system; thus the intention of the author remains obscure.

Subject Index

CC logo
This page is licensed under a Creative Commons License.