How to use font-size-adjust

15 Mar

Font-size-adjust is a handy little CSS3 property that adds another asset to our web typography toolbox. At present it is only supported by Firefox but the spec on this one seems fairly clean-cut and simple so here’s hoping the other browser makers step up to the plate on this one sooner rather than later.

You might be thinking why it’s worth looking into a property that’s only implemented in one browser (I bet it doesn’t stop you playing with Webkit animations though, does it?!). Well I can give you a few answers that hopefully will keep you reading a little longer:

  1. It’s quick and easy, both to understand and to implement
  2. The benefit is very apparent. If you’ve ever wished the fallback fonts in your font stack would just match up a bit better, you’ll like this
  3. It’s only supported in Firefox, but then Firefox is the only browser where you have to worry about the FOUT (flash of unstyled text) when using @font-face. Meaning that you need to pay attention to your fallback fonts when using @font-face in Firefox and this property is very helpful for that.

What is it?

Well, the straight-up W3C definition goes a bit like this:

In situations where font fallback occurs, fallback fonts may not share the same aspect ratio as the desired font family and will thus appear less readable. The font-size-adjust property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same irregardless of the font used.

A somewhat more accessible definition is given by a great article entitled “The Little-Known font-size-adjust CSS3 Property” on Web Designer Notebook where the differences between font shapes and x-heights are illustrated. I won’t repeat all of that article here, it’s the internet: hyperlink over there, take a look and then come back!

Why do I need it?

I think a case study is the best explanation at this point. I am currently working on a project where I chose to use “Myriad Pro” as the headline & nav font. It’s not the most widely supported font but it does ok. My font-stack (informed by Revised Font Stacks among other sources) is as follows:

“Myriad Pro”, “Candara”, “Trebuchet MS”, Arial, Helvetica, sans-serif;

If you don’t know what a font stack is, check out our post on typography resources from last week for resources to learn all about them!
Back to our case study: because I don’t expect all the target audience to have “Myriad Pro” (ref various font surveys), I’m paying a lot of attention to my fallback fonts. As “Candara” is a Windows-only font, I need to go back as far as “Trebuchet MS” for the font that a good proportion of the audience will see. When I check “Trebuchet MS” in my browser, I see that it is a noticeably larger at the same font size than “Myriad Pro” while “Candara” is noticeably smaller. So this leaves me with a problem. “Candara” and “Trebuchet MS” are the best fit as fallback fonts in terms of style and shape but they take up different amounts space than “Myriad Pro” does at the same size. My page structure is fluid enough that the larger text doesn’t break it, but it would just be nice to improve this a bit and make the fallback fonts better match the space taken up by “Myriad Pro”. Below is a comparison of the nav where I’m using this font stack. You can see the shapes and amount of space taken up by each of the first 3 fonts in the stack varies greatly. “Candara” has a smaller x-height and so takes up less space. “Trebuchet MS” has a larger x-height and takes up more space.


This is where font-size-adjust comes in: it allows me to adjust the fallback fonts so that they display at the same x-height as my primary font. By this I mean: If the x-height of “Myriad Pro” at 22px font size is 10.67px and the x-height of “Trebuchet MS” at 22px is 11.506px, then Trebuchet MS’s lower case letters will look larger at the same font size. However, if we use font-size-adjust, then “Trebuchet MS” will not be displayed at 22px, it will instead by displayed at 20.4px font size as this is the size at which the x-height of “Trebuchet MS” will match 10.67px and be in the aspect ratio of 0.485. IE, it will be in the same aspect ratio as Myriad Pro and so it’s lowercase letters will look roughly the same size. Below is a comparision of the same 3 fonts with font-size adjust applied. See how they now take up more equal amounts of space (excepting that Myriad Pro is bolder) because their lowercase letters are more equal in size.


It’s worth mentioning at this point that the real raison d’être for the font-size-adjust property is to maintain legibility for fallback fonts because legibility of a font depends on the x-height. In my case, however, I’m using it for headline/nav text where the font size will be large enough that legibility isn’t the main issue. I’m making another use of the property: to allow me to better match the actual size of the fallback fonts to the primary font within the design context.

