HTML and CSS Reference
In-Depth Information
potential ascenders and descenders, whereas the visual size of the font is
more dependent on the x-height—the size of the lowercase characters.
The font size in all three examples in the section
“Basic web fonts” was set to 32 pixels. But as you
can see in this magnified view of the Nimbus Sans L
letter M, the characters are only about 24 pixels tall.
Following is a diagram showing how the various
font size metrics are related.
The
font-size-adjust
property allows you to specify a ratio between the
x-height and the size of your first-choice font. If the browser has to use
one of the fallback fonts, it will automatically adjust the size so the
x-height remains consistent.
You don't have to work out the x-height exactly; you can discover an
appropriate value through trial and error instead. If you provide a
“wrong” value for
font-size-adjust
, the font will be noticeably smaller.
Following is an example that shows the difference that specifying
font-
size-adjust
can make. To begin, let's look at what happens without that
property:
p {
font-size: 32px;
padding: 0.5em;
font-family: "Yanone Kaffeesatz", sans-serif;
}
If the font is available, then every-
thing is fine.
But if the font isn't available for
some reason, the fallback font
takes up considerably more space.
