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.

  1. https://en.wikipedia.org/wiki/Core_fonts_for_the_Web 

  2. https://github.com/andreberg/Meslo-Font