What *is* the best web-safe font?

Since the dawn of the web, people have been divided. This all boils down to one question: what is the best web-safe font?

All jokes aside, web-safe fonts are an important part of the web. You can safely assume that these fonts are installed on any given device.

Now, it's 2021. You can use custom fonts nearly anywhere. But there are still some very important cases where it's a good idea to set a web-safe font, even as a fallback.
Email, for one. There's no guarantee that your receiver supports custom fonts -- their boss might insist they use a decades old version of Outlook. Or maybe they want to prevent tracking, so they disable remote loading when viewing their email.
That last one prompted me to write this; I turned off remote-loading and received a mail from a colleague, but the font was Times New Roman. The inspector showed me the font used was Calibri.

And that's just email! There are a lot of scenarios where a user might be offline, say when someone might load your PWA without internet, but fonts weren't set properly.

When any of those things happen, you want to fall back to a font that you know the user has.

font-family: sans-serif

This is a big one, and a handy one, for many. sans-serif isn't a typeface by itself, but it basically tells the user-agent to pick something that it wants to, so long as it's in that category. The same goes for font-family: serif and font-family: monospace.
There are pros and cons to this approach. The biggest pro being that a user can choose their own favourite font as the default fallback.
The downside is that you don't know what font it's going to be. Maybe the user set Comic Sans as their fallback sans-serif font -- yikes!

There's a real value in knowing what web-safe fonts you can and should use. Maybe you can even choose not to use any custom fonts at all!

Web-safe fonts

There are some misconceptions about what constitute a real web-safe font. Some would claim that Calibri is one. I don't believe that it is, because there are a great many devices (mobile and desktop) that don't support it. I'm going to use Wikipedia's list of Core Web Fonts to define what a true web-safe font is.

I'm going to focus on three font-types: Sans-serif, Serif, and Monospace. Cursive and Fantasy have too few to pick from.

The Best Web-Safe Sans-Serif

There's a saying in Dutch that says, "You cannot dispute taste". Well I think that's a load of crap. Verdana is the best web-safe font, and here's why: it's made to be comfortably readable (successfully, I might add), pleasant, on even low-resolution displays. Bold is actually BOLD.

Now I hear some of you saying, "but what about Arial?"
Arial is famously a clone of Helvetica. It's fine. It's pretty much readable, metrically identical to Helvetica (which might be important in print, but who cares about that here, right?), but it's not nice.

It also suffers the same fate as Times New Roman, albeit less harshly, for being a default font on many systems. This can make it come across as tasteless and sometimes even thoughtless.

The best web-safe monospace font is Andale Mono, and the best web-safe serif font is Georgia.
The choices for monospace/serif come down to just two per category, and the other choice is obviously much worse.
Times New Roman, as said previously, suffers from being the default and instantly looks like the author is still putting lorem-ipsums in their pages.
Courier New, likewise, looks like an error message every time.

Andale Mono and Georgia are not bad at all and serve their purpose neatly.

By the way, shout out to Trebuchet MS for being an overlooked, yet fun lil' font.

Thanks for reading. In my next blog post I'll be discussing the best web-safe color name. (Spoiler: it's rebeccapurple)