CSS font-size-adjust

font-size-adjust has been reintroduced in CSS3.

The current Working Draft specification, "a work in progress", is CSS Fonts Module Level 3. The previous version of this specification CSS3 Module: Fonts had tables giving aspect ratio values for some fonts and these have been removed in this draft, which is progress because they were mostly wrong.

The specification says:

The font-size-adjust property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same irregardless of the font used.

This would be better.

The font-size-adjust property is a way to preserve the readability of text when the first-choice font is not available and font fallback occurs. It does this by adjusting the font-size of the fallback font so that the x-height of the fallback font is the same as that of the first-choice font.

The specification illustrates how this is done with an equation " ...to calculate the adjusted font size":

c  =  ( a / a' ) s 
where:
s  =  font-size value
a  =  aspect value as specified by the font-size-adjust property
a' =  aspect value of actual font
c  =  adjusted font-size to use

Which would seem to mean:


                                              (aspect ratio of first-choice font)
fallback font size = (first-choice font size)  --------------------------------- 
                                                (aspect ratio of fallback font)

But there's a kick in the tail

This value applies to any font that is selected but in typical usage should be based on the aspect value of the first font in the font-family list. If this is specified accurately, the (a/a') term in the formula above is effectively 1 for the first font and no adjustment occurs.

What this means is that the font-size-adjust value doesn't have to be a true aspect ratio for the first choice font, it can be any value you like, which rather seems to defeat the reason for having font-size adjust in the first place i.e. "..to preserve the readability of text when the first choice font is not available and font fallback occurs".

Presently it seems that only Firefox supports font-size adjust, so what happens in Firefox when there is no fallback font and you have, say, this?

h3 {font: 20px Verdana; font-size-adjust: 0.55;}

Nothing happens because the aspect ratio of Verdana at 20 px really is 0.55, and you are telling it to use an aspect ratio that is the same as it's actual aspect ratio at 20px.

Graph of Verdana aspect ratio versus font size

but with this:

h3 {font: 20px Verdana; font-size-adjust: 0.7;}

This will change the specified font size from 20px to 25px i.e 20 x (0.7/0.55)

Font aspect ratio is not a fixed number but varies with font size and, for font-size adjust to "preserve readability" with a fallback font, you have to know the aspect ratio for different sizes of different first-choice fonts. It's the browser that has to determine the required fallback font size - which depends on the fallback font aspect ratio - which depends on the fallback font size. Given that the browser can do these calculations then why on earth would you, the designer, have to specify a true first-choice font aspect ratio in the first place? If the browser can determine the fallback font aspect ratio then it can also determine the first-choice font aspect ratio.

The specification, after giving the opaque equation I've quoted above, moves on to how to calculate aspect ratios.

Authors can calculate the aspect value for a given font by comparing spans with the same content but different font-size-adjust properties. If the same font-size is used, the spans will match when the font-size-adjust value is accurate for the given font.

Probably true, but irrelevant.

To get an aspect ratio you get the x-height for a given font size - and divide by the font size. You get the x-height for a given font size from the Windows API function GetGlyphOutline. This is the function used by FireFox. If Windows fails to get a value for x-height then the browser makes up a value. Firefox will use an value that’s 56% of the font’s Ascent value.

The aspect ratio graphs for most of the Windows TrueType fonts in Browser Safe Fonts can be downloaded here. These graphs were created using Visifire and WPF.