tmcw / systemfontstack Goto Github PK

HTML 100.00%

systemfontstack's Introduction

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:

If you're including fonts from TypeKit or Google, you're hitting another domain. So, they might hurt your site's ability to work offline, will require extra domain connections, require extra entries in your Content-Security-Policy
Webfonts often have a narrow range of glyphs included, so they can make your site's experience in non-English languages sub-par
Webfonts also tend to have a scarcity of weights, and in a lot of cases you'll only tick off a few buttons for the weights you want to include, which means that your site will be missing styling - or even worse, synthesize faux-bold styles. Bad news!

Some of the disadvantages of system font stacks:

Specifying system fonts on some platforms is just weird. -apple-system and so on.
You can sometimes get another font of the same name that exists on someone's computer somewhere.
You can't demonstrate your world-class taste for pleasant typography selection.

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. twbs/bootstrap#26228

But this is a bit confusing:

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

Why specify Menlo,Monaco? As far as I can tell, the only computers that don’t have Menlo, but do have Monaco are those running macOS from 10 to 10.5, - so Leopard and Tiger. That can't be a sizeable chunk.

Cite

Why a website for system fonts

Three stacks

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

Mono
Sans-serif
Serif

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.

systemfontstack's People

Contributors

Stargazers

Watchers

Forkers

wormeyman jamescridland sztheory designtips artisr xet7 sthagen jagarinart monad-one kvdubina sameersismail super-visual mortona42 rodmoioliveira hossammuhammedomar

systemfontstack's Issues

Add emoji fonts

Emojis are non-trivial to render consistently (example 1, example 2) across different browsers and platforms. I think it makes sense to include some documentation on which emoji fonts are considered "system" fonts.

Quotes section

Advantage over browser default font?

CSS has it's own defaults, sans-serif and serif. These allow the browser to specify defaults, and, importantly, the user to choose a default that they need for accessibility or they find pleasing and easy to read - or such.

It seems to me that by default, the default sans-serif font (for example) that the browser ships with will be installed on the system, either because it's an OS font (Safari, Edge) or because the browser will ship it already (e.g. Firefox).

So by using this stack, we're replacing a user-preference/accessibility feature with our own opinionated stack based on guessing a bunch of fonts that the big OS manufacturers use.

It seems the browser default will meet this project's aim of not needing a font to be downloaded, while being preferable because it gives the user control.

Furthermore, outside of Apple+Microsoft (unsure about Google), this stack does not match system's fonts. It specifies a stack where the first one wins.

For example, I'm on Gnome. I have my default font set in Gnome, and also set in my browser's config, to Lato. What font do you think I see your website in?

Nimbus Sans.

But wait! Nimbus Sans is not:

in the system font stack
set as my browser's default sans-serif
set as my system's default sans-serif

This is because many systems include Nimbus Sans and configure it as a substitute for the proprietary Helvetica, which is listed further up the stack.

So using this font stack, I get a font that I don't see anywhere else on my system. So "Thanks to ... Apple, Microsoft, Google..." I get their font choice imposed by sites using this project. (I mean, don't get me wrong, I'm grateful you didn't put Comic Sans in the list.)

Use MonoSF on Mac

OSX "code style" is now defaulted to SFMono I think; whereas the fontStack uses Menlo

Include examples of serif and mono

Add better 'marketing material'

Highlights of benefits, etc.

Show alternative font stacks

Sites using system font stack section

Chrome on Windows 10 uses Arial, even when Segoe UI is available

Not sure why, but that happens when using the recommendation given here as-is. Even adding quotes and fixing capitalisation doesn't help.

Cantarell is missing in the stack

If you are a Gnome user (I'm talking pure Gnome, like Fedora or Arch), you do not have the Ubuntu font installed. The default system font on Gnome is Cantarell. It should be added to the stack right before Ubuntu.

font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;

Family names containing whitespace should be quoted

This is not error, but just remove this warning in w3 css validator

Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.

Must be like this
-apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, Ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;

Link to windows, mac lists of pre-installed fonts

https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows

twitter card

Mention `system-ui` and `ui-*`

At least system-ui seems widespread enough for usage.

favicon

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.