12 ms·

Show HN: Modern Font Stacks – New system font stack CSS for modern OSs

335 points by danklammer 4y ago

hypertexthero 4y ago
Excellent work, and thank you for introducing me to the lovely Seravek - https://en.wikipedia.org/wiki/Seravek https://en.wikipedia.org/wiki/Seravek I did not know it was a default font in macOS.
partyguy 4y ago
Similar: https://systemfontstack.com https://systemfontstack.com Either way, it's the best way to go these days if you don't need any fancy external fonts on your website.
- doodlesdev 4y ago
  This website feels outdated, if the idea is to use the system fonts you might as well be using system-ui (although that can come with its own set of can of worms if you care about i18n). Specially because it's using -apple-system which is literally the same thing as system-ui nowadays (Apple was the one to propose and push for system-ui). The font stacks themselves seem solid though. Specially for serif and mono where of course system doesn't cut and ui-monospace is only supported on Apple devices (similar to system-ui but for monospace).
lagrange77 4y ago
Nice. It would be really useful, if the site could preview the system fonts of those systems you aren't using, though.
- pseudonymcoward 4y ago
  The github page has screen grabs of all the fonts in each stack: https://github.com/system-fonts/modern-font-stacks https://github.com/system-fonts/modern-font-stacks
  - lagrange77 4y ago
    Nice, thanks.
nati0n 4y ago
Limitations based on copyrights significantly hinder the helpfulness of this site, although the design is top notch.
- hobofan 4y ago
  What do you mean? This only includes fonts already present as standard font on the operating system, so presumably they are all permissively licensed. Either way, you as the website owner are not responsible for whatever font ends up being chosen by the browser to render the website.
  - tatersolid 4y ago
    >This only includes fonts already present as standard font on the operating system, so presumably they are all permissively licensed. No they’re not. Apple, Microsoft and even some Google systems include fonts which are commercially licensed and usable only on a device licensed for that OS. In fact Apple and Microsoft contracted the development of many fonts you see on today’s devices and the web.
    - aprilnya 4y ago
      But you’re not distributing the font. You’re not doing anything bad. “font-family: ‘Copyrighted Font’” is not distributing the font, and so is not copyright infringement, you’re just telling the browser to use it if it’s already there. Disclaimer: Not legal advice
      - tatersolid 4y ago
        You’re correct that so long as you don’t serve or otherwise distribute the font files or a derivation the licensing doesn’t matter. But my comment specifically referred to the “they are all permissively licensed” portion which I quoted. San Francisco, Segoe, and many other OS-included fonts have commercial proprietary licenses, not permissive licenses as the GGP post claimed. Try to serve San Francisco WOFF2 files as a font-family src on your site and see how Apple’s lawyers react.
corywatilo 4y ago
This is really well done. Paragraph view really helps to visualize it. CSS Font Stack [1] used to be the place for this, but that site hasn't changed in decades. The one piece missing for me is the percentage adoption by platform (like in the above referenced site). Regardless, this is still replacing CSS Font Stack for me. The irony is that they were both created by people named Dan. [1] https://www.cssfontstack.com https://www.cssfontstack.com
- wbobeirne 4y ago
  Came here to post this as well. I was going to start making a replacement for cssfontstack, so I'm glad to see this here. But also feel that the percentage adoption was a huge value to me, as it helped me prioritize fonts in my chosen stack to maximize consistency. I'd love to see stats that include popular mobile OS's as well.
pimlottc 4y ago
Please stop using green vs red like this, it's very difficult for many people, including me. Especially for thin lines.
- danklammer 4y ago
  This is great feedback. I will update to be more accessible.
  - peterfirefly 4y ago
    You might be able to get away with changing your reds and greens so (most) colour blind people can see the difference between them.
  - Matheus28 4y ago
    You could add a strikethrough on the red ones, and keep the color. .nope { text-decoration: line-through; }
  - scns 4y ago
    https://colorhexa.com https://colorhexa.com shows how each color "is perceived by people affected by a color vision deficiency".
- coreyp_1 4y ago
  I didn't even realize that the red/green was present until you mentioned it! I do actually perceive it, now that you draw attention to its existence, and can tell the difference, but you are correct: thin lines are aggravating to deal with! And it's not just the red/green issue: it's also in distinguishing them from grey when the lines are thin. Side issue: when I was a kid, my math teacher insisted on grading using those thin BIC red pens. The problem is that it was indistinguishable from my own writing (at a glance), and it took forever to find my mistakes that were "clearly marked" by the teacher. Thin red lines are pointless to me. I guess it's a good thing that I'm naturally good at math!
  - gketuma 4y ago
giraffe_lady 4y ago
It's a good default approach and the one I use most of the time. If you're setting a lot of text, or mixed text especially that has both prose and graphs or data you run into the limitation of the system fonts just not having the full set of characters. Using text figures and tabular figures correctly for example is one of the main things that makes those complex mixed texts read well and look "professional" and afaik none of the system fonts include all three sets of numbers, even if they're available in that font from other sources. They also mostly don't support small caps, which is better looking than most other ways you can emphasize text for titles or diagram labels. The CSS auto-conversion fallback is not a good substitute imo. Anyway again it's a great approach for basic text and still a good start for more complex stuff, but not a full solution depending on how much you care about text presentation. But since most websites are mostly text I think you should care a lot.
deleted 4y ago
[deleted]
glogla 4y ago
I like it. It works for English, but sadly the selected fonts don't always have all the national characters. Sometimes there are similar enough replacements (e.g. Charis instead of Charter) but not always.
- reaperducer 4y ago
  I agree, since I build multi-lingual web sites. I hope this will be helpful. There is a little box at the top that allows you to replace the default text with the text of your choice to test whether your specific non-ASCII characters will work.
  - yawpitch 4y ago
    Ahh, thanks for noticing that, I’ve got a ludicrous number of Vietnamese accents to deal with, and have been looking for just such a tool!
ikesau 4y ago
Super. Will keep this in mind for future projects. Is there a way to get a sense for how well supported each font is at each level? Like caniuse.com - "80% of users will see Cambria" or whatever.
- deleted 4y ago
  [deleted]
- VPenkov 4y ago
  Sort of but not really. Operating systems usually come with a mostly-known set of fonts, however major updates sometimes change or iterate on fonts. Also, installing certain Office and/or design software adds more fonts. But this is why people use such lengthy font stacks that look alike.
- kalleboo 4y ago
  Doesn't show install base, but the GitHub page shows which OS has which font https://github.com/system-fonts/modern-font-stacks https://github.com/system-fonts/modern-font-stacks
