• 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
• Java Surprise
• 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 Module: Fonts 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 why use fonts that are not common to Windows and Mac, as in Browser Safe Fonts? Single values are given for Aspect Ratio and, of the five fonts that I have on my computer, the table gets four of them wrong. In any event 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.

There are two ways to get x-height. The first is the 'brute force approach' by actually rendering the 'x' character and counting pixels. Not very practical for a browser. The correct way is to use a Windows API function that retrieves character heights. The function, if your interested, is GetGlyphOutline. This is the function used by FireFox for getting x-height. It’s not always appreciated that every computer program is just an interface between the user and the Operating System so, if the Operating System can’t do it - then a browser can’t do it. If Windows fails to get a value for ‘x‘ then the browser makes up a value. Firefox will use an x-height that’s 56% of the font’s Ascent value.

These program generated tables give the aspect ratio values for Verdana and Georgia for font sizes from 11px to 50px.

You can see that Aspect Ratio bounces around with font size. One thing I've had in mind is to create a Java Applet that draws graphs of Aspect Ratio v Pixel Size. One small detail is that I don't actually know any Java so I've been doing some swotting - with a bit of a surprise