I aligned two fonts to a target font size.
#ARIAL FONT SIZE CODE#
size-adjust was nudged in the source code until the same header in Cookie and Arial rendered the same 64px as Press Start 2P did naturally.
#ARIAL FONT SIZE TRIAL#
Choose a Google Web Font, get back a pre-adjusted snippet.Īt the beginning of this post, fixing the font size issue was done by trial and error. To create a seamless swap, hand adjust or try this size-adjust calculator by Malte Ubl. Timing this right will lead to minimal visual change, a seamless swap. more content equals more potential layout shift when font swapsīy putting size-adjust in the rule, it sets a global glyph adjustment for the font face. Text layout styles: Properties that affect the spacing and other layout features of the text, allowing manipulation of, for example, the space. The problem however, is that sometimes when the web font loads, it shifts the entire page around since it presents at a slightly different box height size. The CSS properties used to style text generally fall into two categories, which well look at separately in this article: Font styles: Properties that affect a texts font, e.g., which font gets applied, its size, and whether its bold, italic, etc.
This gives you the best of both worlds: the content is visible as soon as possible, and you get a nicely styled page without sacrificing your user's time to content.
Render a quick-loading system font to show the content first, then swap that with a web font when the web font finishes loading. To improve font rendering, a great technique is font swapping. The example on the left has layout shift, the one on the right does not. This is just a small example with a single headline element and the issue is very noticeable. In the following gif, watch the examples on the left and how there's a shift when the font is changed. 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.
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. Consider the following demo where the font-size is a consistent 64px, and the only difference between each of these headers is the font-family.