A Table of the Aspect Ratio of Commonly-Used Fonts

All fonts have an aspect ratio (or value). Font aspect values are calculated by dividing the lowercase x-height of the font by the font size. When you have this value, you can use the fontSizeAdjust style property in CSS3 to specify the aspect value of the preferred font used to display your website.

When your website is viewed on computers that don't have your preferred font, the fontSizeAdjust property is used to select the best font size for the replacement font.

This property keeps your pages looking good and your type legible even if your first choice font is not available.

About the fontSizeAdjust Property

Using the fontSizeAdjust property gives you some control over the font substitution when it is necessary. When the first-choice font isn't available, the browser uses the second specified font, which often results in a big change in size. Readability of a font is influenced more by the size of the lowercase letters than the size of the uppercase letters. When the browser knows the aspect value for your preferred font, it can better figure out which size to use when displaying the page in the second-choice font.

Here is an example that adjusts font size using the aspect ratio of 0.58, which is the aspect ratio for Verdana. If Verdana is not available on a computer, the browser sizes the replacement font so it has similar size lowercase letters for the best legibility.

document.getElementById("myP").style.fontSizeAdjust = "0.58";

Note: As of publication, only Mozilla Firefox fully supports the fontSizeAdjust property.

Common Font Aspect Ratios

This table shows calculations for the aspect ratios of several popular font families.