Stop Layout Shifts With These Coding Tips

In a digital design discussion forum, a person shared a link to an article about avoiding layout shifts that are caused by web fonts. The article goes into detail about the causes of font shifts and how to work around them. The writer explained that detecting layout shifts can be done by running a page through the Web Page Test of the browser and using a filmstrip view. Most browsers offer a toggle to show layout shifts. Another way to detect them is to use Chrome Developer Tools Performance.

The author then goes into strategies on how to prevent layout shifts with the font display option. All of the shifts can be avoided with a single line of CSS code, which is "font-display: optional." This is all a designer has to do in order to prevent the problem of a shifting font. However, there are some additional methods that a designer could use if they want to get fancier with their coding.

One of those ways is with the block function. It hides text for up to three seconds. The swap function may also work. Fallback could be used, too. An optional modifier on font allows the designer to hide text and only use the web font if it is available. It will not swap for a different font.

However, if it were all this simple, no further details would be needed. It's a good idea for a designer to consider how to optimize their content and files before loading them onto a page. One way to do this is by loading fewer font files. Just use one or two of them. Use faux bold or italic fonts. Font stacks may also work well. The author's other suggestions include using a variable font and avoiding icon fonts. Most icon fonts won't render well. System fonts are always a safe choice. The writer also discusses how to optimize font files and subsets of fonts. Designers may also choose modern fonts. As with many other design problems, the simplest solution is usually the way to go to save time and prevent issues. For more information click here https://simonhearne.com/2021/layout-shifts-webfonts/.