The Little Known font-size-adjust CSS3 Property

CSS, Project 52 | March 25th, 2010
The Little Known font-size-adjust CSS3 Property

Ever wanted to use fallback fonts on your CSS with different aspect ratios without them looking huge (or tiny)? The sparkling new CSS3 font-size-adjust property could do just that, maybe.

What does font-size-adjust do?

First, let me warn you: you will need to use Firefox to view the examples on this page properly. Yes, not Safari, Firefox!

The font-size-adjust property allows you to specify an optimal aspect ratio for when a fallback font is used; if the substitute font has a different aspect ratio than the preferred one, the text’s x-height (roughly the size of its lowercase letters) will be preserved.

Take a look at the image bellow:

Baskerville and Georgia don’t have the same aspect ratio, so when font fallback occurs (if Baskerville is the optimal font), the text usually looks much bigger even at the same size.

By using font-size-adjust, the original font-size for the fallback fonts will be divided by the font-size-adjust value.

Do not confuse font-size-adjust with -webkit-text-size-adjust, which is used to specify the size adjustment of text on the iPhone.

How to determine the correct font-size-adjust value

The example on the W3C specification is very clear:

Authors can calculate the aspect value for a given font by comparing spans with the same content but different font-size-adjust properties. If the same font-size is used, the spans will match when the font-size-adjust value is accurate for the given font.

I’m going to basically repeat its example here.

Let’s take a look at the following code, in which we have a paragraph with two spans.

The CSS:

p { font-family:Times New Roman; font-size:400px; }
			
span { border:solid 1px red; }
			
.adjust { font-size-adjust:0.5; }

The HTML:

<p><span>a</span><span class="adjust">a</span></p>

Both spans inherit the font-family from its parent (the p element), but the second span has the font-size-adjust property applied to it, with a random value.

If you check the example page, look at the example on the left: the red boxes don’t match size in height — the font-size-adjust value is wrong.

[Do all the boxes on the example page have the same height? What did I say? Firefox…]

After a few experiments, I’ve arrived at the value of “0.455”. Now here’s the CSS for the second example (on the right):

The CSS:

p { font-family:Times New Roman; font-size:400px; }
			
span { border:solid 1px green; }
			
.adjust { font-size-adjust:0.455; }

If you go ahead to the example page, you will see that on the example with the green borders, both a’s bounding boxes have the same height — now we have the correct font-size-adjust value for our preferred font.

An example

Here’s a quick example I’ve created just to show this working on actual text.

The font stack consists of: Calibri, Lucida Sans and Verdana (and this is the order by which the fonts are displayed on the page).

Safari’s rendering of the page:

And Firefox’s:

As you can see, Firefox maintains the same x-height independent of which font is being used.

I’m not concerned with the text not being aligned, the purpose of this example is to show how font-size-adjust can affect the consistency of the font size and the font’s legibility.

Also, even though the first div has the correct font stack, I had to manually specify Lucida Sans and Verdana for the other divs, so you (and I) can see the difference even if we have all three fonts installed.

Last comments

I guess using this property may eventually have some negative implications on how typography is treated throughout a website, but that can be the topic for another post — the main goal here is just to showcase a quite obscure CSS3 property that may be useful in some cases.

I confess I haven’t tested it on a “real” project yet, so I’d be happy to hear your thoughts.

This is, for now, only supported by Firefox for Windows from version 1.0 and from 3.0 on all platforms. There is a bug filed for Webkit to fix this issue though.

References and further reading

Your Comments:

Have your say!

Note: * Denotes a required field (don't worry: your email will not be published)

Smashing Magazine Network