Re: [csswg-drafts] [css-fonts] Specifying changes to parameters for fallback fonts (#126)

This would actually solve a huge problem in better managing the user experience during the font loading process. Being able to specify all of these things (including letter- and word-spacing) would allow for better tailoring the experience of how the page renders before and after the web fonts load by allowing the spacing to be different for the intended font versus the fallbacks.

Currently this is only possible by using a web font loader of some kind in JS that would inject a class in the page like `wf-inactive` and then remove it once the fonts have loaded. When that class is present, you can style the fallback font differently to more closely match the metrics and spacing of the intended web font, thus minimizing the reflow of content and layout when the web font loads. 

While `font-display: swap` is helpful in getting content on screen faster, it does nothing to help enable the above. If we had a native CSS way to do that (by being able to specify small differences in `font-size`, `line-height`, `letter-spacing`, and `word-spacing`) we could eliminate the need for a JS dependency and render pages faster and with less repainting necessary.

Here's an example of how this looks (as the current 'state of the art', mainly unchanged since 2010)

```
p {
  font-family: "Work Sans", Arial, sans-serif;  
  font-size: 1rem;
  line-height: 1.4;
}
.wf-inactive p {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.035em;
  line-height: 1.375;
}
```

These small changes can reduce or eliminate reflow of content during the font loading and re-rendering process and has a tremendously positive impact on both user experience and overall perceived performance.

With the new syntax I could eliminated loading FontFaceObserver.js and a bunch of inline JS to manage that process, and then reduce the amount of CSS necessary, looking something more like this:

```
p {
  font-family: "Work Sans", Arial, sans-serif;  
  font-size: 1rem;
  letter-spacing: "Work Sans" 0, Arial sans-serif 0.035em;
  line-height: "Work Sans" 1.4, Arial sans-serif 1.375em;
}
```

This would help address a very long-standing issue in a far better way than ever before possible (I'm referring to FOUT: Flash of Unstyled Text. This would take the 'U' out of it entirely)

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


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

Received on Thursday, 21 January 2021 13:13:38 UTC