chrismorgan 4y ago
https://github.com/system-fonts/modern-font-stacks https://github.com/system-fonts/modern-font-stacks explains each stack and which fonts are expected to be used where, with screenshots. This information makes it (mildly bizarrely, and quite disappointingly) generally more useful than https://modernfontstacks.com/ https://modernfontstacks.com/. —⁂— A few remarks (not all that I could make, but I should sleep). System UI: risky, it’s a trap, there’s basically no legitimate scenario for these semantics on the public web. See https://github.com/w3c/csswg-drafts/issues/3658 https://github.com/w3c/csswg-drafts/issues/3658 (skim through a bit, I’ve got a comment near the end too). Monospace Slab Serif: every one of the fonts named here is a bad font: (a) Nimbus Mono PS mangles things like the two-column `fi`, ligating them to a single-column `ﬁ`. See https://github.com/ArtifexSoftware/urw-base35-fonts/issues/31 https://github.com/ArtifexSoftware/urw-base35-fonts/issues/3.... (b) Courier New is unreasonably thin due to bad digitisation techniques which used to be worked around by hinting and ClearType special-casing, but it’s common for neither of those to work to make it tolerable any more. Its 400 weight is more like a 250 (if even that), and painful to read in many common configurations. Never use it. (c) Cutive Mono apparently copied Courier New’s known-awful thinness!? What were they thinking? Monospace Code: seriously, just go `monospace, monospace` these days. Firefox 98 on Windows was the last browser where this wasn’t at the very least perfectly adequate. (The doubling is to work around the stupid probably-13px font size misfeature that I’d like to try to convince browser makers to ditch, but haven’t tried yet.) > Emoji Support Does adding these fonts to the end of the stack actually achieve anything useful? I don’t recall these being necessary or useful. (I vaguely recall some sort of priority issue related to text/graphical representations, but that was quite a few years back and I’d expect it to have been dealt with now, though it’s possible some U+FE0F might be needed if you omit this?—though frankly that’d be needed anyway for universal support. Anyway, I’d like concrete explanation of what this stuff does, if anything.) > Anti-Aliasing If I recall correctly, these tweaks are largely Apple-specific, grossly misleading in name, highly controversial, and probably a waste of time. I invite correction or further education, because I haven’t thought about them for maybe a decade and don’t use a platform where they do anything. —⁂— This is much better-thought out than most sets of suggestions, but I’d honestly still suggest dropping nuance in most cases, and just using `serif`, `sans-serif` or `monospace, monospace`. But if you want a certain general sort of character, this is pretty good stuff. I’ve definitely done `font-family: Georgia, serif` where I wanted to express a preference for a wider sort of serif, and I’d do it again¹. —⁂— ¹ Even if I personally will get my own chosen serif font, since I’ve unticked Firefox’s Settings → Fonts → Advanced → Allow pages to choose their own fonts, instead of your selections above. Try it yourself, you might be pleasantly surprised at how much the consistency improves the web, like I was. You might also develop a still-deeper hatred of non-zero letter-spacing on body text, which is absurdly common for something that has absolutely no legitimate use case in English text.
wiradikusuma 4y ago
Sorry I don't understand how to use this? Is the website supposed to be like Google Fonts website where I select a font and it will give me code snippets to paste in my HTML?
- tomhanlon 4y ago
  Instead of loading a font from Google Fonts you would just use the font-family property for the given typeface: font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; for instance.
- anamexis 4y ago
  I think it's suggesting font families which have similar characteristics and for which at least one is likely to be installed for a given OS/browser.
yowzadave 4y ago
It would be nice if there were a convenient way to test the way these fonts will render on a variety of different systems. I.e., BrowserStack but you can specify the installed fonts on the system you are testing.
- noneeeed 4y ago
  The repo actually has png/gif comparisons for them. https://github.com/system-fonts/modern-font-stacks#industrial https://github.com/system-fonts/modern-font-stacks#industria... But yeah, I'd love some way to preview a custom piece of text.
amelius 4y ago
It would be even better if the fonts were just the same across platforms.
- yowzadave 4y ago
  What if you're building a web app, and your goal is to emulate the system font appearance (whatever it may be) of the client?
  - tasuki 4y ago
    I think the comment you're replying to still applies?
  - SquareWheel 4y ago
    Then your default font stack should look something like this. https://github.com/twbs/bootstrap/blob/adf7b8dc4083b6ddc318e466dbb5d87f3af0ce17/scss/_variables.scss#L606 https://github.com/twbs/bootstrap/blob/adf7b8dc4083b6ddc318e...
javajosh 4y ago
This is valuable. But the value is hidden because the "key" is at the bottom, not at the top. This page's value is that it shows you what device fonts are available (and in use), but that's not clear (enough). (And this value is further reduced by the color scheme, which many people cannot distinguish.) I'd also like to see a discussion of where you got these stacks.
SquareWheel 4y ago
Great website. There's really no concept of "web safe" fonts today when you mix in mobile operating systems. At best you can choose similar-looking fonts and hope for the best, and this site seems useful in that aim. One tool I'd love, though would clearly be out of scope here, would be a way to find safe fallbacks for popular webfonts. For example I recently created a site in Montserrat. After some testing I found a close fallback font was Verdana, with a size-adjust[1] of about 99.5%. That resulted in minimal document reflows when the font was slow to load. Picking the top 10 or 20 popular Google Fonts and finding nearby fonts with good scaling tweaks would be very useful. I could see a sister project to this site offering something like that. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/size-adjust https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/...
- ZeroGravitas 4y ago
  https://meowni.ca/font-style-matcher/ https://meowni.ca/font-style-matcher/ Is a tool that lets you play around to discover good fallback settings.
  - SquareWheel 4y ago
    Thanks for the link. I've actually used this one before, but it's not quite what I was hoping for. These settings (font-size, line-height) are defined in the content CSS, not the @font-face rule, so they won't be automatically applied when the font is swapped. Properties like size-adjust or ascent-override are better for matching like-fonts as it's all automatic. Also, while it is very useful to have a tool to come up with your own pairings, I think a list that covers some of the most popular fonts and creates perfect settings would be very useful for quick implementations. Something like the submitted site above that has done the legwork for you.
    - corny 4y ago
      Maybe this is more what you're looking for? https://screenspan.net/fallback https://screenspan.net/fallback
webmasterfish 4y ago
Correct me if I'm wrong but is this basically just advicing on using web-safe fonts?
- stefncb 4y ago
  Every operating system has different fonts installed by default. Unless you use custom fonts, you can't be fully consistent, but the website has some groups of similar fonts that should get you the same style regardless of operating system.
danielvaughn 4y ago
Just wanted to say that I love the dot-pattern background. Very subtle, nicely done.
fouronnes3 4y ago
I really like "font-family: system-ui, sans-serif;". Life is short, let's go on with our lives!
- creativenolo 4y ago
  But a short life is to be relished with delights.
andrewmcwatters 4y ago
It seems blatantly wrong to me that anything other than traditional or old style typography would use lower case numbers. Who are these people designing typefaces in the neo-grotesk family with old style numerics?
- adamc 4y ago
  What are "lower case numbers"?
  - vanderZwan 4y ago
    I presume numbers with the top aligned with the x-height[0]. Corbel and Candara both have them if you look at the screenshots on the GH page[1]. [0] https://en.wikipedia.org/wiki/X-height https://en.wikipedia.org/wiki/X-height [1] https://github.com/system-fonts/modern-font-stacks#classical-humanist https://github.com/system-fonts/modern-font-stacks#classical...
  - latexr 4y ago
    Numbers with varying heights, ascenders, and descenders (like lowercase letters). https://en.wikipedia.org/wiki/Text_figures https://en.wikipedia.org/wiki/Text_figures
