Typography: font stacks, variable fonts, and monospace fonts

[badlydrawnrob]

Anki programming themes has used different typography in it's history.
It falls back to system-ui and ui-monospace if custom fonts aren't installed.
It's current (variable) font is ...

Have something you'd like to add to the list?

🧑‍🎨 Let me know!

All listed fonts are great candidates for your coding tool of choice, too. It's partially personal preference, and partially good readability and accessibility.¹

Variable font suggestions

🤔 What's a variable font?
See "Welcome to font land" below.

I can only seem to find one font (1) that actually combines sans/serif and monospace styles into a single font file. Surely that's what a variable font should do! Perhaps a mono font requires some attention to detail that warrants an extra file.

Free fonts

1. Recursive (sans and mono come in a single file)
2. IBM Plex Sans and monospace
3. Fira Code (you'll have to pair this with something)²
4. iA Writer (multiple styles)
5. Geist Sans and Mono
6. Sudo variable font
7. Source Code and Source Code Pro
8. Monaspace — a family of five fonts from Github³

Paid fonts

Buyer beware! Fonts can get very expensive depending on how they're used.
I feel this is very bad form and a license should be a one-time payment.⁴
GT Flexa is a guilty party in this sense, but it does look beautiful.

• Cofo sans and mono
• GT Maru and monospace (super cute!)
• GT Flexa and monospace (cool animations!)
• Sprig Sans (or serif) and monospace
• Fraction collection

Regular (non-variable) font suggestions

• DejaVu Sans and DejaVu Sans Mono (we've used these before, download both from the first link)
• Iosevka can fit more characters on the screen.³
• SF Mono (pairs with SF Pro but x-height is different)
• Roboto Mono
• Menlo
• Intel One Mono
• 5 monospaced fonts with ligatures
• Programming fonts list (a huge preview list of monospace fonts)
• 🔍 Google "Best Coding Font" (there's a lot to choose from)

Font stacks

It's helpful to have a specimen file somewhere to preview styles!

font-family: ui-monospace, 'Roboto Mono', monospace, monospace;

It's always useful to make sure you've got a good set of fallbacks. Perhaps your custom font doesn't load for some reason; maybe they don't have that fallback font installed on their Linux desktop; in that case do your best and use a web safe font; and finally, if that doesn't work, just pick whatever they've got using monospace.

Why is monospace done twice, I hear you ask? The joy of browsers is why. It's better than it used to be, but looking at font land (below), still far from perfect.

Welcome to font land

DejaVu Sans Mono or SF Mono? OpenType (OTF), TrueType (TTF) or Web Open Font Format (WOFF)?⁵ Oh, and now a thing called variable fonts, which allow a single font file to contain multiple typographic variations, such as width, weight, slant (italics), optical size, and a lot besides that! It looks impressive when combined with css animations.

So in short, OpenType fonts has a single file for each style (bold, italics, condensed, etc) whereas a variable font (OTF Variable, or WOFF2 Variable) will be a single file for all styles (variations). I've just downloaded Recursive and I'm presented with three (three!) folders: one for code editors, one for desktop apps, and one for the web!⁶

So ... it's a simple file, but there's a lot packed into that file. Go explore variable fonts and font-variation-settings with some of the links provided. If it all seems a bit much for you, simply stick to individual files for each font style.

Font file size

A small note about file size. Remember that your website is still being downloaded onto the visitors browser, or in our case, Anki's desktop or your iPhone/Android app. The Recursive variable font (with all styles, glyphs, languages, basically everything you'd need) comes in at 719 KB — a single font style (non-variable) for the same font comes in at 117 KB — so that's not all that bad in terms of download speed.

There are ways to get that file size down even more, which I'm looking into, but it seems a tad complicated. Recursive also has a latin only version of the variable font, which comes in at 294 KB, a big difference and shaves off a few micro-seconds of loading time. It's said that the average top site page size is around 2484 KB, so you wouldn't be doing too badly.

Something to be aware of, especially if your mobile data is running low! Less is better.

Footnotes

1. For more on accessibility, check out a friend of mine's website. ↩

2. You'll have to choose wisely, so text on the same line works nicely. That means regular text and inline code. ↩

3. Monospace fonts generally feel wider than regular fonts, due to the loose leading and space between words. This particular family are a little "wider" than most! A bit of a problem for mobile, as it means you won't fit quite as many characters in the view width (vw). Fonts such as Iosevka have options for a more condensed look: you'll fit more characters and columns on your mobile screen. Other condensed monospace fonts are Latin Modern Mono, M+ 1m, among others but they're quite rare. ↩ ↩²

4. I'm not the only one — it seems like a transactional purchase to me, and shouldn't be like a subscription license where you've gotta buy dependant on traffic. ↩

5. No, I don't understand the difference either. Something about hinting I think ... but in general OpenType (OTF) is the preferred option for websites and digital screens. TrueType fonts (TTF) are a little simpler, with faster loading times and smaller file sizes. Web Open Font Format (WOFF) doesn't seem to be as widely used. Actually, Recursive font uses WOFF2, so maybe I'm wrong about that! ↩

6. Just to make life easy. Apparently for the web version, which is a single file, there's also a way to strip it's file size by selecting the unicode range, or some weird terminal thing to create a "partial" variable font that only includes the styles you need. Simple, right? 🤦‍♂️ ↩