More than you ever wanted to know about font loading on the web (2021)

All the time I try to click on something, the layout shifts, and I wind up clicking on an ad. Maybe that's how Google can get $50B a year in ad revenue but you can't find anybody who admits they've clicked on an ad.

Wait is this true? Definitely warrants some kind of citation. If no one's heard one way or another I might test it later because I'm pretty skeptical of this claim.

Edit: mind blown

letter-spacing: this has been giving me grief recently. It’s mostly a tool for people second-guessing the font designer because they chose a font that they liked but didn’t actually like because it was too wide, and now they’re tightening the letter-spacing, but poor people like me who have told their browser not to let pages override their font choices¹, or those for whom the web font just fails to load for whatever reason, now have to suffer for it, surprisingly often to the point where letters collide (not often in the scheme of things, but surprisingly often to me). My opinion is that you should absolutely never adjust letter-spacing at body text sizes, with the sole exception of all-caps text where it is generally desirable to add up to about 0.05em. If you feel the need to set letter-spacing on body text in any other situation, you’re using the wrong font.

font-feature-settings: some OpenType features are generic, like tnum for tabular numbers, but others like stylistic sets are explicitly linked to a particular font, so that if you set this globally in this way, you might actually trigger something in another font that ruins things. For example, my monospace is Triplicate, and ss01 makes it not monospaced (called the Poly variant), so if you activate ss01 and were doing box drawing or similar, it just got ruined. Or if you’re using a version of panr’s Terminal theme² for Hugo from more than a few months ago (when it got fixed for the wrong reasons, but it got fixed), it has the case feature set improperly, which is supposed to just adjust vertical positioning of some punctuation to fit all-caps text, but in practice a number of font foundries (including at least one of the biggest) have decided to work around inferior desktop publishing software (leastways, that’s why Matthew Butterick decided to do it) by making that feature also substitute uppercase glyphs—so now the entire page is all caps.

The particularly galling part to me is that there actually is a defined way of doing this properly for font-feature-settings, scoping by font, but Firefox implemented it in 2014 and no one else has touched it. Sigh.

  /* The current and inferior way: */
  code {
      font-family: triplicate, monospace;
      font-feature-settings: "ss01";
  }

  /* The new and improved way that Google and Apple haven’t implemented: */
  @font-feature-values triplicate {
      @styleset {
          poly: 1;
      }
  }

  code {
      font-face: triplicate, monospace;
      font-variant-alternates: styleset(poly);
  }

—⁂—

¹ I started doing this a few months back in Firefox as an experiment, and I’ve never gone back—it significantly improves the web, with Google’s Material Icons web font with its stupid ligation technique being practically the only meaningful casualty.

² Which I hate, by the way—monospaced fonts are generally quite bad for long-form reading, and are still more so when presented light-on-dark and with excessively wide columns. Do you know just how much more readable those sorts of pages become when you swap in a serif or sans-serif font? Try reading half an article, then swap it and go away for a few minutes so that it doesn’t feel weird, then come back and read the rest. The effect is quite remarkable.