- vanderZwan 4y ago
  I don't see any lower-case numbers on neo-grotesk, nor do any of the screenshots on the GH page show it so it's not just my machine. Could you maybe have an incomplete font with some weird font-substitution quirks? [0] https://github.com/system-fonts/modern-font-stacks#neo-grotesque https://github.com/system-fonts/modern-font-stacks#neo-grote...
- JonathonW 4y ago
  Microsoft's font designers, apparently. (Corbel and Candara both have them, despite it being kind of weird for a sans-serif font-- those were MS-commissioned fonts launched as part of the ClearType Font Collection with Windows Vista and Office 2007.) None of the fonts here have lowercase figures by default on Mac. (If Neo-Grotesque is showing lowercase figures on your machine, I think something funky is going on with your font stack-- pretty sure none of those fonts should have them by default.)
ar9av 4y ago
Love this! I've been using system fonts for the past couple years to avoid the usual font load glitch, and also to make the apps feel a little bit more at home for users that are used to their OS fonts. For mobile, this seems like the ideal scenario.
pitaj 4y ago
Is it just me or on Android do like 90% of these not really work right? Firefox is especially sparse, but Chrome isn't much better. Does Android just not ship with many fonts? I'm on a Pixel 6 with Android 13. For instance on Firefox: - Transitional, Old Style, Slab Serif, Antique, and Didone fall back to serif - all Humanist variants, Industrial, and Rounded Sans fall back to sans-serif - nothing for Handwritten (so just shows up as sans serif) And Chrome is better but still not great: - Transitional, Old Style, Slab Serif, and Didone fall back to serif - all Humanist variants and Rounded Sans fall back to source-sans-pro
thrdbndndn 4y ago
Everytime "System UI" is mentioned on HN I feel obligated to post this: Be careful about it. The intent of "System UI" is great. However, the actual implementations across multiple platforms and especially with different international languages, not so much. The main issues are: 1. On Chinese and Japanese Windows, it would end up using MS Yahei and Yu Gothic UI. The former isn't optimized to show English-only (or Latin alphabet only) content, while the latter isn't even suitable to display Japanese content, let alone English ones. As the name suggests, it's intended to be a "UI" font - it's extremely narrow to accommodate long Japanese characters in UI elements such as context menu, button etc. You're supposed to use "Yu Gothic" to show normal text in Japanese. And because these two fonts are unicode (include almost every glyphs), it won't fallback to other fonts either. English Windows does not suffer from this issue the other way precisely because its default UI font, "Segoe UI", not only great to show English characters, it also does not contain any CJK glyphs so these would fallback to proper fonts. 2. Unlike "sans serif", system-ui overrides "default fonts" that user can tweak in (any) browser settings. Users can even change fonts for each written script/language to make they have the fonts that suits them best too (and browsers usually have sensible default for them). This means you can use <lang="ja">, <lang="zh">, <lang="en"> to specify language of HTML elements to ask the browsers to use specific fonts for each language. System-ui overrides all these: once you have assigned "system-ui" it will just use system font regardless of any language context. Again, this is particularly bad for CJK users because of problem 1 ("system-ui" fonts have all the glyphs). So end result: Chinese paragraphs use Japanese characters (they're different but have the same Unicode point), and vice versa. 3. In lots of platforms, including MacOS (I didn't test newest version yet), Android, iOS, using "system-ui" will end up using exactly the same font as just use "sans serif" anyway. So it really has little benefit. One of the only benefit of using "system-ui" is on English Windows: lots of browsers including Firefox and Chrome still use Arial as sans-serif's default for Latin content for backward compatibility (you can change it yourself in browser settings, though). So by using system-ui, on English Windows, fonts would become Segoe UI, which is indeed better. But you can "fix" this without messing over Chinese/Japanese users by just apply "Segoe UI" directly. It does not affect other platform either because they simply don't have this font. Actually, this is exactly what most of major websites (GitHub, SO, Twitter, etc.) currently are doing, after they rolled back from using "system-ui" due to issues and backlash mentioned above. Wikipedia also tried, but they now choose to continue rocking "sans-serif" without any fancy "stack". (I'm not a Linux guy so feel free to chime in about situations there.)
starik36 4y ago
This is awesome. One improvement would be to have a preview of what it looks like on the all the major OSes. Bonus for mixing in non-English versions of the OSes.
- conaclos 4y ago
  A preview is available on the GitHub README [0] [0] https://github.com/system-fonts/modern-font-stacks#system-ui https://github.com/system-fonts/modern-font-stacks#system-ui
  - starik36 4y ago
    Exactly what I was looking for. Thank you.
deleted 4y ago
[deleted]
foxandmouse 4y ago
Most of the fonts listed here are premium fonts, the complete DIN typeset costs nearly 2k. If we're going that route, then it's safe to say most of these are lesser than the best in class for each category. popular fonts like Futura, Century Gothic, Baskerville, and Univers are just a few that are omitted.. While there's no objective truth in design, these fonts are not suitable for designers who prioritize typography. However, if you're looking for a quick solution for a side project and don't care much about typography, this list could be helpful. Can't see why it belongs on the front page though.
- joe5150 4y ago
  The type named, DIN Alternate, is included with MacOS (bold and condensed bold only). The GitHub page has some notes about this, along with more info about what systems support which typefaces. https://github.com/system-fonts/modern-font-stacks#industrial https://github.com/system-fonts/modern-font-stacks#industria....
  - foxandmouse 4y ago
    Thanks! the GitHub page includes a lot of (imo) essential information that should be included on the site. The developer clearly did a lot more research than I assumed. That said, one thing to consider if you're using this stack is that this implementation will produce OS specific designs. The fonts in each stack differ significantly between operating systems, which means that testing for each OS will be necessary. I already have an issue with the same fonts looking different due to different rendering methods in each browser/ OS.
    - joe5150 4y ago
      I think it's helpful to keep in mind that any design will be to some extent "OS-specific" for a lot of different reasons, available fonts being only one factor. I also think OS-specific design is perfectly appropriate for a lot of use cases. I use "font-family: system-ui, sans-serif" on my resume page, for example, because I know that the default system fonts look fine (by design) on any screen and a fast, lightweight page is more important to me than a specific font presentation. If you're creating a user interface with really tight tolerances on element size or appearance, different strategies might be more appropriate.
toastal 4y ago
Bold of you to assume I’d want Arial or Ubuntu before the one I set as my user agent default in any stack
prewett 4y ago
Maybe I should know what this is about, but after reading the web page and the Github site, it's unclear to me if this is a set of fonts I download, or a useful set of font CSS settings, or a font renderer or what. What problem is this solving? Why does this work better than just using good quality fonts in the browser? The examples look great, I just don't know what I'm looking at.
- deleted 4y ago
  [deleted]
- nielsbot 4y ago
  I think these are fonts that are generally available on common OSes, so no webfonts needed, in order of preference/specificity. You often (for me, an amateur, anyway) don't know which list of fonts and fallbacks ("stack") to specify if you want a "industrial" font for example. This site has done that research for you.
aimor 4y ago
That dot background causes a distracting strobing effect when I scroll.
- riidom 4y ago
  Switch off Dark Reader :)
  - doodlesdev 4y ago
    But then my eyes will be blasted with the light power of a thousand suns. I prefer the strobing.
  - aimor 4y ago
    When I scroll the background flashes red from subpixel rendering I guess. https://streamable.com/q3ampy https://streamable.com/q3ampy https://ufile.io/21yihckd https://ufile.io/21yihckd
