Font families are given names, such as "Verdana", "Times", "Comic Sans MS". In general there three font types: "serif" (pronounced "sair-if"), fonts with serifs: little fancy bar decorations, as if they were drawn with a caligraphy pen, such as Times and Georgia, "sans-serif", headline fonts that lack serifs, like Helvetica, Arial and Verdana, and "monospace", fonts with a fixed character width, like Courier. Serif and sans-serif types usually have variable character widths; the "i" is narrower than the "a", for instance.
Browsers usually have default fonts assigned to the three major types, for example, Times for the serif, Helvetica or Arial for the sans-serif, and Courier for monospace type. It is common for designers to list more than one font family in a css rule, so that if the site visitor does not have the preferred font (the first one listed), the browser can choose one other from the list. It is best to also include the generic font type as the last in the list, as a last-resort choice:
font-family: sans-serif; font-family: Helvetica, sans-serif; font-family: Verdana, Arial, sans-serif;
In the first rule, the designer is letting the browser use its default sans-serif font. This may work for simple sites, or sites with little text.
In the second rule, the designer prefers the browser to use Helvetica, but if the vistor's system does not have that font installed, the browser may use its default sans-serif font. The third rule has a prefered, alternate and default font listed.
Font size can be specified in CSS in three units of measure: pixels, points, and ems. Using pixels to define font size denies the browser the opportunity to let its user define a flexible display preference that suits their vision needs. Font size is also subject to the setting of the monitor's resolution. For instance, if you are reading this on a monitor set to 1024x768 pixels, and change the resolution to 2048x1536, the type will look half as big. That is because the browser does an internal conversion from the em to pixels.
For accessibility, it is best to define font size in terms of "ems". An em is a unit of measurement in the field of typography, equal to the point size of the current font. A point is 1/72 of an inch. (Incidentally, this is why the first Macs -- the choice at the time for typographical layout machines -- had a screen resolution of 72 dots per inch. Fonts were then typically specified in pixels, making the type look different [smaller] on a PC which had a pixel size of 1/96 of an inch.) What this means is that 1 em for a 16pt typeface is 16 points. What this means to the browser is "use the default font size your user has set". This allows people with better or poorer eyesight to adjust the screen presentation of type on all web pages to suit their needs, by adjusting a single parameter in the browser preferences.
Most browsers on all platforms now ship with the default set to 16pt as the standard font size, or "1 em" size for "normal" text. That is, text in ordinary paragraphs with no special emphasis or size applied. You can tell the browser to print larger by setting the font-size rule to a higher em number. Creating a rule to set the font-size to 2em, will yield a 32pt-high font. For example, to set the font family and size for first level headers (h1 elements) the full CSS selector with rules would be:
h1 {
font-family: Helvetica, sans-serif;
font-size: 2em;
font-size: 32pt;
}
The font-size set to ems lets the browser use its default to determine the size. The font-size set to points forces the browser to ignore the user-set default and make a calculation relative to screen resolution to display the font, a less flexible choice.
Another aspect of font size is line height, or "leading" (pronounced "ledding"). The em measurement in traditional printing includes a leading that if the type blocks were stacked, puts the minimum required space between successive lines of text for comfortable reading. On modern screens this is subject to some variation, but specifying ems for font size versus pixels or points generally produces better results.
The spacing built in to the em is regarded as "100%" or the normal spacing for the font family specified. To add more "leading", you simply increase the percentage of line-height:
h1 {
font-family: Helvetica, sans-serif;
font-size: 2em;
line-height: 120%;
}
In practice, you can use a shorthand notation that gathers all three aspects of font control into one combined font rule that specifies the size, line-height and font family on one line. For example, this one-line rule accomplishes the same as the three-line example above:
h1 {
font: 2em/1.2 Helvetica, sans-serif;
}
<< Structure and Cascade | Index | Text Properties >>