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).
>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.
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.
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.
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.
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.
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!
Depends on the use case. If you want to signal deletion, strikethrough can be more appropriate than coloring. If you really have to use color, I've heard brown-blue combo should be easier, or at least blue-yellow color blindness is a lot rarer than red-green, so it'll be more accessible.
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 me, it's not just an "underline" issue. In my case, it's a "thin line" issue, and letters are usually made up of thin lines, especially the monospace font used here. But that's just me. (Side note: I still use monospace fonts in programming, I just choose one that has thicker lines in relation to the character size.)
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.
I have the same kind (IIRC it’s called deuteranomaly).
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.
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.
Yeah, I definitely can't see it with my 'normal' colour vision. I did notice down in the comments there's a processed version that lets you see where the letters are, but even with that knowledge it's still impossible.
actually when I look at the processed version I can then make the outer ring of the O and about 70% of the last two letters. Like I can see oh there is that part of the letter - basically in the orange.
Make color areas bigger and use higher contrast light/dark versions to keep some distance between red and green. Generally avoid thin red to signal anything important.
Wait, so just no more using red? Anywhere, at all, in any facet of design? What about other differentiated abilities. Should “designers” stop using anything under 18-pt font? 24-pt? How accessible must an interface before you will grant “designers” their un-quoted status as designers?
> Wait, so just no more using red? Anywhere, at all, in any facet of design?
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.
Sound advice. All that strike through is going to look horrible, and diminish the overall readability for a much larger population. I’m not sure there’s a very good solution for this particular case. Should they trash the entire idea rather than accept some lesser accessibility?
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.
The solution from literature is “use color as much as you want (within the limits of sufficient contrast for readability) but nether rely exclusively on it, always add some other visual device, such as icons or (even better) textual additions”.
100%. I can barely read it. Perhaps changing the background of the text to red and green (and the text to white) would improve its legibility. There are likely better ideas, though!
The creator of the site has already updated the colors in response to the feedback. If you still don't see it, there is a handy Daltonization add-on that might help with sites like this:
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)
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.
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.
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.
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.
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:
(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.
> System UI: risky, it’s a trap, there’s basically no legitimate scenario for these semantics on the public web.
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?
Reading the thread it's clear cooler heads have already prevailed. The recommendation from the remove system-ui crowd was that there would be no way to access the system font outside of sans-serif. Why? Because some people have been using system-ui wrong.
If wrong use were cause enough to remove things from the web, we'd have lost tables in 1997.
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.
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.
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.
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.
Much closer to what I had in mind! Thanks, this one is new to me. It would've saved me time in my previous testing.
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.
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.
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?
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.)
Lower case numbers fit in the best with body text. They're used in the same way small caps are used for acronyms -- so you don't get ugly blocks of characters larger than their neighbors that call attention to themselves. It's a feature, not a bug.
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.
No, but there is historical precedence and coherence. It's like putting Greek columns on a Walmart. Or rapping in Old English.
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.
I guess I just find myself disagreeing. I don't find lowercase numerals any different from extending a Latin font to Cyrillic or Greek. In my view, they're just extra characters, rather than an aesthetic choice of the font. Ideally, good body text fonts will have both types of numerals to choose from.
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".
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.
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.)
> 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.
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.
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.
149 comments
[ 45.1 ms ] story [ 615 ms ] threadEither 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).
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.
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
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)
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.
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.
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.
—⁂—
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.
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?
But yeah, I'd love some way to preview a custom piece of text.
https://github.com/twbs/bootstrap/blob/adf7b8dc4083b6ddc318e...
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.
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.
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...
https://en.wikipedia.org/wiki/Text_figures
[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".
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
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.
[0] https://github.com/system-fonts/modern-font-stacks#system-ui
I did not know it was a default font in macOS.