The font-size-adjust property allows you
to specify an aspect value for your text. This property is often very
confusing to people so I'll try to explain it as best I can. Let's say,
for example, I have the following code in my CSS document...
font-family: Verdana, 'Times New Roman', serif;
font-size: 12pt;
Although it's very unlikely I would use those
particular fonts in that particular order just bear with me for this example.
Now, let's say the user didn't have the Verdana font available, so what
happens? Well, the web browser simply displays the next available font you
specified (in this case, Times New Roman). However, depending on what
font-size you use (in this case 12pt), your
resulting text may look quite different than what you expect (in other
words, it's size will be a little off).
Why does it's size look so
different? Well, it all boils down to the aspect value for the font. You
may be wondering, "what the heck is an aspect value?". Well, in font
terminology, a font's aspect value is simply it's font-size divided by
it's x-height. It's a ratio, a decimal number. It looks like this: 0.58
or 0.54 or 0.48. It is always going to be a number between 0 and 1
(unless by some weird chance the lowercase letter "x" is larger than
all of the other characters in the font). We already know the font's
size (because we defined it with the font-size
property). But what is it's x-height? Well, the
x-height of a font is
simply the height of the it's lowercase letter "x". So let's say for example,
I specify my font-size as "1em". Well, if you were
using the Verdana font your x-height would be "0.58em". That is to say,
the height of the lowercase letter "x" is 58% of the font-size. So now
you know what an aspect value is.
Luckily for us, the font-size-adjust
property allows us to specify an aspect value for a font. "Well, why
would I want to do that?" You would want to do that to preserve the
legibility of your font if your first choice font was unavailable. So,
in the example above I'm trying to tell the browser to display my text
in the Verdana font at 12pt. But wait, low and behold, the Verdana font
is unavailable. So it displays your second choice "Times New Roman" at
12pt. Now your text looks small all of a sudden. Why does it look small?
Because the Times New Roman font has a smaller "aspect value" than the
Verdana font (0.46 compared to 0.58). If we want our fonts to "appear" to
be the same size we have to tell the browser what the aspect value of our
first choice font is. And we do that by specifying the font-size-adjust
property. So, for example, I may type...
font-size-adjust: 0.58;
This tells the browser that my first choice font has an
aspect value of 0.58. If the second choice font (in this case, Times New
Roman) has a aspect value different than that (which in this case, it
does, 0.46), it should scale it by the approriate amount to make the
fonts "appear" to be the same size. In the case of Times New Roman, it
is scaled by a factor of 1.26 (in other words, it is 26% larger than
what it would have been if I hadn't specified the font-size-adjust
property. This allows a 12pt Verdana font and a 12pt Times New Roman font
to "appear" to be the same size. I chose that particular number, 0.58,
because I know for a fact it is the aspect value of the Verdana font,
and Verdana is my first choice font. To use this property correctly you
will have to look up (or figure out yourself) the aspect value of your
first choice font. Here are the aspect values for some common fonts:
| Font |
Aspect Value |
| Bernhard Modern | 0.4 |
| Caflisch Script Web | 0.37 |
| Comic Sans MS | 0.54 |
| Flemish Script | 0.28 |
| Georgia | 0.5 |
| Gill Sans | 0.46 |
| Minion Web | 0.47 |
| Myriad Web | 0.48 |
| Times New Roman | 0.46 |
| Trebuchet MS | 0.53 |
| Verdana | 0.58 |
Note: This property is unique in that is
it not supported by many browsers yet.
Tip:
This property is optional. If you would like to include it in your
generated CSS code simply check the checkbox by it's name (to enable it)
and then type in a value for it in the font-size-adjust textbox.
Read
an official description of the font-size-adjust property from the W3C