Show HN: Modern Font Stacks – New system font stack CSS for modern OSs
modernfontstacks.com
modernfontstacks.com
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.
.nope { text-decoration: line-through; }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!
But the most accessible would be to use appropriate structure (together with appropriate semantic structure for those that cannot see at all) rather than appropriate coloring.
For example, when I saw the website in question, I did not notice the red or green text color at all. I did see the underline, though. I didn't know it's significance, however, because the key is at the bottom of the examples (5 rows of blocks of text examples) rather than the top. Oddly enough, in this particular instance, the green of the text looks more like a light grey, and I can see the red better than the green. Normally it's the other way around, but it might have something to do with the particular shades involved.
Importantly, there are different forms of red/green colorblindness. For some people, the colors are literally indistinguishable. They look exactly the same.
Mine is a form of reduced sensitivity. I can see it if it's a large area. E.g., if you're wearing a red shirt, then I know it's red, and it looks completely different from a green shirt. If it's just a thin line of red, though, then I might not pick up on it unless I concentrate. It just doesn't stand out when the lines are thin.
Fabric can be weird for me. Some fabrics cause issue because they will use red threads interspersed throughout the cloth in order to achieve a red/pinkish overtone, and I won't notice it at all (unless I really concentrate on it). It's because the red is coming from thin lines. I have to be careful with tweed, for example.
But again, that's just my experience.
I find increasing the brightness of the display helps, but it’s still a pain in the arse to distinguish the two when the lines are thin in this example.
Just for fun, can you make out the lettering in this image posted to the fediverse: https://mathstodon.xyz/@csk/109786201604517074
If you have deuteranopia or deuteranomaly, you should be able to just about make it out. With normal colour vision, on the other hand, it’s meant to be nearly impossible to see.
It's worse in mobile. It's several screens of example blocks before you get to the key.
The usual advice I’ve seen to avoid discriminating against people with reduced ability to differentiate color is “don’t use color distinctions alone for any purpose”. If you want to make things recognizable as different at a glance, and are inclined to use color for it – do that, but also use some other visual distinction. If its text, use a non-color stylistic distinction as well as color.
I’m certainly not against broader accessibility in any sense, I have had multiple sclerosis for 22-years, I was really more against using “quotes” to question a professional’s credibility for what seems like a fairly sensible choice.
Could someone please link to a screenshot with some indication where to look? Thanks!
https://addons.mozilla.org/en-US/firefox/addon/let-s-get-col...
https://chrome.google.com/webstore/detail/lets-get-color-bli...
I used to use it myself until I got my colorlite glasses (although it still is practical to show to others how a website might be unreadable for me without the glasses)
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/...
Is a tool that lets you play around to discover good fallback settings.
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.
Hopefully one day the existing CSS properties like letter-spacing can be supported in @font-face to allow for even better matching. That would make techniques like this even more powerful.
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.
https://github.com/system-fonts/modern-font-stacks#industria....
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.
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.
Shouldn't it be the opposite? It literally has "UI" in the name, and according to the the spec, "The purpose of system-ui is to allow web content to integrate with the look and feel of the native OS."
The text on a resume is not UI, and it has no need to fit the look and feel of the native OS. In this case you should just use `serif` or `sans-serif`. If you're creating a user interface, then it would be appropriate to use `system-ui`.
My resume has no need to look any particular way at all; this is just my preference. You should design your webpages however you like!
IMO system-ui is hardly ever a wise choice for content.
Chrome (and Android Webkit) hardcodes Roboto as the system-ui font (in such a way that both Samsung and Xiaomi devices (which both have font options) cannot touch), and Firefox brings its own font rendering which also hardcodes Roboto.
If the system-ui font of Linux is set to a silly one (according to your opinion), then the user-in-question would realise that they are the one who picked that font that you called silly, in other words they don't care about your opinion at all.
For the same amount of effort it takes to research a font stack you could implement a web font loader that uses browser fonts based on prefers-reduced-motion.
Why?
If I want to display a document with some atmosphere for which several fonts could be suitable, and it's not so important if a default generic font is used, but I care more about performance and resource usage, it's a good solution, no?
The default generic font will probably be a well designed font that the user is used to, so, typographically, it's very good. I like this "best effort" approach.
A custom font will probably be worse for many users: users have to download it, there can be flashes, reflows, rerenders or a long time where stuff is blank, and the user might not be familiar with this font. Since fonts are mostly a matter of taste anyway, it's not clear the user will prefer this custom font over the ones that are already on their computer and that they are more likely to be familiar with.
So, in the end, it might as well be the better solution, typographically speaking.
That's not the point of typography or design. People are used to Comic Sans. That doesn't make it a good choice. Some designs call for something that stands out in a unique way.
If you are going to the trouble of finding an "atmosphere" for your site and researching the fonts you are using then why just throw that all out with a "stack" and sort of kind of but not really getting it right?
Here's the bigger problem. No two fonts have the same font metrics. Go to the Github page: https://github.com/system-fonts/modern-font-stacks#css-font-.... These fonts are all using the same font size, weight, etc. but they are drastically different. Calibri and DejaVu do not render remotely the same. DejaVu might be readable at a certain size where Gill Sans Nova is going to be rather awful. These are all within the same font stack. Even in the "Preview Rendering" you can see it cheated by having the footnote that says "These fonts have been size-adjusted for easier comparison." How are you planning to do that in CSS? You can't.
All this effort is wasted. You can just pick "sans-serif" and let the user use whatever they have set in the browser. That's better anyway, especially for a blog type layout which is the only layout that would make sense and not completely break with a font stack.
> People are used to Comic Sans. That doesn't make it a good choice.
Sure. Familiarity is not a sufficient condition. I was assuming well designed fonts for reading several paragraphs.
Comic Sans is suitable (and well designed) for comics. But it is so overused everywhere that other fonts would be preferable for this - I know it seems I contradict myself since I'm also stating that familiar fonts are better, but I think there's a difference between such fonts and more neutral fonts that need to be used for several paragraphs. And I believe familiarity for the more neutral fonts can help because you don't have to "decipher" the font anymore.
> Some designs call for something that stands out in a unique way.
Indeed. I was assuming a standard web page, or a standard web app here to convey information or be functional. For such pages, I don't think it matters if the font is not exactly at the same size when rendered as when designed. The page is already going to be rendered on widely different screens and dispositions and its design should be reliant on such changes. Maybe choosing the default sans-serif font (for screens) with the default size is best for accessibility: you can be reasonably sure it will be displayed well for users with their settings.
Now, with font stacks, you can leave out the outliers and pick a font size that's not at the edge of readability.
> If I want to display a document with some atmosphere for which several fonts could be suitable
There's no such thing as "several fonts could be suitable". All the fonts in these stacks have different metrics, so you can't even set appropriate values for something as basic as the font size and line spacing.
If you design your page using Gill Sans Nova, for example, and someone views it with DejaVu Sans — congratulations, the text now looks something like 50% bigger than you intend it to be. And if you set a sensible size for DejaVu Sans, someone will get unreadable text with some other font. This is not "very good". It's bad.
It might be okay to use these font stacks as fallback when the custom font doesn't work, but it's not "the better solution" if you care about typography.
> I care more about performance and resource usage
It's a valid concern but fonts aren't really that big. Some people are shipping favicons that are like 40kB. That's enough to fit a font.
> The default generic font will probably be a well designed font that the user is used to
System fonts aren't necessarily well designed. And I'm not sure why "the user is used to it" is a good thing. It seems to be the opposite. People complain when a font is familiar to the point that it feels tired and overused.
> Since fonts are mostly a matter of taste anyway, it's not clear the user will prefer this custom font
The user is always in control. They can always choose what to load and what styles to apply. That doesn't mean people should stop designing webpages that looks good.
Some of these "stacks" do make poor choices with respect to matching the overall metrics of the fonts, but there are any number of reasons why a font might display bigger or smaller than you "intend it to be" in a web browser. Web design fundamentally has to account for this.
Font size and font family should ideally always be set together. If you're setting a font-size, then you should force a font-family, and vice versa. Otherwise, you should set neither and let the user agent decide. This ensures that you would never get a broken combination that's uncomfortable or unusable.
It's similar to the idea that whenever you're setting a foreground color, you should always set the background color as well.
No. I care about typography. You left out the critical part of this sentence: "it's not important if the default font is used".
Now I understand that you also say that default fonts are not necessarily well designed. On my side, these default fonts have looked good on every device I have used, and I'm more often annoyed by arbitrary font settings that look good to the designer who happened to design the web page I'm reading.
> The user is always in control. They can always choose what to load and what styles to apply
In practice, I'm not going to design each page I visit. I'm blocking web fonts by default, but that sometimes triggers a bad setting where the font that is used as a fallback looks very bad. I guess that happens when people assume that the web font will be loaded and don't default to (sans-)serif in their font-familly CSS property.
That's also what they said. They said "You may as well just do 'serif' or 'sans-serif' and be done with it."
> Now I understand that you also say that default fonts are not necessarily well designed.
While fonts are a matter of taste, objectively speaking fonts that comes preinstalled on systems often have very few weights and support only a very limited range of glyphs. They also lack features such as small caps, old-style numbers, etc.
Usually, though, the main, default sans-serif and/or UI font on the system are much better than some random font that just happens to be included in the system. So you will usually be better off using `sans-serif` than any of these font stacks.
> I guess that happens when people assume that the web font will be loaded and don't default to (sans-)serif in their font-familly CSS property.
But this is just yet another reason why using font stacks is bad...? If instead you just use `serif` or `sans-serif` it will follow the user's font preference.
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.
[0] https://github.com/system-fonts/modern-font-stacks#system-ui
Every time I suggest this the idea is laughed at and the hand wavy replies say that it can't be done.
Who are these people designing typefaces in the neo-grotesk family with old style numerics?
[0] https://en.wikipedia.org/wiki/X-height
[1] https://github.com/system-fonts/modern-font-stacks#classical...
[0] https://github.com/system-fonts/modern-font-stacks#neo-grote...
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.)
In contrast, you use standard numerals for mathematics, spreadsheets, next to uppercase letters, etc. Anywhere where the context is numerical or technical or calling attention.
There's nothing "blatantly wrong" about it. Ultimately it's a stylistic choice (most people don't bother, same as most people don't bother with small caps), but it's a really nice one. I think it's cool to see it in neo-grotesque personally.
There's nothing inherent to the aesthetic principles of sans-serif that precludes them. From my understanding, the historical reason why they weren't used in the mid 1900's was for technical reasons with phototypesetting, needing to limit the character set. Now that it's all digital and Unicode we're able to repopularize them.
There's "nothing inherent to the aesthetic principles" of rotary phones, but you don't use a smart phone with a rotary phone interface do you?
Taste is formed with the times in which they are developed in. And there are those who have taste coherence and those who do not.
"Nothing inherent to the aesthetic principles" of emo hair fringe or disco attire, but you wouldn't wear either to a historical reenactment of the American Civil War, either.
When people use Humanist typography they are invoking a specific feel.
But you know what, there are plenty of out of place things that can still just be appealing sometimes. /shrug
There aren't that many descenders in lowercase English, but in a script like Shavian where there are many, the old style figures feel really "at home".
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.
—⁂—
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 (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 `fi`. See 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.
How else would you style things with the system's UI font? User interfaces on the web can be designed to fit in the native system UI. It's a legitimate and useful thing to do.
I don't see how you can make a meaningful distinction between what's "online" or "on the public web" or not. A lot of web apps can run both online and offline, installed or uninstalled. In all cases it uses the same web technology.
Just because some legacy system makes a bad choice, doesn't mean everyone can't have nice things. I mean, did Windows seriously make all their UI use a single font? Do they just assume all the UI on Windows would be monolingual...?
I mean, it's standard practice to use a Latin font and fallback to other fonts for complex scripts such as CJK, because it's universally acknowledged that the Latin glyphs in these fonts are terrible and unfit even for the purpose of using it with the CJK characters.
Instead of discouraging or even removing it, how about actually encouraging people to use `system-ui` to force Microsoft and other companies to fix their systems?
If wrong use were cause enough to remove things from the web, we'd have lost tables in 1997.
font-family: system-ui, sans-serif;
- 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
/* Intentional left blank */
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.)
Certainly on my Mac, which has been the case for quite some time, sans-serif defaults to Helvetica.
Since Apple was the organization that proposed "system-ui", it doesn't make sense that it would default to a font that already existed.
Apple created San Francisco as a family of fonts for macOS, iOS, iPadOS, etc., which is why Apple proposed to the W3C the concept of a system-ui font that differs from sans-serif.
Android, newer Windows and macOS has specific fonts for system-ui.
Why does "Monospace Code" begin with a generic name (`ui-monospace`) instead of ending with one?
(Well done demo, thanks for sharing!)
[1] https://caniuse.com/extended-system-fonts
[2] https://github.com/system-fonts/modern-font-stacks#monospace...
https://developer.mozilla.org/en-US/docs/Web/CSS/font-family...
I did not know it was a default font in macOS.
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
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.
But yeah, I'd love some way to preview a custom piece of text.
https://github.com/twbs/bootstrap/blob/adf7b8dc4083b6ddc318e...
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
I used the system fonts at 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.
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"
Either way, it's the best way to go these days if you don't need any fancy external fonts on your website.
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).
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.
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.
1: https://github.com/system-fonts/modern-font-stacks#neo-grote...
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?
font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
So I'd say the Neo-Grotesque style. But that uses Arial on Windows which I find pretty awful.
Either way, you as the website owner are not responsible for whatever font ends up being chosen by the browser to render the website.
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.
Disclaimer: Not legal advice
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.