‘Font-Size-Adjust’ Estimator
Enter in the name of a font that is installed on your system, and click “change”. An alert will appear with a x-height ratio. This number is an appropriate value for the ‘font-size-adjust’ CSS property.
The Back Story
This tool was created when I read up on the developing CSS3 spec and was intrigued when I found the re-introduction of the ‘font-size-adjust’ property. For those who don’t know, ‘font-size-adjust’ was introduced in CSS2, and then dropped in CSS2.1 as it was found to be problematic. The purpose of this property was so that:
the subjective apparent size and legibility of a font are less dependent on their ‘font-size’ value than on the value of their ‘x-height’, or, more usefully, on the ratio of these two values, called the aspect value (font size divided by x-height). The higher the aspect value, the more likely it is that a font at smaller sizes will be legible. Inversely, faces with a lower aspect value will become illegible more rapidly below a given threshold size than faces with a higher aspect value. Straightforward font substitution that relies on font size alone may lead to illegible characters…This property allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in the substitute font.
I love the idea of maintaining legibility in font substitutions. I understand that Firefox might already be implementing this property, or never stopped from CSS2 (I’m not sure which). The biggest problem I found was, how is someone supposed to find the font aspect ratio? The key was finding the x-height.
I recently came across a couple of websites that gave me a few ideas on how to find the x-height quite easily. They are:
- http://www.cs.tut.fi/~jkorpela/x-height.html – This page has a mechanism to help estimate the x-height of a font. I improved the JavaScript and it’s being used here.
- http://www.w3.org/TR/CSS21/syndata.html – CSS 2.1, Syntax and basic data types. This is where you can get information on a neat little thing called the ‘ex’ unit (the ‘x-height’ of the relevant font).
This tool seems to work fairly accurately. Feel free to give it a try.
