Text and fonts - HTML5 and CSS3 - page 393

Basic web fonts
Typography , the art of setting and arranging type, is a big part of design;
a particular typeface is often as much a part of a company's image as its
logo or corporate color scheme. But in CSS2 , there's basically no way
to specify a font that will be used by all users across all browsers and
operating systems.

Typography on the web has always been limited because of its client-
server design—the font has to be on the client machine, where the ren-
dering is done, and not on the server. This is what leads to standard
font-family declarations like this:

If all else fails, use the
default sans−serif font.

Does the user have this
font? If so, use it.

font-family: Arial, Helvetica, sans-serif;

Otherwise, does the user have this
font? If so, use it instead.

The idea is that Arial (a Microsoft font), Helvetica (the standard Apple
font), and sans-serif will all look relatively similar—but is that true?
Instead of specifying a set of fallbacks, let's compare what each font by
itself looks like in some different browsers. Here's the standard CSS
rule split into three:

h1 { font-size: 32px; font-weight: bold; }
div:nth-child(1) { font-family: Arial; }
div:nth-child(2) { font-family: Helvetica; }
div:nth-child(3) { font-family: sans-serif; }

To see the results, let's use this simple bit of markup repeated three times:

<div><h1>Hello! HTML5 and CSS3</h1></div>

Here's what the three elements look like in Firefox on my laptop. As
you can see, there's quite a variation in both size and thickness.