azatom 4y ago
Why is the smallest font size is the largest of what I actually would like to test? The range 0.7-1.5em is what needs tests, above that all looks good.
- danklammer 4y ago
  Good callout. I updated the tool to allow for min of .75rem or 12px.
  - kevincox 4y ago
    It seems to min out at 0.75rem. I don't see where 12px comes in. Unless you are hard coding the root don't size to 16px.
cantSpellSober 4y ago
I've never had a designer tell me "if x typeface isn't available, fallback to y." Simply fall back to the generic name unless specified. Why does "Monospace Code" begin with a generic name (`ui-monospace`) instead of ending with one? (Well done demo, thanks for sharing!)
- danklammer 4y ago
  `ui-monospace` is an extended system font property [1] similar to `system-ui` that is currently only supported in Safari. This will render SF Mono on macOS and iOS [2]. [1] https://caniuse.com/extended-system-fonts https://caniuse.com/extended-system-fonts [2] https://github.com/system-fonts/modern-font-stacks#monospace-code https://github.com/system-fonts/modern-font-stacks#monospace...
  - cantSpellSober 4y ago
    It's also a generic value, like `sans-serif` that typically comes at the end of a stack. If someone has Consolas installed why show them something else only on Safari? https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#syntax https://developer.mozilla.org/en-US/docs/Web/CSS/font-family...
DyslexicAtheist 4y ago
very nice. been looking at the "system-ui" font saying "damn that looks great I must try it", then as I continued to browse further down got confused. Why does every font look the same? It must be my design-ignorant brain not picking up on the subtle differences in these fonts? They're clearly brilliant though. as I couldn't spot any differences in any of them (and all of them looking fantastic and really similar or same as the rest of my system) ... Then it hit me, so went to Firefox -> settings -> Fonts -> Advanced -> "Allow pages to choose their own fonts, instead of your selections above" problem solved :) I was no longer staring at "DejaVu Sans" in every box.
FooBarWidget 4y ago
I don't get it. Why not just use "serif", "sans-serif" and "monospace"? What's the value of specifying specific fonts such as "Charter" or "Dejavu Sans"?
- doodlesdev 4y ago
  I'm a big proponent of doing exactly what you say, however, for some companies the text rendering is an essential part of their branding (take Discord as an example). In those cases you might not want to load webfonts to reduce reflow, bandwith usage, etc. However using sans-serif or serif will generate very different results in each platform, these font stacks are optimized to look almost the same on each platform. The GitHub has much better information about this than the website itself since it has screenshots of the fonts instead of relying on your browser rendering them. In practice though using system-ui, sans-serif, serif and monospace is truly the best answer. I'll override any websites fonts with mine anyways so I don't bother with criticizing websites that use bloated web fonts or font stacks unnecessarily. :D
aakash_test 4y ago
[flagged]
Narushia 4y ago
These look all very solid! There’s one thing that bugs me, though: I would imagine that a “system font stack” would support characters for multiple scripts, since operating systems are commonly localised into many different languages. However, none of the fonts presented seem to support any CJK characters, for instance.
airstrike 4y ago
Not sure if it's just me behind a draconian firewall but Neo-Grotesque doesn't load Inter for me, even though it's on Google Fonts. Why not download it from there?
- joe5150 4y ago
  The site doesn't load any webfonts. It only attempts to use already-installed "default" fonts from various systems. The GitHub readme[1] says Inter is a "user-installed" font, so I'm not really sure it should count here. 1: https://github.com/system-fonts/modern-font-stacks#neo-grotesque https://github.com/system-fonts/modern-font-stacks#neo-grote...
  - airstrike 4y ago
    Sure, but realistically who doesn't deploy webfonts these days? Might as well include them on this site to reflect the current state of the world
    - altano 4y ago
      The point of this website is to cater to people who don't want to deploy web fonts. That's the only reason it exists. It serves no other purpose.
  - hLineVsLineH 4y ago
    Inter is the default font on elementary OS, if I recall correctly.
doodlesdev 4y ago
I would love to see more websites that do this: font-family: system-ui, sans-serif; Instead of trying to download fonts from Google Fonts (which I block though uBlock Origin filters) or the "superior" Bunny CDN or whatever it's called. Nowadays I even went to the point of forcing all websites in my web browsers to use system-ui and I could not be happier. A few advantages of that are: - Websites load faster. - Typesetting is beautiful everywhere. - Text is readable and consistent. The only problem I still have is when websites decide that using web-fonts is a good way to ship icons, I have no option sometimes but enable remote fonts and I hate it. If you aren't using system-ui yet take a look here how it looks in various operating systems: https://github.com/system-fonts/modern-font-stacks#system-ui https://github.com/system-fonts/modern-font-stacks#system-ui
- kevincox 4y ago
  I would even prefer that websites do this: /* Intentional left blank */ And use my defaults. Maybe I have a high DPI display and prefer serif for body text.
kimburgess 4y ago
This is really nice! I've been hardlining the minimalist/utilitarian approach for https://simple.industries https://simple.industries with an intentionally basic system font stack, but this gives a few other options to play with.
amberfarmland 4y ago
[dead]
laserbeam 4y ago
Is it possible to include all the fonts on the site? I know this kind of goes against the point ('cause it's supposed to showcase that offline fonts are cool!), but this is one of the cases where I might to exclude one of the fonts in a stack. I wouldn't be sure where to test that the whole stack looks as I'd expect it.
lloydatkinson 4y ago
It always amazes me Google doesn't simply ship say the top 50 most popular fonts in Chrome that Google are already providing via Google Fonts anyway. Think of all that wasted energy and bandwidth! Every time I suggest this the idea is laughed at and the hand wavy replies say that it can't be done.
- punyearthling 4y ago
  Don't they collect data using their webfonts?
lloydatkinson 4y ago
Which of these fonts is closest to Inter, a very popular font?
- leodriesch 4y ago
  I'd say Inter is pretty close to Helvetica Neue or San Francisco, the system-ui font for macOS and iOS. So I'd say the Neo-Grotesque style. But that uses Arial on Windows which I find pretty awful.
seanhunter 4y ago
These fonts render very poorly on my mac. Every one of them has antialiasing artifacts and so look like old school windows fuzzy fonts. It's particularly noticable on the diagonal strokes but all of the edges are fuzzy.
kamilm 4y ago
Well done tool, thanks! I used the system fonts at https://scrabble-solver.org https://scrabble-solver.org and got a small performance improvement (from ~70% to ~80%) in PageSpeed Insights on mobile. Noticeably it got my Largest Contentful Paint down from ~3.5s to ~2.2s.

