[css-fonts] Extend font-size-adjust to adjust for average character width #750
Description
The font-size-adjust property was initially conceived as a way of ensuring readability when an entire font isn't available (so the ex-height of a fallback font isn't too small) and ensuring a smooth flow when individual characters aren't available in the main font (so they aren't too much larger or smaller than their neighbours).
With dynamic font switching as web fonts download, however, a new problem arises: layout re-flows. For layout, the most important difference between fonts is not the ex-height, but the different average character widths (aka, the ch to em ratio, approximately).
This is visibly demonstrated in Monica Dinculescu's Font Style Matcher utility (which was inspired by a discussion in Helen Holmes' excellent essay on web typography).
If you're using scripts to download and apply web fonts, then maybe it's not too much extra work to manually change the font size and letter-spacing when the new font is available. But ideally, we will get to the point when the browsers do all this smart font-downloading on their own, with only declarative hints from the author (e.g., with font-display). Which means we need a declarative way to indicate how much adjustment would be required.
If font-size-adjust is to serve this need, it should allow for adjustments in both the vertical and horizontal dimensions. A full font-size-adjust declaration would then include two values: the target ex to em ratio, and also the target ch to em ratio. A user agent could then adjust not only the rendered font-size of a fallback font, but also the letter-spacing (or variable font-stretch) as required.
Backwards-compatible syntax:
font-size-adjust : <number>|none [<number>|none]?
Examples:
font-size-adjust: 0.5(adjust so that ex height is half the declared em height, as currently defined)font-size-adjust: 0.5 none(same, but without the backwards compatibility)font-size-adjust: 0.5 0.7(adjust so that ex height is half the declared em height, then adjust so that net character width + letter-spacing is 70% of the originally declared em height)font-size-adjust: none 0.7(don't worry about ex height, just adjust so that net character width + letter-spacing is 70% of the declared em height)
(All of this is separate from the need to have better ways of asking the browser to pick a good fallback font, based on dimensions or features instead of family names. But it would help.)