6 ms·
Modern Font Stacks
- factorialboy 1y agoGood resource. Pretty sure I've seen it posted before, perhaps on HN itself.
- perihelions 1y agohttps://news.ycombinator.com/item?id=35150345 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)
- dang 1y agoThanks! Macroexpanded: Modern Font Stacks - https://news.ycombinator.com/item?id=35168652 https://news.ycombinator.com/item?id=35168652 - March 2023 (9 comments) Show HN: Modern Font Stacks – New system font stack CSS for modern OSs - https://news.ycombinator.com/item?id=35150345 https://news.ycombinator.com/item?id=35150345 - March 2023 (142 comments)
- esafak 1y agohttps://news.ycombinator.com/from?site=modernfontstacks.com https://news.ycombinator.com/from?site=modernfontstacks.com
- castrillo 1y ago[flagged]
- T3RMINATED 1y ago[dead]
- lloydatkinson 1y agoSure there is no flash with “system ui” font but that font is different on every OS?
- yoz-y 1y agoDepending 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…)
- perardi 1y agoI don’t think this is a great solution for, broadly, consumer sites and apps. In a lot of cases, branding matters, and having consistent cross-platform rendering matters. However, I’ve had good experiences using system-ui with in-house dashboard-y apps. I’m the principle UI designer at my startup, and I recommend this font stack for anyone coding up internal-use-only observability tooling and monitoring stuff. We’re all on Chrome, we’re all on Macs, and getting SF Pro on the page without having to call a CDN or manage font assets is a win.
- xd1936 1y agoI 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 https://fonts.google.com/specimen/Inter 2. https://fonts.google.com/specimen/EB+Garamond https://fonts.google.com/specimen/EB+Garamond
- strenholme 1y agohttps://screenspan.net/fallback https://screenspan.net/fallback is a good resource for finding out which system font looks most like the intended webfont, e.g. in my use case, Verdana has similar metrics to Roboto Serif.
- kccqzy 1y agoBut there's no guarantee that system-ui is even a sans serif font. Why make that change?
- xd1936 1y agoBecause they're really different? system-ui is the specific font the OS uses for its interface... San Francisco in macOS/iOS/iPad OS, Roboto in Android, Segoe UI in Windows, etc. sans-serif is often Arial or Helvetica, but could be anything.
- krono 1y agoAn 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.
- leephillips 1y agoYour example is instructive, but I fail to see what the problem is. This is working as intended, no?
- andix 1y agoIt's exactly what the manual specifies: https://github.com/system-fonts/modern-font-stacks?tab=readme-ov-file#monospace-code https://github.com/system-fonts/modern-font-stacks?tab=readm... Windows 11+ -> Cascadia Code Windows 7+ -> Consolas
- ericyd 1y agoI 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.
- jsheard 1y agoI assume you're on Android? That's the weak link when it comes to system fonts, it only ships with a handful so many of these stacks end up looking identical in practice. If you go through to the GitHub page there's screenshots of how each stack gets rendered on each platform. If you're not happy with what Android offers then a possible compromise would be to make a hybrid stack which tries Windows and Apple system fonts first, then falls back to a webfont if those aren't available.
- ericyd 1y agoYeah I'm on android. I guess the hybrid approach offers a couple benefits, thanks for the reply.
- craftkiller 1y agoHah, I ran into the same issue on Linux. I forgot that I only install a couple fonts on my machines (noto, cascadia, and adobe-source-*) so I was also looking at them thinking "Why are these all the same? Even hand-written looks like a normal typed font". Thanks for the suggestion to go to the github for the screenshots: https://github.com/system-fonts/modern-font-stacks https://github.com/system-fonts/modern-font-stacks
- strenholme 1y agoRight 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 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.
- chipotle_coyote 1y agoI think at least a small version of a font stack like these isn't a bad idea even if you're using web fonts. Folks who insist on disabling web fonts are likely a small percentage of any given site's readers, but they're out there. (And for certain sites, like this very one, there's a much higher percentage of them, usually ready to hop right out and proclaim how arrogant it is for web developers to choose typefaces for them and CSS was a mistake and we should all go back to VT100 terminals like God intended etc. etc.)
- strenholme 1y agoMy font stack looks something like this: font-family: "Roboto Serif", Verdana, sans-serif; (Because of the OFL, “Roboto Serif” is replaced by another name since I modified the font when I subsetted it) Large font stacks made sense in the days of IE6 for the following reasons: • Dial up users did not have enough bandwidth to download webfonts. • Only IE supported webfonts, in a weird proprietary “eot” format • 99% of desktop operating systems all had the same web safe fonts “Verdana/Georgia/Trebuchet/Times New Roman/Arial/etc.” Here in 2025, font stacks no longer make as much sense: • 100k for a webfont package is a small file, even on a 4g network in a third world country. [1] • All mainstream current browsers support woff2 webfonts [3][4] • On Android, font support is very limited and has no support for the old school “web safe” core fonts for the web (Verdana/etc.) As an aside, if metric compatibility (i.e. all of the fonts letters are the same size) with an OS core font is needed, “Arimo”/“Liberation Sans” is metrically compatible with Arial, “Liberation Serif”/“Tinos” is metrically compatible with Times New Roman, and “Cousine”/“Liberation Mono” is metrically compatible with Courier New. [1] CJK users have font files large enough where the download size might be an issue. In that case, we either accept the download size as part of a modern website, or we accept that Android users will get Noto [2] while Mac/Windows users will get different looking system fonts. [2] These font stacks linked in this article by and large all end up using Noto on Android phones. [5] I personally await the day when Apple and Microsoft include Noto by default with their OSes, so “font-family: Noto, sans-serif;” always does the right thing. [3] 96% over at https://caniuse.com/?search=woff2 https://caniuse.com/?search=woff2 [4] Some people will turn off webfonts, but those people have made it clear they don’t care whether or not they get a font which looks like the design the webmaster intended. Again, use https://screenspan.net/fallback https://screenspan.net/fallback to find a reasonably metrically compatible fallback font. [5] Looking at them in Firefox on my Android phone, “System UI” works, “Neo-Grotesque” gives a pencil thin font which is very difficult to read (“Inter” on my phone is pencil thin), “Slab Serif” actually looks nice (both in Windows, with Rockwell, and on Android, with Roboto Slab), and “Handwritten” works for its purpose (Android uses a “Cursive” fallback font). All the other font stacks are giving me the system default serif/sans/mono fonts (either Noto or Roboto). With Chrome on my Android phone, source sans pro is used a lot, as well as Google specific metric compatible versions of “Arial”, “Georgia”, “Courier New”; “Slab Serif” doesn’t work there even though Roboto Slab is installed on my Android system. Point being, Android has made web safe fonts a thing of the past.
- sometimez 1y agoSimilarly: https://www.cssfontstack.com/ https://www.cssfontstack.com/
- reaperducer 1y agoThis one surprised me: Helvetica Win: 7.34% Mac: 100% I know Microsoft prefers Arial over Helvetica, so I guess I shouldn't be surprised. But I didn't expect macOS to adopt it so widely. Arial Win: 99.84% Mac: 98.74% Then again, the Mac was designed from day one for this sort of thing.
- bombcar 1y agoI believe Helvetica has shipped with every Macintosh since the very first one.
- dhosek 1y agoNot quite. The original sans font on the Mac was Geneva. It was only with the advent of the Laserwriter that Helvetica became a standard font on the Mac.
- ascorbic 1y agoIt just means it's installed by default on all Macs, but not Windows
- tracker1 1y agoIf you're really targeting either, you're probably better off with the fallback sans-serif which is often one or the other based on the platform (historically, not 100% sure on current browsers). Arial displays slightly better on Windows, and Helvetica likewise with Mac.
- donatj 1y agoI'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.
- bfgeek 1y agoOne 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/Global_attributes/lang 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).
- Animats 1y agoThe 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.
- divbzero 1y agoI 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 https://news.ycombinator.com/item?id=4415661 - Aug 2012 (22 comments)
- minroot 1y agowhat is the best font for - reading, - just looking at, - efficiency in printing
- mbana 1y agoI am missing something or do these fonts not support small caps and old style numerals?
- txrx0000 1y agoSee also: https://systemfontstack.com https://systemfontstack.com It's similar.
- zghst 1y agoStill would love a geometric chunky bold font, like Circular or Sharp Sans, shame that Geometric Humanist doesn’t have heavier weights.