🔡 Typography Choices
One of my primary goals when building this site was to put the content front and center. Aesthetics are important, but not when they come at the expense of usability or clarity. A critical component of content clarity concerns correct typography choices.
Beyond basic typography choices, like font size and line height, i had to select a typeface. The good news is that there are a huge number of fonts to choose from, many with free or cheap licenses for use on the web.
The bad news, of course, is that there are a huge number of fonts to choose from.
How do you pick one, two, or maybe three typefaces when there are literally thousands of possibilities? You need to find options which are easy to read, beautiful to look at, have the features you want, and are priced right. Oh, and don't forget about finding one with the right vibe!
On the web there are even more things to think about. There might be a different license or fee for a web font vs. a desktop license. That might make you reconsider how many different weights and styles you'll need. You also need to think about the size and bandwidth requirements of the fonts, who will host the font files, and you need to decide which tradeoffs you want to make when the page loads (basically you have two less-than-ideal options: flash of invisible text or flash of un-styled text).
That's a lot.
Sometimes, the demands of a project require you to deal with all of that, but for this site I realized I could achieve my goals while sidestepping most of that pain and toil.
The font you have with you
Much like cameras, the best font is the one you have with you. If a font is already present on your device I don't have to host it and you don't have to download it. Neither of us have to worry about fonts hosted by a third-party that might be tracking you, go offline without warning, or unexpectedly violate a law. If you don't have to download a font, there are no concerns about showing you invisible or un-styled text until it loads.
The problem, of course, is that different operating systems have different fonts, and there's not a lot of overlap.
One clever approach to this problem is Modern Font Stacks, a very cool website created by. Dan Klammer. On Modern Font Stacks you can choose a general style of font, like "Antique", and the site provides a font-family collection made up of several fonts already installed on various operating systems which provide that general style:
font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
While this approach has a lot of advantages, the obvious downside is the text on your website isn't going to look exactly the same on every device. Using the "Antique" example above, some people would see Superclarendon, others will see Bookman Old Style, some URW Bookman, and so on.
Is that okay? As a general rule, it's okay if a website doesn't look exaclty the same in every browser or on every device. Indeed, this is almost a practical impossibility these days. But when it comes to text, specifically, is it okay for there to be a difference across devices?
The answer is that it depends. For some sites, like ones with particular branding requirements, it's a dealbreaker. For this site? Not a dealbreaker at all. There's no particular font that screams "VioletPixel" or "Justin Michael."
Still, this approach felt strange and inappropriate to me when I considered it. The vibe was off. At first I couldn't figure out why, but then it hit me: if I choose a general style for text, but I don't have full control over the exact font being used, I'm leaving too much to chance.
The "Antique" example above includes six different font families and one general fallback. Granted, two of those fonts (Georgia Pro and Georgia) are close enough that you could reasonably consider it five fonts, but that's still five fonts I would at least want to test every now and then to make sure nothing is going off the rails.
More than that, it ultimately felt like a distraction from the content, for both readers and myself. I want the words I share to be rendered using a nice font, but I also want you to notice the words, not the typeface. The font, the glyphs, should melt into the background leaving the words and sentences as the focus.
But wait, I thought, isn't there a font that's perfectly suited to this use case? One designed to be an unassuming platform upon which the ideas and meaning of the text is the star of the show? And isn't this font installed on every device that can run a web browser? Yes, there is!
It's the system font.
Why the system font is perfect (for this site)
Here's the primary font-family declaration on this site at time of writing:
font-family: system-ui, sans-serif;
The system-ui keyword tells the browser to use the operating system's font, and if the browser doesn't understand that keyword it falls back to the default sans-serif font.
Simple. No downloads. Loads instantly. But perfect? It's a system font, how could it be perfect?
It's perfect because it gets out of the way. Unless you're using a new or unfamiliar operating system, you're already used to the system font and you don't notice it. That means when you're reading this site you're not seeing the font, you're seeing the content.
As a bonus, recent versions of Apple's operating systems have a variable system font with a wdth axis. That means I can use font-variation-settings to jazz things up a bit as a progressive enhancement. If other operating systems ship with variable system fonts that support this axis, or another axis I decide to use, they'll get those enhancements for free immediately. For systems without variable fonts, standard font styling (like font-weight and friends) will still be applied.
Another advantage of using system fonts: they are, by and large, carefully selected and well crafted. People who make operating systems care about all the fonts they include with the system (i.e., the ones in the Modern Font Stacks mentioned above), but they care the most about the system font. It's a safe bet that everyone who visits this site sees a high quality typeface, regardless of the platform they're using, even if I don't know exactly what it is.
Sure, this site won't look the same everywhere, but that's totally fine. As long as the content is the primary focus and the site looks and feels nicely crafted, that's all that matters.