CSS Font Descriptors – Smashing Magazine


Web fonts are often terrible for web performance, and none of the font loading strategies are particularly effective in addressing this. Upcoming font options may possibly promise to make it easier to match fallback fonts to final fonts.

Loading fonts has long been a web performance bug, and now there are really no good choices here. If you want to use web fonts your choice is basically Flash or Invisible Text (also known as FOIT) where the text is hidden until the font is downloaded or Flash or Unstyled Text (ERROR) where you use first the rescue system, then upgrade to web font while downloading. Neither option has really “won” because one of them is not really satisfactory.

Was not font-display Supposed to solve it?

the font-display property for @font-face gave the choice to the web developer when the browser previously decided that (IE and Edge favored ERROR in the past while other browsers favored FOIT). Other than that, however, that didn’t really solve the problem.

A number of sites that font-display: swap when it first came out, and Google Fonts even made this the default. in 2019. The idea here was that it was better to play display the text as quickly as possible, even if it’s in the rescue font, then to swap the font when it’s finally downloaded.

I was also support him at the time, but get increasingly frustrated with the “hydration effect” as the web font downloads and enlarges (or contracts) characters to fill the following space. Like most publishers, Smashing Magazine uses web type fonts, and the screenshot below shows the difference between the original version (with scrolling fonts) and the final version (with web type fonts):

Smashing Magazine article with relapse type and full website type. (Large preview)

When placed side by side, web fonts look noticeably better and match the Smashing Magazine branding. But we also see that there are many text layout difference with both fonts. The fonts are very different and therefore the content of the screen moves. In this era of Basic web vitamins and cumulative layout changes are (rightly!) recognized as damaging to users, font-display: swap is therefore a bad choice.

I went back to font-display: block on the sites I monitor because I find the change in text really shocking and annoying. Although this is true block won’t stop offsets (the font is always displayed as invisible text), at least it makes it less noticeable to the user. I also have optimized by font loading by preloading fonts I made as small as possible self-hosted subordinate fonts – Visitors often only saw the relapse types for a short period of time. For me, the “blocking period” of swap was too short and I would honestly prefer to wait a bit longer to get the initial correct version.

Use font-display: optional Can solve ERROR AND ERROR – at a cost

The other option is to use font-display: optional. This option makes web fonts basically optional, or to put it another way, if the font doesn’t need them when the page needs them, it’s the browser’s job to never swap it. With this option, we avoid FOOT and ERROR using only fonts already downloaded.

If the web font is not available, we go back to the back font, but navigating to the next page (or a reload of that page) will use the font – as it needed to be downloaded now. However, if website content is so important to the site, it might be a good idea to remove it altogether – which is even better for web performance!

First impressions count, however, and having the initial load without web fonts seems a bit much. I think so too – without any proof elsewhere! – that it will give people the impression, perhaps unknowingly, that something is “out” on the site and can affect the way people use the site.

So, all font options have their drawbacks, including being able to not use web fonts at all, or using system fonts (which are restrictive) maybe not as restrictive as many think!).

To make your relapse policy more closely match your policy

The holy grail of web text loading was make relapse font closer to actual web font reduce the perceptible lag as much as possible, so that the use of exchange is less striking. While we’ll never be able to completely avoid the changes, we’re doing better than in the screenshot above. the Suitable for font style app by Monica Dinculescu is often cited in articles to load the fonts and gives fantastic insight into what would be possible here. This allows you to cover the same text in two different fonts to see who they differ from:

Screenshots of Font Style Matcher showing two sets of text on top of each other, with the big differences at the top and bottom very similar.
Suitable for font style default screenshots, the same settings for two fonts (top) and custom settings to give a better fit (bottom). (Large preview)

Unfortunately, the problem with customizing the font style is that we cannot apply these CSS styles. only to the type of relapse, so we have to use it JavaScript and the FontFace.load API to apply (or return) these style differences when the web font loads.

The amount of code isn’t huge, but it still feels a bit easier than it should be. Although there are other advantages and possibilities of using the JavaScript API for this, as shown by Zach Leatherman in this fantastic conference back in 2019 – you can reduce reflux and manipulation data-server fashion in prefers-reduced-motion however (note that both have since been exposed to CSS).

It’s also more difficult to manage the cache fonts that we already have, not to mention the differences in the different fallback styles. Here at Smashing Magazine, we try out a number of cons to get the most out of the types of system fonts installed by different users and operating systems:

