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).

Internet Explorer does not support font-size-adjust:
"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".
quote from http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=374396
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).

UnAdjusted (Arial=.52)xx(Georgia=.48): xabcdefgxxabcdefgx: (Garamond=.39).

Adjusted xxGeorgia:xabcdefgxxabcdefgx:Garamond

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
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
http://www.brunildo.org/test/aspect-lh-table.html
or http://www.brunildo.org/test/fontlist3.html

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 unadjusted:xxabABx:xArial

Hamma Mamma Jamma:xxabABxxArial
(the keyboard font is Betsy Flanagan)