Web Fonts in 2019
Web fonts are still the best fonts.
In my experience, anyways.
Ye Olde Web Fonts
The original list of Microsoft’s safe-to-use web fonts1 includes: Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings.
I don’t really like using any of those, except maybe Andale Mono (gone now?), Georgia, & Trebuchet MS. Verdana is great at low sizes, like in Excel, but I don’t like it much in regular ole typography.
My favorite fonts
You’ll see these fonts on this website, along with a couple other options I’ve tried over time.
I find it pointless to use The Same Font on different devices. My Linux fonts aren’t the same as my OS X fonts, &c.
| type | Mac OS | Windows | Linux |
|---|---|---|---|
| body text | Palatino, Helvetica | Palatino Linotype | URW Palladio |
| monospaced | SF Mono, Menlo, Monaco | Consolas, Courier | Linux Libertine Mono O |
| display text (titles..) | Geneva, Avenir | Segoe UI | Carlito |
I “see” my site as the Mac OS version, that’s canon. The rest is adaptation.
Runners up
| type | Mac OS | Windows | Linux |
|---|---|---|---|
| body text | Baskerville, Lucida Grande | Cambria, Franklin Gothic, Noto Sans | Century Schoolbook, Gentium Book |
| monospaced | Andale Mono, Courier | Noto Mono, NSimSun | Liberation Mono |
| display text | Didot, Lucida Grande, Optima | Bahnschrift, Corbel, Franklin Gothic, Lucida Sans Unicode | Linux Biolinum O, MathJax_SansSerif |
Note that some of these won’t always be installed, or may be installed on 2 or maybe all 3 OSs, but who knows?
Going custom
It’s tempting to call out to a font I know will be there on my machine, but yours maybe not so much. I really don’t want to set up an include for a web font: they’re too big to inline, and I hate causing another load that delays painting. Fonts are good to have soon, to render quickly.
Fonts I’d like to reference, but have not, since you can’t count on them being there: Fira Mono, Fira Sans, Comic Neue, ETBembo, Fixedsys Excelsior 3.01, Courier Prime, Courier Prime Code, IBM Plex Mono, Inconsolata, Source Sans Pro, Source Code Pro, … .
For me, for this blog, built-ins are just fine.
Miscellaneous
You can also do crazy stuff like install Meslo2 on Linux (or Windows) to look much like Mac OS’s Menlo.
You could probably figure out how to target Mac OS’s San Francisco font, but I don’t remember how.
Don’t inline
I don’t recommend inlining fonts: they’re fuckin’ huge!
If you think about it, it’s basically a hundred different little pictures. Vectorized, sure—that saves space—but still. I would inline a GIF that’s very small, and I’d inline CSS if it’d otherwise be the only linked resource,
but I wouldn’t inline a whole font unless it’s very small &/ very good &/ worth it.