Modern Font Stacks

https://news.ycombinator.com/item?id=35150345 ("Show HN: Modern Font Stacks – New system font stack CSS for modern OSs (modernfontstacks.com)" (2023); 144 comments)

Re: Modern Font Stacks

#5

Post by T3RMINATED » Fri, Oct 03, 2025, 12:22 PM UTC

[dead]

Re: Modern Font Stacks

#6

Post by lloydatkinson » Fri, Oct 03, 2025, 12:36 PM UTC

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

Re: Modern Font Stacks

#7

Post by esafak » Fri, Oct 03, 2025, 12:46 PM UTC

factorialboy wrote: post #2

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

https://news.ycombinator.com/from?site=modernfontstacks.com

Re: Modern Font Stacks

#8

Post by yoz-y » Fri, Oct 03, 2025, 12:56 PM UTC

lloydatkinson wrote: post #6

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

Depending on the use case that might be a positive. For a basic web application for example it is better to conform to the host OS style.

For most documents mainly designed for reading it should not matter at all. People will do a lot of stuff to your page anyways (reader mode, zooming 10-20x, adblockers that block fonts…)

Re: Modern Font Stacks

#9

Post by xd1936 » Fri, Oct 03, 2025, 1:03 PM UTC

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

Re: Modern Font Stacks

#10

Post by krono » Fri, Oct 03, 2025, 1:03 PM UTC

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.