Another reason why you need this property is for the FOUT I mentioned earlier. When using @font-face to use a web font on your site, you might not see much need to use fallbacks in your font stack as in most cases you’re guaranteed that the font will be used. There are some exceptions though and the FOUT is one of them. When Firefox loads a page where @font-face is in use, it loads and renders the text on the page before it downloads and implements the web font. This results in a “Flash of unstyled Text” when the text is shown in the next available fallback font instead of the web font until the font file is downloaded and available for use. Custom fonts have widely varying font sizes and there’s no guarantee that your fallback font will look the same at the same font size. Font-size-adjust to the rescue: using the x-height / aspect ratio, you can more closely match the shape of your fallback font to your web font so that the FOUT is less obvious.

How do I use it?

If you’ve got your head around all that and want to get started, first you’ll need a font stack. Let’s take my headline case study as a working example:

font-family: “Myriad Pro”, “Candara”, “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size: 22px;

I have tested how each of the fallback fonts will look and the results are widely varying. To get them to match better, I’ve decided to use the font-size-adjust property. The first question is what value do I give it? The font-size-adjust property takes a numerical value for the aspect ratio of the primary font. The W3C describes it like this:

“This property allows authors to specify an aspect value for an element that will effectively preserve the x-height of the first choice font, whether it is substituted or not.”

Ok so aspect ratio of the font… what is that? They give a formula on the W3C page but algebra was never my strong point so basically, you take the x-height of your font and divide it by the font size. The x-height is the height of a lowercase “x” at a given font size, so that bit has to be measured. The font size is simply the normal font-size you set, you don’t have to go measuring that bit. To make it even easier, use a font size of 100px or 1000px so the division is easy!

But how do I find out the x-height? Ah, the tricky bit! Unless you’re a typography über-nerd or a typeface designer, this probably isn’t something you are often required to think about. Thankfully the Internet comes to our rescue and there are wonderful people who have created tools to help you do this. I’ve listed a few of these in the resources section below but the one I found most-useful was this test page. It’s simple – the font size is fixed at 1000px, a nice easy number to use as a divisor. You then type in the font you want to test and take a guess at the x-height (or start at 500px). It shows you a lowercase x in the font you specified at 1000px font size and your guess of the x-height is shown as a vertical bar beside it. Just keep adjusting your x-height guess until it’s about right. Divide this number (the x-height) by the font-size (fixed at 1000px) and you get your aspect ratio. For Myriad Pro, the x-height at 1000px font-size is about 485px, making the aspect ratio 0.485. This number is what we set the font-size-adjust to.

font-size-adjust: 0.485;

And that’s all folks! That’s it, just plug in the new property and you’ll see that the fallback fonts match the size/shape of the original font choice much better (remember, only when viewing in Firefox). I think this is a great and really useful property and I hope that at least Webkit will get it implemented soon. Typography is being used more and more seriously on the web and we need as much control as we can get.

References

The Little-Known font-size-adjust CSS3 property

Good definition of font-size-adjust on DevGuru

W3C CSS3 font-size-adjust

Worked example of calculation on CSS3.com

Font-size-adjust and Aspect Ration in the CSS3 fonts module: A discussion and some background on how Firefox handles it, as well as possibilities for abuse!

Speaking of abuse, Eric Meyer tests it out

Resources

Test page for estimating the x-height (aspect ratio) of a font, using javascript: my favourite tool!

Compare x-height of 2 fonts with & without font-size adjust

X-height & Aspect ratio results for some common fonts

Bitka works as Web Design Manager at Dragnet Systems & has a number of her own projects on the go. As a web designer, her specialties include HTML, CSS & Photoshop with healthy helpings of Javascript (jQuery for preference), WordPress and PHP. She was raised on Mac OS and when she's not web designing you'll find her designing jewellery over at Jou Jou Jewels. Follow @bitka on Twitter.

Comments are closed.