[csswg-drafts] [css-fonts] Extend font-size-adjust to adjust for average character width

AmeliaBR has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css-fonts] Extend font-size-adjust to adjust for average character
 width ==
The [`font-size-adjust` 
property](https://drafts.csswg.org/css-fonts-3/#font-size-adjust-prop)
 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](https://meowni.ca/font-style-matcher/) (which was 
inspired by a discussion in [Helen Holmes' excellent essay on web 
typography](http://helenvholmes.com/writing/type-is-your-right)).

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`](https://tabatkins.github.io/specs/css-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.)

Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/750 using your GitHub 
account

Received on Tuesday, 22 November 2016 20:18:18 UTC