335 points by danklammer 4y ago

Excellent work, and thank you for introducing me to the lovely Seravek - https://en.wikipedia.org/wiki/Seravek https://en.wikipedia.org/wiki/Seravek I did not know it was a default font in macOS.

partyguy 4y ago

Similar: https://systemfontstack.com https://systemfontstack.com Either way, it's the best way to go these days if you don't need any fancy external fonts on your website.

doodlesdev 4y ago
This website feels outdated, if the idea is to use the system fonts you might as well be using system-ui (although that can come with its own set of can of worms if you care about i18n). Specially because it's using -apple-system which is literally the same thing as system-ui nowadays (Apple was the one to propose and push for system-ui). The font stacks themselves seem solid though. Specially for serif and mono where of course system doesn't cut and ui-monospace is only supported on Apple devices (similar to system-ui but for monospace).

lagrange77 4y ago

Nice. It would be really useful, if the site could preview the system fonts of those systems you aren't using, though.

pseudonymcoward 4y ago
The github page has screen grabs of all the fonts in each stack: https://github.com/system-fonts/modern-font-stacks https://github.com/system-fonts/modern-font-stacks
- lagrange77 4y ago
  Nice, thanks.

nati0n 4y ago

Limitations based on copyrights significantly hinder the helpfulness of this site, although the design is top notch.

hobofan 4y ago
What do you mean? This only includes fonts already present as standard font on the operating system, so presumably they are all permissively licensed. Either way, you as the website owner are not responsible for whatever font ends up being chosen by the browser to render the website.
- tatersolid 4y ago
  >This only includes fonts already present as standard font on the operating system, so presumably they are all permissively licensed. No they’re not. Apple, Microsoft and even some Google systems include fonts which are commercially licensed and usable only on a device licensed for that OS. In fact Apple and Microsoft contracted the development of many fonts you see on today’s devices and the web.
  - aprilnya 4y ago
    But you’re not distributing the font. You’re not doing anything bad. “font-family: ‘Copyrighted Font’” is not distributing the font, and so is not copyright infringement, you’re just telling the browser to use it if it’s already there. Disclaimer: Not legal advice
    - tatersolid 4y ago
      You’re correct that so long as you don’t serve or otherwise distribute the font files or a derivation the licensing doesn’t matter. But my comment specifically referred to the “they are all permissively licensed” portion which I quoted. San Francisco, Segoe, and many other OS-included fonts have commercial proprietary licenses, not permissive licenses as the GGP post claimed. Try to serve San Francisco WOFF2 files as a font-family src on your site and see how Apple’s lawyers react.

corywatilo 4y ago

This is really well done. Paragraph view really helps to visualize it. CSS Font Stack [1] used to be the place for this, but that site hasn't changed in decades. The one piece missing for me is the percentage adoption by platform (like in the above referenced site). Regardless, this is still replacing CSS Font Stack for me. The irony is that they were both created by people named Dan. [1] https://www.cssfontstack.com https://www.cssfontstack.com

wbobeirne 4y ago
Came here to post this as well. I was going to start making a replacement for cssfontstack, so I'm glad to see this here. But also feel that the percentage adoption was a huge value to me, as it helped me prioritize fonts in my chosen stack to maximize consistency. I'd love to see stats that include popular mobile OS's as well.

pimlottc 4y ago

Please stop using green vs red like this, it's very difficult for many people, including me. Especially for thin lines.

danklammer 4y ago
This is great feedback. I will update to be more accessible.
- peterfirefly 4y ago
  You might be able to get away with changing your reds and greens so (most) colour blind people can see the difference between them.
- Matheus28 4y ago
  You could add a strikethrough on the red ones, and keep the color. .nope { text-decoration: line-through; }
- scns 4y ago
  https://colorhexa.com https://colorhexa.com shows how each color "is perceived by people affected by a color vision deficiency".
coreyp_1 4y ago
I didn't even realize that the red/green was present until you mentioned it! I do actually perceive it, now that you draw attention to its existence, and can tell the difference, but you are correct: thin lines are aggravating to deal with! And it's not just the red/green issue: it's also in distinguishing them from grey when the lines are thin. Side issue: when I was a kid, my math teacher insisted on grading using those thin BIC red pens. The problem is that it was indistinguishable from my own writing (at a glance), and it took forever to find my mistakes that were "clearly marked" by the teacher. Thin red lines are pointless to me. I guess it's a good thing that I'm naturally good at math!
- gketuma 4y ago

giraffe_lady 4y ago

It's a good default approach and the one I use most of the time. If you're setting a lot of text, or mixed text especially that has both prose and graphs or data you run into the limitation of the system fonts just not having the full set of characters. Using text figures and tabular figures correctly for example is one of the main things that makes those complex mixed texts read well and look "professional" and afaik none of the system fonts include all three sets of numbers, even if they're available in that font from other sources. They also mostly don't support small caps, which is better looking than most other ways you can emphasize text for titles or diagram labels. The CSS auto-conversion fallback is not a good substitute imo. Anyway again it's a great approach for basic text and still a good start for more complex stuff, but not a full solution depending on how much you care about text presentation. But since most websites are mostly text I think you should care a lot.

deleted 4y ago

[deleted]

glogla 4y ago

I like it. It works for English, but sadly the selected fonts don't always have all the national characters. Sometimes there are similar enough replacements (e.g. Charis instead of Charter) but not always.

reaperducer 4y ago
I agree, since I build multi-lingual web sites. I hope this will be helpful. There is a little box at the top that allows you to replace the default text with the text of your choice to test whether your specific non-ASCII characters will work.
- yawpitch 4y ago
  Ahh, thanks for noticing that, I’ve got a ludicrous number of Vietnamese accents to deal with, and have been looking for just such a tool!

ikesau 4y ago

Super. Will keep this in mind for future projects. Is there a way to get a sense for how well supported each font is at each level? Like caniuse.com - "80% of users will see Cambria" or whatever.

deleted 4y ago
[deleted]
VPenkov 4y ago
Sort of but not really. Operating systems usually come with a mostly-known set of fonts, however major updates sometimes change or iterate on fonts. Also, installing certain Office and/or design software adds more fonts. But this is why people use such lengthy font stacks that look alike.
kalleboo 4y ago
Doesn't show install base, but the GitHub page shows which OS has which font https://github.com/system-fonts/modern-font-stacks https://github.com/system-fonts/modern-font-stacks

chrismorgan 4y ago

