The little known font-size-adjust CSS3 property

25 March 2010, in CSS, Project 52 | 25 comments »

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

There are 25 comments:

  1. 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!

  2. BigM75 says:

    great stuff, cool

  3. Andrew Fox says:

    At last, an answer (sort of) to the Microsoft C font problem.

  4. Ben Bodien says:

    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.

  5. Brian Cray says:

    Awesome. But isn’t arbitrary typeface distortion usually discouraged?

  6. Ethan Sisson says:

    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.

  7. Erken says:

    And that’s one more CSS3 property discovered which will be useful to implement. Thanks for sharing this article! :)

  8. David says:

    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.

  9. Joao Pereira says:

    Great topic. It certainly will help me in further projects.

  10. Ka-Chun Chau says:

    Very interesting read!

    Thank you

  11. Jeremy Bechtold says:

    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?

    • The font-size-adjust isn’t a scaling factor; it’s meant to be your preferred font’s aspect value. The “aspect value” is simply the x-height divided by the font size. The browser can calculate this for any installed font; setting font-size-adjust allows you to tell the browser the aspect value of your preferred font, even if it isn’t installed.

      For example, suppose we specify

      font-family: Times,Palatino,Georgia;
      font-size: 24px;
      font-size-adjust: 0.455;

      We’re saying that the aspect value of Times is 0.455 — nothing to do with any other font.

      Suppose that only Georgia is installed. The browser calculates Georgia’s aspect value; suppose it comes out to be 0.55. So instead of displaying 24px Times, the browser scales by (0.455/0.55) and displays 19.9px Georgia.

      • Perhaps a simpler way of looking at it is that it allows you to specify the x-height that you want. In my above example, you’re saying that you want a font whose x-height is 24 * 0.455 = 10.92px. The browser then ignores the specified font-size and simply chooses a font size that yields that x-height.

        • Jeremy Bechtold says:

          AHHHHH! thank you Bennet for supplying the lightbulb!

          that makes perfect sense. so we just have to know the aspect value of the font up front and it’ll allow us to fall back on any other fonts. a simple calc as you mention above does the trick.

          your two comments should be written as practical usage notes in the spec. I’m a pretty geeky guy and usually I’m the one explaining this stuff to others. this one just went right by me, thanks for the clarification.

          now the only potential issue I see is that if I do line-height as em instead of px I’ll have to test to see if the calc on the adjusted size is used or the orig value. fonts with low x-heights in a stack with backup fonts with big x-heights could wreck a page’s onscreen leading. though those two fonts should arguably not be in the same stack if they are so different.

          thanks again Bennet!

  12. Stanimir Stamenkov says:

    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.

  13. 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

  14. 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.

    • Ricardo Zea says:

      Hey Richard,

      Thanks for the tool, it completely takes the guesswork out of the process. Just bookmarked it, rated it and posted my comments in Xmarks.

      One question while using @font-face with a web font service like Fontdeck:

      If the ‘font-size-adjust’ property needs to be placed in the class that controls the element in question and not the @font-face declaration, how is it that you guys are using the font-size-adjust property in the @font-face output provided by you?

      o_O That sounded confusing, but let me know if that makes sense or if you need me to elaborate.

      Thanks in advance.

      BTW, very helpful article.

  15. desbest says:

    I love your post. I found a good usage for it. I use an embedded font on my website, and I increased the font size of everything by 2 pixels as the font is small.

    Thanks to your post, I can use Verdana as a fallback font and have it look good without the text being too big. I hope Opera supports embedded fonts or font-size-adjust.

  16. This is just what I was looking for! Thanks for all the great info.

  17. jojo says:

    Thanks for a great article it was very helpful.

  18. steff says:

    thanks for clearing out what font-size-adjust property does. don’t really know if i will use it in my designs any time sooner though!

  19. Sareo says:

    So if I understood correctly, it’s supported only in Firefox? (Nov 2011)

    Any idea when will be supported in other browsers as well?

  20. Bona says:

    I’m new to CSS but I just had this issue and your post helped me a lot. Thank you!

Leave a comment: