Tidying up text with fonts.css
The next CSS Tool, fonts.css, is provided so that you can easily standardize all of your text to a single font-face, font-size, and line-height. In terms of the amount of actual code, this file is tiny; in fact much smaller than the Reset CSS Tool we looked at earlier, providing just five rules in total.
It standardizes all rendered text on the page to the Arial font, except for text within <pre> and <code> tags, which instead use the monospace typeface.
The first rule targets the <body> tag and sets the font-family attribute to arial, helvetica, clean, or sans-serif. This provides a clear font degradation path; if browsers or operating systems don't have Arial installed or for some reason can't display it, the platform tries Helvetica next, and so on, right down to sans-serif if necessary (although it's unlikely that the browser would need to travel all the way down to the end of the degradation path).
This is also important for Unicode support; if the font in use cannot map a Unicode character to a font-glyph in the current font set, it can use the font degradation path to map a Unicode character from another defined font set. This helps to avoid those unsightly little squares that sometimes appear in e-mails or on web pages when they try to show characters outside of the most basic Latin character set.
Some of the rules start with a star, such as *font-size:small and *font:x-small. This is a hack that allows to targeting the rule for IE, which ignores the star. Other browsers will not, and that will cause a lot of error messages in their console, a source of concern to many a developer. These can be safely ignored.
Like the Reset CSS Tool, fonts.css is extremely easy to use and requires no further participation from you once you have linked to the stylesheet. You don't need to use any particular class names or give elements specific id attributes in order to make use of the normalization services provided by these two tools, and the Fonts CSS Tool is compatible with all A-grade browsers. Moreover, it still works with many browsers that once were A-grade but have been dropped since because those were, in fact, the worst offenders. So very little has been added to support newer browsers as they are mostly well-behaved.
An important resource available both in the tool guide and the cheat sheet is the table of font sizes measured in percentage to the base font. It is safer to give sizes in relative units (% or em) because in browsers that do text-only zoom, text whose font-size is given in absolute units such as pt or px will not zoom. The following table provides the equivalent relative sizes of a few font sizes in pixels. A larger table is available along with the YUI documentation and the cheat sheets:
The downloadable example has checkboxes to activate each of the three CSS Tools individually to see their effect on any browser.