https://github.com/system-fonts/modern-font-stacks https://github.com/system-fonts/modern-font-stacks explains each stack and which fonts are expected to be used where, with screenshots. This information makes it (mildly bizarrely, and quite disappointingly) generally more useful than https://modernfontstacks.com/ https://modernfontstacks.com/. —⁂— A few remarks (not all that I could make, but I should sleep). System UI: risky, it’s a trap, there’s basically no legitimate scenario for these semantics on the public web. See https://github.com/w3c/csswg-drafts/issues/3658 https://github.com/w3c/csswg-drafts/issues/3658 (skim through a bit, I’ve got a comment near the end too). Monospace Slab Serif: every one of the fonts named here is a bad font: (a) Nimbus Mono PS mangles things like the two-column `fi`, ligating them to a single-column `ﬁ`. See https://github.com/ArtifexSoftware/urw-base35-fonts/issues/31 https://github.com/ArtifexSoftware/urw-base35-fonts/issues/3.... (b) Courier New is unreasonably thin due to bad digitisation techniques which used to be worked around by hinting and ClearType special-casing, but it’s common for neither of those to work to make it tolerable any more. Its 400 weight is more like a 250 (if even that), and painful to read in many common configurations. Never use it. (c) Cutive Mono apparently copied Courier New’s known-awful thinness!? What were they thinking? Monospace Code: seriously, just go `monospace, monospace` these days. Firefox 98 on Windows was the last browser where this wasn’t at the very least perfectly adequate. (The doubling is to work around the stupid probably-13px font size misfeature that I’d like to try to convince browser makers to ditch, but haven’t tried yet.) > Emoji Support Does adding these fonts to the end of the stack actually achieve anything useful? I don’t recall these being necessary or useful. (I vaguely recall some sort of priority issue related to text/graphical representations, but that was quite a few years back and I’d expect it to have been dealt with now, though it’s possible some U+FE0F might be needed if you omit this?—though frankly that’d be needed anyway for universal support. Anyway, I’d like concrete explanation of what this stuff does, if anything.) > Anti-Aliasing If I recall correctly, these tweaks are largely Apple-specific, grossly misleading in name, highly controversial, and probably a waste of time. I invite correction or further education, because I haven’t thought about them for maybe a decade and don’t use a platform where they do anything. —⁂— This is much better-thought out than most sets of suggestions, but I’d honestly still suggest dropping nuance in most cases, and just using `serif`, `sans-serif` or `monospace, monospace`. But if you want a certain general sort of character, this is pretty good stuff. I’ve definitely done `font-family: Georgia, serif` where I wanted to express a preference for a wider sort of serif, and I’d do it again¹. —⁂— ¹ Even if I personally will get my own chosen serif font, since I’ve unticked Firefox’s Settings → Fonts → Advanced → Allow pages to choose their own fonts, instead of your selections above. Try it yourself, you might be pleasantly surprised at how much the consistency improves the web, like I was. You might also develop a still-deeper hatred of non-zero letter-spacing on body text, which is absurdly common for something that has absolutely no legitimate use case in English text.

wiradikusuma 4y ago

Sorry I don't understand how to use this? Is the website supposed to be like Google Fonts website where I select a font and it will give me code snippets to paste in my HTML?

tomhanlon 4y ago
Instead of loading a font from Google Fonts you would just use the font-family property for the given typeface: font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; for instance.
anamexis 4y ago
I think it's suggesting font families which have similar characteristics and for which at least one is likely to be installed for a given OS/browser.

yowzadave 4y ago

It would be nice if there were a convenient way to test the way these fonts will render on a variety of different systems. I.e., BrowserStack but you can specify the installed fonts on the system you are testing.

noneeeed 4y ago
The repo actually has png/gif comparisons for them. https://github.com/system-fonts/modern-font-stacks#industrial https://github.com/system-fonts/modern-font-stacks#industria... But yeah, I'd love some way to preview a custom piece of text.

amelius 4y ago

It would be even better if the fonts were just the same across platforms.

yowzadave 4y ago
What if you're building a web app, and your goal is to emulate the system font appearance (whatever it may be) of the client?
- tasuki 4y ago
  I think the comment you're replying to still applies?
- SquareWheel 4y ago
  Then your default font stack should look something like this. https://github.com/twbs/bootstrap/blob/adf7b8dc4083b6ddc318e466dbb5d87f3af0ce17/scss/_variables.scss#L606 https://github.com/twbs/bootstrap/blob/adf7b8dc4083b6ddc318e...

javajosh 4y ago

This is valuable. But the value is hidden because the "key" is at the bottom, not at the top. This page's value is that it shows you what device fonts are available (and in use), but that's not clear (enough). (And this value is further reduced by the color scheme, which many people cannot distinguish.) I'd also like to see a discussion of where you got these stacks.

SquareWheel 4y ago

Great website. There's really no concept of "web safe" fonts today when you mix in mobile operating systems. At best you can choose similar-looking fonts and hope for the best, and this site seems useful in that aim. One tool I'd love, though would clearly be out of scope here, would be a way to find safe fallbacks for popular webfonts. For example I recently created a site in Montserrat. After some testing I found a close fallback font was Verdana, with a size-adjust[1] of about 99.5%. That resulted in minimal document reflows when the font was slow to load. Picking the top 10 or 20 popular Google Fonts and finding nearby fonts with good scaling tweaks would be very useful. I could see a sister project to this site offering something like that. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/size-adjust https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/...

ZeroGravitas 4y ago
https://meowni.ca/font-style-matcher/ https://meowni.ca/font-style-matcher/ Is a tool that lets you play around to discover good fallback settings.
- SquareWheel 4y ago
  Thanks for the link. I've actually used this one before, but it's not quite what I was hoping for. These settings (font-size, line-height) are defined in the content CSS, not the @font-face rule, so they won't be automatically applied when the font is swapped. Properties like size-adjust or ascent-override are better for matching like-fonts as it's all automatic. Also, while it is very useful to have a tool to come up with your own pairings, I think a list that covers some of the most popular fonts and creates perfect settings would be very useful for quick implementations. Something like the submitted site above that has done the legwork for you.
  - corny 4y ago
    Maybe this is more what you're looking for? https://screenspan.net/fallback https://screenspan.net/fallback

webmasterfish 4y ago

Correct me if I'm wrong but is this basically just advicing on using web-safe fonts?

stefncb 4y ago
Every operating system has different fonts installed by default. Unless you use custom fonts, you can't be fully consistent, but the website has some groups of similar fonts that should get you the same style regardless of operating system.

danielvaughn 4y ago

Just wanted to say that I love the dot-pattern background. Very subtle, nicely done.

fouronnes3 4y ago

I really like "font-family: system-ui, sans-serif;". Life is short, let's go on with our lives!

creativenolo 4y ago
But a short life is to be relished with delights.

andrewmcwatters 4y ago

It seems blatantly wrong to me that anything other than traditional or old style typography would use lower case numbers. Who are these people designing typefaces in the neo-grotesk family with old style numerics?

adamc 4y ago
What are "lower case numbers"?
- vanderZwan 4y ago
  I presume numbers with the top aligned with the x-height[0]. Corbel and Candara both have them if you look at the screenshots on the GH page[1]. [0] https://en.wikipedia.org/wiki/X-height https://en.wikipedia.org/wiki/X-height [1] https://github.com/system-fonts/modern-font-stacks#classical-humanist https://github.com/system-fonts/modern-font-stacks#classical...
