HTML and CSS Reference
In-Depth Information
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.
Search WWH ::

Custom Search