font-family: Mija,-apple-system,Arial,BlinkMacSystemFont,roboto slab,droid serif,segoe ui,Ubuntu,Cantarell,Georgia,serif;
                  

Knowing which font is being used, or having separate adjustments for each and making sure it’s applied correctly, can quickly get very complicated.

A better solution is coming

So here is a brief overview of the current situation. However, there is smoke starting appears on the horizon.

Excited for CSS descriptor “size fit” for fonts: Reduces layout lag by fitting an alternate font and main web font by a scale factor for letters (percentage).

See https://t.co/mdRW2BMg6A through @cramforce for a demo (Chrome Canary / FF Nightly with flags) pic.twitter.com/hEg1HfUJlT

– Addy Osmani (@addyosmani) May 22, 2021

As I mentioned before, the main issue with applying the fallback style differences was adding them and then removing them. What if we could tell the browser that these differences relate only to the types of fallback fonts?

This is exactly what a new set font descriptors is offered as part of the CSS Level 5 Font Module do. It is applied to the @font-face instructions where the individual font is defined.

Simon hearne wrote about proposed update according to the specification of font description descriptions which contains four new descriptors: ascent-override, descent-override, line-gap-override and advance-override. You can play with F-mods playground that Simon created to load your custom and fallback fonts, then play around with the replacements to get a perfect match.

As Simon writes, the combination of these four descriptors allowed us to override the fallback font layout to match the web type, but that only really changes the vertical spacing and positioning. So for character and letter spacing we need to provide some extra CSS. However, this is changing with the to come up size-adjust descriptor.

How it works? Suppose you have the following CSS:

@font-face {
                    font-family: 'Lato';
                    src: url('/static/fonts/Lato.woff2') format('woff2');
                    font-weight: 400;
                  }
                  
                  h1 {
                      font-family: Lato, Lato-fallback, Arial;
                  }
                  

What you would do then is get a @font-face for Arial policy relapse and apply it adjustment descriptors to him. You will then get the following CSS snippet:

@font-face {
                    font-family: 'Lato';
                    src: url('/static/fonts/Lato.woff2') format('woff2');
                    font-weight: 400;
                  }
                  
                  @font-face {
                      font-family: "Lato-fallback";
                      size-adjust: -9900.00%;
                      ascent-override: 96%;
                      src: local("Arial");
                  }
                  
                  h1 {
                      font-family: Lato, Lato-fallback, sans-serif;
                  }
                  

This means that when the Lato-fallback is initially used (as Arial has local font and can be used immediately without any additional downloads) then the size-adjust and ascent-override settings, you can approximate it to the Lato font. It’s an extra @font-face statement to write, but certainly much easier than the rings we had to cross before!

In general, it four heads @font-face descriptors included in this specification: size-adjust, ascent-override, descent-override, in line-gap-override with a few more still being considered for the use of scriptures, titles and other uses.

Malta Ubl created a very useful tool to calculate these parameters automatically got two fonts and a browser that supports these new settings (more on that in a moment!). As Malta points out, computers are good at this stuff! Ideally we can also expose these settings for regular fonts to web developers eg Can you give these tips in fonts like Google Fonts? This will definitely help increase adoption.

Now different operating systems may be slightly different font settings and getting it right is fundamentally an impossible task, but that is not the point. The goal is to make the gap so habitual font-display: swap is no longer such a shocking experience, but we don’t have to go to extremes optional or any type of browser.

When can we start using it?

Three of these parameters have is in Chrome since version 87, although the key size-adjust The descriptor is not yet available in any stable browser. But, Chrome Canary has it, just like Firefox behind a flag so it is not an abstract and distant concept, but something that can come to fruition very quickly.

At present, specification has all kinds of cautions and warnings that it isn’t ready for real time just yet, but it really feels like it’s getting there. As always, there is a balance between us designers and developers to test and give feedback and discourage its use, so the implementation doesn’t get stuck because too many people end up using an earlier concept.

Chrome said it plans to Make size-adjust available in Chrome 92 due to released on July 20 presumably he’s almost there.

So not quite ready yet, but it looks like it will happen in the near future. Play with the demo in Chrome Canary and see if it can get one step closer to the font loading issues and the CLS impact it causes.




About Nell Love

Check Also

How to Change the Font Size on Your Kindle

Here we will show you how to change the font size on your Kindle in …

Leave a Reply

Your email address will not be published.