tmcw / systemfontstack

http://systemfontstack.com/
327 stars 17 forks source link

systemfontstack

Turning back the clock on webfonts since 2018

Webfonts were great when most computers only had a handful of good fonts pre-installed. Thanks to font creation and buying by Apple, Microsoft, Google, and other folks, most computers have good—no, great—fonts installed, and they're a great option if you want to not load a separate font.

Some of the disadvantages of webfonts are:

Some of the disadvantages of system font stacks:

This builds on the amazing, excellent blog post by Ire Aderinokun, as well as plenty of other sources. I'll heavily cite my sources because citations are important. Let's start off.

Notes

Inspired by bootstrap, I consider increasing the specific names in our mono font stack. https://github.com/twbs/bootstrap/issues/26228

But this is a bit confusing:

code, kbd, pre, samp {
  font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

Cite

Why a website for system fonts

Three stacks

First of all, there are really three or more system font stacks:

You could also say 'slab serif' needs a stack, but there's not much precedent for one, even though there are plenty of slab serif system fonts.

Google -> copy + paste

This should be as short as possible. Good fast font stacks should be default. The website should make them obviously copy pasteable. Maybe not a copy button though.

What you see is what you will eventually get

It's useful to know what the font stack looks like at various levels of fall-through - does it look bizarre on Windows or Linux or Android? We should make that obvious.

Make pitfalls obvious

Don't start a shorthand font declaration with -apple-system, and other bummer lessons.