January 01, 2002
Font Size Adjustment
Last week, we began an assessment of new font features in CSS2, beginning with the new
Font Sizes and x-heights
Most people associate one metric with a font, the font size. This is the measure of the font, from the baseline of the text to the top of the capital letters. A twelve-point font measures twelve points, or about 1/6 of an inch, from the baseline to its top.
Just as important as the font size, but not nearly as well known, is the x-height. As you might guess, the x-height is the measure from the baseline to the top of the lower-case letter X. In general, the lower-case letters are all this high.
The ratio of these two measures is known as the aspect value of the font. In general, a font with a larger aspect value tends to be more legible at smaller point sizes that a font with a small aspect value. In addition, two fonts of the same size with different aspect values appear to be of different sizes. For example, the Verdana font has an aspect value of 0.58, while Times Roman has an aspect value of 0.46. If you place twelve-point versions of both fonts side-by-side, the Verdana will appear larger.
A font's aspect ratio is very important when a browser tries to find a font to match the one the author has specified for a document. For example, if an author specifies Verdana, but the browser can only find Times Roman, the document will appear very differently from how the author intended, given the difference in the two fonts' aspect value.
Font Size Adjustment
To prevent the browser from substituting an inappropriate font, you can use the
As is usually the case, this is easier to see in an example. Suppose you have your heart set on Verdana, with its aspect value of 0.58. When you specify Verdana, you should include the
In this case, the Verdana aspect value (0.58) is divided by the aspect value of Times Roman (0.46) to give a scaling factor of 1.26. If you had asked for 12 point Verdana, the browser would substitute 15 point Times Roman as a good alternative.
As you can see, CSS2 assumes that browsers will get smarter and smarter about how they choose fonts and replace specified fonts with likely alternatives. We'll explore this process in more detail next week.
Chuck is the author of the best-selling HTML: The Definitive Guide and now, the fourth and expanded edition, HTML & XHTML: The Definitive Guide. He also writes on a variety of Internet and Web-related topics for a number of online magazines.
Previously in Tag of the Week
CSS2 Standard Tour: Begin Here Of related interest: See the Web Review Style Guide, edited by Eric Meyer.
|
 |
|||||||||||||||||
|
|
|
more
