Mitigating CLS with seamless font swapping #

If the second headline in the above demo is not larger than the first one, your browser does not support size-adjust. Moving interactive target areas (the dropdown jumps around!).Try changing the typeface with the dropdown and observe: Here's an interactive demo of the problem space. One important use case is optimizing web font rendering to prevent cumulative layout shift (CLS). It also demonstrates a few ways to correct and normalize font sizes for smoother user experience, consistent design systems and more predictable page layout. This post explores a new CSS font-face descriptor called size-adjust, available in Chromium 92 and Firefox 89 (behind a flag) (see caniuse for latest support). In this example Chrome DevTools CSS grid layout debug tools are used to show heights. The examples on the right use size-adjust to ensure 64px is the consistent final size. The examples on the left have not been adjusted and have an inconsistent final size. Finer tuning with ascent-override, descent-override and line-gap-overrideĬonsider the following demo where the font-size is a consistent 64px, and the only difference between each of these headers is the font-family.Mitigating CLS with seamless font swapping.

Arial font metrics