• Home
• The em
  • The em square
  • Font size
• DPI and PPI
  • Screen dots per inch
  • Screen pixels per inch
  • Image dots per inch
• CSS Oddities
  • CSS Inch
  • CSS Pixel
  • CSS3 x-height
• Square Pixels
• Definitions
• Contact

CSS3 x-height

font-size-adjust has been reintroduced in the CSS3 Fonts Module. I think there are some dubious statements in this Specification - but I’ll focus on x-height.

In bicameral scripts, 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 (x-height divided by font-size).

The CSS3 Fonts Module has a table giving aspect ratio values for some fonts, and it’s here they wander into some strange territory.

The first image below shows shows several typefaces rasterized at a common font size (11pt. at 72 ppi), together with their aspect values.

Measurement shows that the typefaces are “rasterized” at 12pt at 72ppi, not 11pt.

Their table has aspect ratios for Mac fonts “Bernhard Modern”, “Caflisch Script Web”, and “Flemish Script”. If it’s meant to be a reference document what happened to Browser Safe Fonts?

Single values are given for Aspect Ratio, and are suspect. Aspect Ratio for a font isn’t a fixed value but varies with font size.

So how do you get the x-height for a font? Eric Meyer says:

There is no way in CSS2 to simply get the values from the font, and many fonts may not have the information available in the first place.

It isn’t actually a matter of CSS being deficient in some way but rather the simple fact that the Windows Operating System is unable to get a font’s x-height metric irrespective of whether that information is available or not - and I suspect it isn’t. The only way to get the x-height of a font is to measure it!

These program generated tables give the aspect ratio values for Verdana and Georgia for font sizes from 11px to 50px. For each font size the x-height was measured by rendering the x character, without anti-aliasing, to a drawing surface in computer memory and then counting pixels.

You can see that Aspect Ratio bounces around with font size.

Its fairly obvious that it’s impractical to implement font-size-adjust using an aspect ratio LUT for every font size so it makes sense to use a single all-purpose value, but a value that should have some logic in the way it is chosen. The values in the CSS3 Module don’t cover all web safe fonts and those for Trebuchet MS, Georgia, and Times New Roman are wrong at their specified font size of 12px. To use font-size-adjust everybody should use the same aspect ratio values, but the single values given in the Fonts Module table are not accurate, comprehensive, or mandatory. Which values are browser programmers going to use?