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 span
s.
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 span
s 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 div
s, 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
- Latvian translation of this article
- Portuguese translation of this article (13 January 2018)
- Russian translation of this article (29 January 2018)
- German translation of this article (16 September 2018)