- latexr 4y ago
  Numbers with varying heights, ascenders, and descenders (like lowercase letters). https://en.wikipedia.org/wiki/Text_figures https://en.wikipedia.org/wiki/Text_figures
vanderZwan 4y ago
I don't see any lower-case numbers on neo-grotesk, nor do any of the screenshots on the GH page show it so it's not just my machine. Could you maybe have an incomplete font with some weird font-substitution quirks? [0] https://github.com/system-fonts/modern-font-stacks#neo-grotesque https://github.com/system-fonts/modern-font-stacks#neo-grote...
JonathonW 4y ago
Microsoft's font designers, apparently. (Corbel and Candara both have them, despite it being kind of weird for a sans-serif font-- those were MS-commissioned fonts launched as part of the ClearType Font Collection with Windows Vista and Office 2007.) None of the fonts here have lowercase figures by default on Mac. (If Neo-Grotesque is showing lowercase figures on your machine, I think something funky is going on with your font stack-- pretty sure none of those fonts should have them by default.)

ar9av 4y ago

Love this! I've been using system fonts for the past couple years to avoid the usual font load glitch, and also to make the apps feel a little bit more at home for users that are used to their OS fonts. For mobile, this seems like the ideal scenario.

pitaj 4y ago

Is it just me or on Android do like 90% of these not really work right? Firefox is especially sparse, but Chrome isn't much better. Does Android just not ship with many fonts? I'm on a Pixel 6 with Android 13. For instance on Firefox: - Transitional, Old Style, Slab Serif, Antique, and Didone fall back to serif - all Humanist variants, Industrial, and Rounded Sans fall back to sans-serif - nothing for Handwritten (so just shows up as sans serif) And Chrome is better but still not great: - Transitional, Old Style, Slab Serif, and Didone fall back to serif - all Humanist variants and Rounded Sans fall back to source-sans-pro

thrdbndndn 4y ago

Everytime "System UI" is mentioned on HN I feel obligated to post this: Be careful about it. The intent of "System UI" is great. However, the actual implementations across multiple platforms and especially with different international languages, not so much. The main issues are: 1. On Chinese and Japanese Windows, it would end up using MS Yahei and Yu Gothic UI. The former isn't optimized to show English-only (or Latin alphabet only) content, while the latter isn't even suitable to display Japanese content, let alone English ones. As the name suggests, it's intended to be a "UI" font - it's extremely narrow to accommodate long Japanese characters in UI elements such as context menu, button etc. You're supposed to use "Yu Gothic" to show normal text in Japanese. And because these two fonts are unicode (include almost every glyphs), it won't fallback to other fonts either. English Windows does not suffer from this issue the other way precisely because its default UI font, "Segoe UI", not only great to show English characters, it also does not contain any CJK glyphs so these would fallback to proper fonts. 2. Unlike "sans serif", system-ui overrides "default fonts" that user can tweak in (any) browser settings. Users can even change fonts for each written script/language to make they have the fonts that suits them best too (and browsers usually have sensible default for them). This means you can use <lang="ja">, <lang="zh">, <lang="en"> to specify language of HTML elements to ask the browsers to use specific fonts for each language. System-ui overrides all these: once you have assigned "system-ui" it will just use system font regardless of any language context. Again, this is particularly bad for CJK users because of problem 1 ("system-ui" fonts have all the glyphs). So end result: Chinese paragraphs use Japanese characters (they're different but have the same Unicode point), and vice versa. 3. In lots of platforms, including MacOS (I didn't test newest version yet), Android, iOS, using "system-ui" will end up using exactly the same font as just use "sans serif" anyway. So it really has little benefit. One of the only benefit of using "system-ui" is on English Windows: lots of browsers including Firefox and Chrome still use Arial as sans-serif's default for Latin content for backward compatibility (you can change it yourself in browser settings, though). So by using system-ui, on English Windows, fonts would become Segoe UI, which is indeed better. But you can "fix" this without messing over Chinese/Japanese users by just apply "Segoe UI" directly. It does not affect other platform either because they simply don't have this font. Actually, this is exactly what most of major websites (GitHub, SO, Twitter, etc.) currently are doing, after they rolled back from using "system-ui" due to issues and backlash mentioned above. Wikipedia also tried, but they now choose to continue rocking "sans-serif" without any fancy "stack". (I'm not a Linux guy so feel free to chime in about situations there.)

starik36 4y ago

This is awesome. One improvement would be to have a preview of what it looks like on the all the major OSes. Bonus for mixing in non-English versions of the OSes.

conaclos 4y ago
A preview is available on the GitHub README [0] [0] https://github.com/system-fonts/modern-font-stacks#system-ui https://github.com/system-fonts/modern-font-stacks#system-ui
- starik36 4y ago
  Exactly what I was looking for. Thank you.

deleted 4y ago

[deleted]

foxandmouse 4y ago

Most of the fonts listed here are premium fonts, the complete DIN typeset costs nearly 2k. If we're going that route, then it's safe to say most of these are lesser than the best in class for each category. popular fonts like Futura, Century Gothic, Baskerville, and Univers are just a few that are omitted.. While there's no objective truth in design, these fonts are not suitable for designers who prioritize typography. However, if you're looking for a quick solution for a side project and don't care much about typography, this list could be helpful. Can't see why it belongs on the front page though.

joe5150 4y ago
The type named, DIN Alternate, is included with MacOS (bold and condensed bold only). The GitHub page has some notes about this, along with more info about what systems support which typefaces. https://github.com/system-fonts/modern-font-stacks#industrial https://github.com/system-fonts/modern-font-stacks#industria....
- foxandmouse 4y ago
  Thanks! the GitHub page includes a lot of (imo) essential information that should be included on the site. The developer clearly did a lot more research than I assumed. That said, one thing to consider if you're using this stack is that this implementation will produce OS specific designs. The fonts in each stack differ significantly between operating systems, which means that testing for each OS will be necessary. I already have an issue with the same fonts looking different due to different rendering methods in each browser/ OS.
  - joe5150 4y ago
    I think it's helpful to keep in mind that any design will be to some extent "OS-specific" for a lot of different reasons, available fonts being only one factor. I also think OS-specific design is perfectly appropriate for a lot of use cases. I use "font-family: system-ui, sans-serif" on my resume page, for example, because I know that the default system fonts look fine (by design) on any screen and a fast, lightweight page is more important to me than a specific font presentation. If you're creating a user interface with really tight tolerances on element size or appearance, different strategies might be more appropriate.

toastal 4y ago

Bold of you to assume I’d want Arial or Ubuntu before the one I set as my user agent default in any stack

prewett 4y ago

Maybe I should know what this is about, but after reading the web page and the Github site, it's unclear to me if this is a set of fonts I download, or a useful set of font CSS settings, or a font renderer or what. What problem is this solving? Why does this work better than just using good quality fonts in the browser? The examples look great, I just don't know what I'm looking at.

deleted 4y ago
[deleted]
nielsbot 4y ago
I think these are fonts that are generally available on common OSes, so no webfonts needed, in order of preference/specificity. You often (for me, an amateur, anyway) don't know which list of fonts and fallbacks ("stack") to specify if you want a "industrial" font for example. This site has done that research for you.

aimor 4y ago

That dot background causes a distracting strobing effect when I scroll.

riidom 4y ago
Switch off Dark Reader :)
- doodlesdev 4y ago
  But then my eyes will be blasted with the light power of a thousand suns. I prefer the strobing.
