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...