A System Font Stack

Allow me to indulge for a bit in some bloviating about the design of this blog, the thing that bloggers love most to do. I suppressed it when I carried out a pretty significant redesign a while ago, doing away with the “blueprint” gimmick that—while cute—confined the content to a tiny rectangle and locked me into a color scheme that I didn’t love and that played poorly with light themes. This enabled me to

• Switch colors to favor purples and teals, a combination I’ve always liked.
• Implement light and dark themes using the new-ish prefers-color-scheme CSS feature, along with some judicious use of custom properties.
• Change the fonts to something more purple-and-teal-esque, using the round, friendly Bariol Serif and Noway from atipo foundry.

But the more I thought about it, the less able I felt to justify loading like, hundreds of KBs of fonts to display a few KBs of text. For what? Branding? Let’s be real here.

So I’ve switched to a font stack that relies on fonts already installed on your system, though not the defaults that “system font stack” often refers to. Much as I like having a reasonably minimalist web site, I’ve also always enjoyed the aesthetics of fonts, so I do like to exercise a little agency in what things look like. I’m sticking with the sans serif body text, but switching to the widely available Optima (for Macs) and Candara (for more recent Windows machines) with a hodgepodge of fallbacks for various Linux systems. They’re a little more austere and less friendly and playful than Noway Round was, but they still look fine. Headers are still serifs, using the classic Baskerville which is widely available on both Mac and Windows machines, falling back to Microsoft’s Constantia and then to Georgia, one of the OG webfonts, where necessary.

Here are the full CSS declarations, with many of the fallbacks taken from The New System Font Stack:

body {
  font-family:
      Optima,
      Candara,
      "Linux Biolinum",
      "Libertinus Sans",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Cantarell,
      "Helvetica Neue",
      Helvetica,
      Ubuntu,
      Roboto,
      "Oxygen-Sans",
      Noto,
      Arial,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol";
}

h1, h2, h3, h4, h5, h6, subtitle {
  font-family:
      Baskerville,
      Constantia,
      Georgia,
      "Droid Serif",
      "Times New Roman",
      "Source Serif Pro",
      serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol";
  font-weight: bold;
}