Demonstration of CSS font-size-adjust
Most modern browsers will let you specify downloadable fonts, in
TrueType/OpenType format. This works for FireFox 3.5+, Safari 3.1+,
Opera 10+. I've heard but not confirmed, that IE 8 might be able to
download TrueType/OpenType fonts. IE 4+ can use proprietary .eot fonts.
Convert font formats and make CSS statements that work for all these
browsers, at http://www.fontsquirrel.com/fontface/generator.
Check the source code for this page to see the syntax for
specifying downloadable fonts, that works for all these browsers.
The main use of font-size-adjust
If you specify "font-family:Goodfish,Garamond,serif" (where
Goodfish is a freeware font from Larabie Fonts),
most people don't
have Goodfish, so the browser would automatically display Garamond
instead. Goodfish and Garamond look like they are different sized
letters, at the same font-size. One CSS definition is used for both
fonts, so you can't give different font sizes.
Specify a font-size-adjust, and whichever font gets loaded will
display at the size you intended (the browser will adjust the height of
the letters, using the size of the lower-case x to match heights).
Explorer does not support font-size-adjust:
is present in the obsolete CSS2 specification but was dropped from
CSS2.1 due to lack of browser support. It reappears in CSS3 Fonts. Thus
this property is not a priority for IE8".
So lack of standards (because browsers like IE didn't support it) is
preventing the least-standard browser from having this, while Firefox
and other browsers do???
Many "artistic" fonts, especially, have widely different sizes for
'x', and the font size that would have standard fonts look good might
leave the artistic font so tiny it would be illegible.
If you are using Internet Explorer, font-size-adjust isn't
implemented. If don't have some of these fonts, and your browser didn't
download them, you would see standard fonts substituted. Here's a
screen capture of how it looks with font-size-adjust and the fonts:
Hamma Mamma Jamma and Betsy Flanagan (a keyboard font) are freeware
fonts from Larabie Fonts.
To demonstrate with fonts almost all systems have, the x-height of
Georgia is 0.48 (close to Goodfish's 0.45) and Garamond’s is
0.38, so Garamond appears smaller at the same font size. If you wanted
to manually adjust your font sizes, specify 14px for Georgia and
specify (14 * .48/.38= 17.68px) for Garamond. Instead of calculating,
specify the font-size-adjust (to the x-height of your desired font, in
this case 0.48), and at every point size Garamond will look the same
size as the corresponding point size in Georgia.
Notice how the heights of the bodies of lower case letters (the
x-height) change with the use of font-size-adjust. Arial's x-height is
.52 (52% of the height of the font).
Impact and Palatino are very dissimilar, you wouldn't normally pick
one as the substitute for the other. I picked them for how different
their x-heights are.
UnAdjusted xImpact or Charcoal (Impact=.65): xabcdefgxxabcdefgx:
Palatino Linotype, Book Antigua, or Palatino (Palatino Linotype=.47).
Adjusted xImpact or Charcoal:xabcdefgxxabcdefgx:Palatino
Linotype, Book Antigua, or Palatino
To find what the font-size-adjust value to use:
There is an aspect ratio (or x-height) calculator, for any font
installed on your computer, at
Hamma Mamma Jamma unadjusted:xxabABx:xArial
http://www.brunildo.org/test/xheight.pl (3-digit precision)
and you can find the 'normal line-height' and the 'aspect value' of the
installed fonts on your system at
You can use this crude way of getting the value: Adjust the
font-size-adjust parameter for <p> in the source code of this
page, until the big fonts, displayed (far) below, have boxes around
them that are the same size.
Hamma Mamma Jamma:xxabABxxArial
font is Betsy Flanagan)
See below for the display of adjusting the font-size-adjust specified
for the <P> style: