Modern Font Stacks (modernfontstacks.com)

Good resource.

Pretty sure I've seen it posted before, perhaps on HN itself.

[flagged]

[dead]

Sure there is no flash with “system ui” font but that font is different on every OS?

I use this quite a bit! At the very least, if you're going to insist on using a custom font, having the rest of one of these stacks behind it can help guarantee that users with third-party resource blockers or other weird browsers get an experience closer to what you intend.

For example, I always take Google Font's suggestion for Inter[1]:

  font-family: "Inter", sans-serif;

and change it to:

  font-family: "Inter", system-ui, sans-serif;

or e.g. EB Garamond[2] from:

  font-family: "EB Garamond", serif;

to:

  font-family: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;

It makes for less layout shift on slower connections too.

1. https://fonts.google.com/specimen/Inter

2. https://fonts.google.com/specimen/EB+Garamond

An example of something to keep in mind with this technique is that you might actually end up causing the browser to render a different font than either you or the user intended.

For a practical example:

Environment

  - Latest Firefox on Windows 10.
  - Manually installed fonts 'Cascadia Code' and 'JetBrains Mono NL'.
  - Firefox default 'monospace' font set to 'JetBrains Mono NL'.

Setting `font-family: monospace;` would end up rendering 'JetBrains Mono NL' - the user-configured default monospace font.

Setting `font-family: 'Cascadia Code', monospace;` would also render 'JetBrains Mono NL' - privacy features prevent pages from querying non-standard system fonts and this will also be reflected as a console warning message: 'Request for font "Cascadia Mono" blocked at visibility level 2 (requires 3)".'

Now, if you were to use he "Monospace Code" font stack listed on this page `font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;`, you will render... Yup, 'Consolas'!

  1. `ui-monospace` - remains unsupported by Firefox which is lame (would also render 'Consolas').

  2. `Cascadia Code` - see above, access denied because it isn't natively available on Windows 10 (also, coding ligatures... more like illigatures, amirite?).

  3. `Source Code Pro` - skipped due to unavailability.

  4. `Menlo` - skipped due to unavailability.

  5. `Consolas` - next option in line, this one is available and is the one that will be chosen.

  6. `DejaVu Sans Mono`  - skipped, font already determined.

  7. `monospace` - skipped, font already determined.

These modern font stacks suck. Please, if you want to render font and it has to be something specific, then use an actual web font and simply fall back to the default 'monospace' which is controlled by the user.

I don't really get it, maybe my phone is just old but I saw exactly 3 fonts on this page: serif, sans, and mono. None of the other fonts are available on my phone so each category looked identical. Is this experience better on other devices? To me this was not a useful demo because it reinforced the fact that you need to ship fonts if you want users to see that specific font.

Right now, the webfont CSS file for my website and blog is 89734 bytes in size. This is a very fast load, with well under a fraction of second of “font change flash” even on a 4g network in a third world country.

Point being, I don’t see the point of having a large font stack in the day and age of webfonts. To get a reasonable looking “flash of content”, I used https://screenspan.net/fallback which determined that Verdana (available everywhere except Android/ChromeOS and readily available even for Linux) has about the same metrics as Roboto Serif, the font I use a subsetted version of for my blog.

As an aside, I feel Roboto Serif is a very good open source Verdana replacement for the 2020s: It’s very easy to read and OFL licensed to boot.

Similarly: https://www.cssfontstack.com/

I've been using the Verdana core web font on personal sites for close to twenty years now, I still think it's very readable and easy on the eyes.

I find it generally more "well-kerned" than a lot of modern web fonts.

Works everywhere.

One thing to keep in mind when developing these large lists of fonts is that they are generally terrible for performance if the appropriate glyphs for what you are trying to display aren't present in the first font (and the font is available - this isn't an issue if the font isn't available at all).

This is generally more of an issue with non-latin scripts (or when emoji is present for example), and developers adding a font which doesn't have glyph coverage - or sparse glyph coverage.

Chrome/Firefox devtools both have a section "Rendered Fonts"/"Used Fonts" which show which gylphs are used from which font.

Additionally if you are showing non-latin, make sure to language tag your markup: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

`font-family: sans-serif` if not language tagged with incur a similar fallback perfromance penalty (the browser will have to change the "english" sans-serif font, find no glyphs, then use the "other-lang" sans-serfic font).

The sliders are broken by being too cute. The cursor is changed from a pointer to a hand, and then you have to hit a narrow target with a broad cursor.

I love this.

Here’s the less modern predecessor from way back:

CSS Font Stack: A complete collection of web safe CSS font stacks - https://news.ycombinator.com/item?id=4415661 - Aug 2012 (22 comments)

what is the best font for

- reading, - just looking at, - efficiency in printing

I am missing something or do these fonts not support small caps and old style numerals?

See also:

https://systemfontstack.com

It's similar.

Still would love a geometric chunky bold font, like Circular or Sharp Sans, shame that Geometric Humanist doesn’t have heavier weights.