- aimor 4y ago
  When I scroll the background flashes red from subpixel rendering I guess. https://streamable.com/q3ampy https://streamable.com/q3ampy https://ufile.io/21yihckd https://ufile.io/21yihckd

azatom 4y ago

Why is the smallest font size is the largest of what I actually would like to test? The range 0.7-1.5em is what needs tests, above that all looks good.

danklammer 4y ago
Good callout. I updated the tool to allow for min of .75rem or 12px.
- kevincox 4y ago
  It seems to min out at 0.75rem. I don't see where 12px comes in. Unless you are hard coding the root don't size to 16px.

cantSpellSober 4y ago

I've never had a designer tell me "if x typeface isn't available, fallback to y." Simply fall back to the generic name unless specified. Why does "Monospace Code" begin with a generic name (`ui-monospace`) instead of ending with one? (Well done demo, thanks for sharing!)

danklammer 4y ago
`ui-monospace` is an extended system font property [1] similar to `system-ui` that is currently only supported in Safari. This will render SF Mono on macOS and iOS [2]. [1] https://caniuse.com/extended-system-fonts https://caniuse.com/extended-system-fonts [2] https://github.com/system-fonts/modern-font-stacks#monospace-code https://github.com/system-fonts/modern-font-stacks#monospace...
- cantSpellSober 4y ago
  It's also a generic value, like `sans-serif` that typically comes at the end of a stack. If someone has Consolas installed why show them something else only on Safari? https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#syntax https://developer.mozilla.org/en-US/docs/Web/CSS/font-family...

DyslexicAtheist 4y ago

very nice. been looking at the "system-ui" font saying "damn that looks great I must try it", then as I continued to browse further down got confused. Why does every font look the same? It must be my design-ignorant brain not picking up on the subtle differences in these fonts? They're clearly brilliant though. as I couldn't spot any differences in any of them (and all of them looking fantastic and really similar or same as the rest of my system) ... Then it hit me, so went to Firefox -> settings -> Fonts -> Advanced -> "Allow pages to choose their own fonts, instead of your selections above" problem solved :) I was no longer staring at "DejaVu Sans" in every box.

FooBarWidget 4y ago

I don't get it. Why not just use "serif", "sans-serif" and "monospace"? What's the value of specifying specific fonts such as "Charter" or "Dejavu Sans"?

doodlesdev 4y ago
I'm a big proponent of doing exactly what you say, however, for some companies the text rendering is an essential part of their branding (take Discord as an example). In those cases you might not want to load webfonts to reduce reflow, bandwith usage, etc. However using sans-serif or serif will generate very different results in each platform, these font stacks are optimized to look almost the same on each platform. The GitHub has much better information about this than the website itself since it has screenshots of the fonts instead of relying on your browser rendering them. In practice though using system-ui, sans-serif, serif and monospace is truly the best answer. I'll override any websites fonts with mine anyways so I don't bother with criticizing websites that use bloated web fonts or font stacks unnecessarily. :D

aakash_test 4y ago

[flagged]

Narushia 4y ago

These look all very solid! There’s one thing that bugs me, though: I would imagine that a “system font stack” would support characters for multiple scripts, since operating systems are commonly localised into many different languages. However, none of the fonts presented seem to support any CJK characters, for instance.

airstrike 4y ago

Not sure if it's just me behind a draconian firewall but Neo-Grotesque doesn't load Inter for me, even though it's on Google Fonts. Why not download it from there?

joe5150 4y ago
The site doesn't load any webfonts. It only attempts to use already-installed "default" fonts from various systems. The GitHub readme[1] says Inter is a "user-installed" font, so I'm not really sure it should count here. 1: https://github.com/system-fonts/modern-font-stacks#neo-grotesque https://github.com/system-fonts/modern-font-stacks#neo-grote...
- airstrike 4y ago
  Sure, but realistically who doesn't deploy webfonts these days? Might as well include them on this site to reflect the current state of the world
  - altano 4y ago
    The point of this website is to cater to people who don't want to deploy web fonts. That's the only reason it exists. It serves no other purpose.
- hLineVsLineH 4y ago
  Inter is the default font on elementary OS, if I recall correctly.

doodlesdev 4y ago

I would love to see more websites that do this: font-family: system-ui, sans-serif; Instead of trying to download fonts from Google Fonts (which I block though uBlock Origin filters) or the "superior" Bunny CDN or whatever it's called. Nowadays I even went to the point of forcing all websites in my web browsers to use system-ui and I could not be happier. A few advantages of that are: - Websites load faster. - Typesetting is beautiful everywhere. - Text is readable and consistent. The only problem I still have is when websites decide that using web-fonts is a good way to ship icons, I have no option sometimes but enable remote fonts and I hate it. If you aren't using system-ui yet take a look here how it looks in various operating systems: https://github.com/system-fonts/modern-font-stacks#system-ui https://github.com/system-fonts/modern-font-stacks#system-ui

kevincox 4y ago
I would even prefer that websites do this: /* Intentional left blank */ And use my defaults. Maybe I have a high DPI display and prefer serif for body text.

kimburgess 4y ago

This is really nice! I've been hardlining the minimalist/utilitarian approach for https://simple.industries https://simple.industries with an intentionally basic system font stack, but this gives a few other options to play with.

amberfarmland 4y ago

[dead]

laserbeam 4y ago

Is it possible to include all the fonts on the site? I know this kind of goes against the point ('cause it's supposed to showcase that offline fonts are cool!), but this is one of the cases where I might to exclude one of the fonts in a stack. I wouldn't be sure where to test that the whole stack looks as I'd expect it.

lloydatkinson 4y ago

It always amazes me Google doesn't simply ship say the top 50 most popular fonts in Chrome that Google are already providing via Google Fonts anyway. Think of all that wasted energy and bandwidth! Every time I suggest this the idea is laughed at and the hand wavy replies say that it can't be done.

punyearthling 4y ago
Don't they collect data using their webfonts?

lloydatkinson 4y ago

Which of these fonts is closest to Inter, a very popular font?

leodriesch 4y ago
I'd say Inter is pretty close to Helvetica Neue or San Francisco, the system-ui font for macOS and iOS. So I'd say the Neo-Grotesque style. But that uses Arial on Windows which I find pretty awful.

seanhunter 4y ago

These fonts render very poorly on my mac. Every one of them has antialiasing artifacts and so look like old school windows fuzzy fonts. It's particularly noticable on the diagonal strokes but all of the edges are fuzzy.

kamilm 4y ago

Well done tool, thanks! I used the system fonts at https://scrabble-solver.org https://scrabble-solver.org and got a small performance improvement (from ~70% to ~80%) in PageSpeed Insights on mobile. Noticeably it got my Largest Contentful Paint down from ~3.5s to ~2.2s.