The Little Known font-size-adjust CSS3 Property
CSS, Project 52 | March 25th, 2010
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
- Relative sizing: the ‘font-size-adjust’ property — CSS Fonts Module Level 3
- CSS Examples: font-size-adjust — Mozilla Developer Center
- font-size-adjust — Mozilla Developer Center
- Comparison of layout engines (Cascading Style Sheets) — Wikipedia
- Some new CSS features in Firefox 3 — David Baron’s Weblog
- And another CSS fonts-related article that might interest you (by me): The Future Of CSS Typography — on Smashing Magazine
You’re just full of surprises, you! :-)
Typekit still isn’t supported yet on Opera, or Safari Mobile (iPhone), so anyone using Typekit has a high chance of needing to use their fallback fonts. This little property may come in very handy.
Really good article – thanks for sharing this!
great stuff, cool
At last, an answer (sort of) to the Microsoft C font problem.
Very nice! I hadn’t seen this property before but I’ve often run into the problem of alternative fonts being wildly different in proportion to my first choice. I guess now I can move away from Helvetica Neue and Arial.
PS – this textarea needs a tabindex attribute.
Awesome. But isn’t arbitrary typeface distortion usually discouraged?
Brian, it doesn’t look like the typeface is being distorted to me (I mean that literally – only based on my looking at the example). I think the entire text is being scaled evenly so that the x-height matches between fonts.
And that’s one more CSS3 property discovered which will be useful to implement. Thanks for sharing this article! :)
Interesting, but isn’t it also work to get the right value for font-size-adjust (like 0.455)?
That’s the same amout of time to find out the appropriate new px-value for font-size.
Great topic. It certainly will help me in further projects.
Very interesting read!
Thank you
interesting to read, but… so what value does this have in any real situation if the “adjust” value isn’t tied to the fallback font(s) in the stack?
I’m just throwing example numbers out, no research behind this, just “for instance” examples… my stack has “Times,Palatino,Georgia” … perhaps the examples weren’t worthy of a real life situation, but if I know that I need to adjust “.455″ to get from Times to Palatino, and “.475″ to get from Times to Georgia… what good is it if I now know who doesn’t have what font? am I missing something in the concept?
if the syntax included some kind of shorthand acknowledgment in the stack, then “font: 24px bold Times,Palatino(.455),Georgia(.475);” might make using it a legit possibility in the future, but having to spec the adjustment by a another selector or class helps nobody. right?
I love being made aware of something like this, had not even heard about it before the article, but until I get to read up more on it, I can’t fathom how it could be useful, at all, ever. is the spec for this finalized? can it be made to be usable?
One should be aware the ‘font-size-adjust’ has been broken in Gecko 1.9.* (Firefox 3.*):
https://bugzilla.mozilla.org/show_bug.cgi?id=429605
It works o.k. in older Gecko’s (e.g. Firefox 2, SeaMonkey 1), but AFAIK is only supported on Windows in these older versions.
i never knew this
“The font-size-adjust property allows you to specify an optimal aspect ratio for when a fallback font is used”
thanks for such a healthy article
Excellent write-up Inayaili. The font-size-adjust property is particularly relevent to script fonts which can have a huge variation in perceived size.
We’ve been including font-size-adjust numbers in all Fontdeck outputs as it’s also really useful for smoothing the change of typeface when using @font-face linked fonts.
To make calculation of the aspect ratio easier, I’ve created an automated tool here:
http://webtypography.net/font-size-adjust.html
I hope it can prove useful.