Re: [csswg-drafts] [css-fonts] Reduce layout shift via @font-face descriptor(s) overriding inline spacing (#5533)

Here's a proposal for the upcoming vf2f discussion:

```
advance-override: <percentage>
```

This is a new descriptor of @font-face that scales the advance width of every glyph of the font face by the given factor. The default value is `100%`.

We have implemented it in Chrome behind a flag, and have observed it working reasonably well. 

Regarding some previously discussed topics:

- Property or descriptor: We want to make it easy to implement and easy for web developers to adopt, and avoid all the complications in font face selection. Our proposal satisfies all, while we are not aware of any such property-based approach. See more discussions in #126. 

- `font-display`: Other than `optional`, `font-display` values do not change layout shifts. `optional` eliminates layout shift at the cost of having a lower chance to use the desired web font. We want to keep the desired web font, while reduce the layout shift cause by the fallback font, which usually doesn't stay long on the screen.

- Legibility/Typography: Legibility of fallback font will become worsened as a cost to reduced layout shift, but in many cases it should still be acceptable. Also note that it matters only when the web font completely fails to load. If the fallback font and the web font differ too much, we would recommend not using `advance-override`, but simply using a better fallback font as a straightforward solution.
  - @jfkthame suggested changing the fallback font size to match the web font while preserving legibility, which we actually have prototyped in Chrome and seen some good results. The problem is that we don't know how to spec it nicely as a descriptor. One of the ideas is "scaling the used font size by the given factor", but `font-size` is a property that has one value per element, while @font-face descriptors work on a per-glyph basis even in the same element.

- Relationship with `letter-spacing` property: They look similar but work at different levels, and don't interfere with each other. `advance-override` changes the advance widths of glyphs, and then `letter-spacing` adds spacing between the glyphs. Therefore, issues of `letter-spacing` (like #1518) do not apply.

- Naming: I think `advance-override` is a good enough summary of what it does -- overriding the advance width of every glyph of the font face. Alternatives are `advance-multiplier` or `advance-someotherverb` to avoid confusion with `ascent-override` etc. and indicate that the % refers to a different value.



-- 
GitHub Notification of comment by xiaochengh
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5533#issuecomment-773709932 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 5 February 2021 01:08:33 UTC