1. Technology

Using the CSS3 font-size-adjust Property to Set Your Font Sizes

By

1 of 2

Making Your Fonts Appear Proportional
font-size-adjust demonstration

Different font families at the exact same size have different x-heights, and so different aspect ratios.

© 2012 J Kyrnin licensed to About.com

There is a CSS style property that has been around (and not around) for a long time, but you’ve probably never used it: font-size-adjust. This property was first introduced in CSS2, was then removed in CSS2.1 (because of a lack of browser implementation), and was brought back in CSS3.

This property is an important part of web typography because it helps you use your font families in a way that makes your font stacks more readable, even when your preferred font is not available.

As you can see from the image above, fonts that are the same font-size do not always have the same x-height. In the image, I used three font families: “Century Schoolbook,” “Georgia,” and “Cochin.” They are all 180 pixels in size, but as you can see from the red lines, their x-height is very different. If I were to use these fonts in a font stack, and my first choice font were not available, this could have a drastic effect on how the page rendered.

Browser Support for Font-Size-Adjust

Unfortunately, the font-size-adjust style property still has limited browser support. It was removed from the 2.1 CSS specification because of lack of browser support, and it is still only supported by Firefox 3+. But if you care about typography, this is an important feature to have, so hopefully browsers will catch up eventually.

See the next page for an example of how these fonts look, and why you should set the font-size-adjust property.

©2014 About.com. All rights reserved.