|
|
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
|
|
 |
|
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.
|
|
|
|
Please stop using green vs red like this, it's very difficult for many people, including me. Especially for thin lines.
|
|
|
|
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!
|
|
|
|
So is the fix to remove the underlines? Or to stop using red/green color combination? Trying to learn as well. Thanks
|
|
|
|
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. But again, that's just my experience.
|
|
|
|
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. 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.
|
|
|
|
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.
|
|
|
|
|
> because the key is at the bottom of the examples (5 rows of blocks of text examples) rather than the top. It's worse in mobile. It's several screens of example blocks before you get to the key.
|
|
|
|
|
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.
|
|
|
|
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”.
|
|
|
|
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.
|
|
|
|
The fix is "designers" need to understand that there are people with visual disabilities and take steps to stop discriminating against them.
|
|
|
|
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.
|
|
|
|
This is great feedback. I will update to be more accessible.
|
|
|
|
You could add a strikethrough on the red ones, and keep the color. .nope { text-decoration: line-through; }
|
|
|
|
https://colorhexa.com shows how each color "is perceived by people affected by a color vision deficiency".
|
|
|
|
You might be able to get away with changing your reds and greens so (most) colour blind people can see the difference between them.
|
|
|
|
I am reading the comments about red green but I do not see at all where they are (I am colorblind to some extend so this may be the reason). Could someone please link to a screenshot with some indication where to look? Thanks!
|
|
|
|
|
|
Maybe a browser extension should exists which automatically replaces colors with more accessible ones.
|
|
|
|
I think you can do this with system accessibility settings? At least on macOS and iOS.
|
|
|
|
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!
|
|
|
|
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/...
|
|
|
|
|
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.
|
|
|
|
|
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.
|
|
|
|
I'm going to be slightly more blunt and say, if you're using a font "stack" then you don't care about typography at all. A large segment of HN seems to hate web fonts with a passion. And I get that. But let's not pretend you can have your cake and eat it too. You may as well just do "serif" or "sans-serif" and be done with it. 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.
|
|
|
|
> if you're using a font "stack" then you don't care about typography at all 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 the user is used to 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.
|
|
|
|
I generally agree with your comment, I'll just reply to some specific points (by the way, thanks to you and to the other commenter who replied to my comment, good points all across). > 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.
|
|
|
|
The say, "then you don't care about typography at all." You say, "If [...] it's not so important [...]" To me, it sounds like you two are in agreement. If it's not important, i.e. if you don't care about it, then it's fine. > 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.
|
|
|
|
> If it's not important, i.e. if you don't care about it. 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.
|
|
|
|
> "it's not important if the default font is used". 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.
|
|
|
|
> congratulations, the text now looks something like 50% bigger than you intend it to be 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.
|
|
|
|
Yes, and that's exactly the problem with this approach. There's no accounting for the different metrics of the fonts. 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.
|
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
> I use "font-family: system-ui, sans-serif" on my resume page [...] 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`.
|
|
|
|
> The text on a resume is not UI, and it has no need to fit the look and feel of the native OS 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!
|
|
|
|
You may happen to like how system-ui looks on your system (macOS? Windows?); but do you have any idea what it looks like for the person reading your resume, perhaps on Linux with a custom theme, or on an Android device where the vendor chose to ship some brand-specific UI font? Or on a 5-yr old version of the OS, or on the version that'll be current 5 years in the future? IMO system-ui is hardly ever a wise choice for content.
|
|
|
|
> Android device where the vendor chose to ship some brand-specific UI font 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.
|
|
|
|
If it is legible I don't care. If I can select a style a little bit more specific than "serif" or "sans-serif", that's great, as long as it degrades to something legible. I've yet to see a situation where free-flowing text or headings became illegible because the font changed. UI elements, sure.
|
|
|
|
It simply puts a bit more trust on the user than normal. And if your OS has a ridiculous system-UI font that can't handle paragraphs well, you have bigger problems than some website.
|
|
|
|
Emphasis on "really tight tolerances". If you build a UI relying on the specific metric of a font (as misguided as that may be), system-ui will be a poor fit because it will have different metrics on different operating systems.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
Don't they collect data using their webfonts?
|
|
|
|
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.
|
|
|
|
|
|
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?
|
|
|
|
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.
|
|
|
|
I think it's just OK to disagree. But among designers, it does standout. It's like whitewalls on a contemporary supercar. But you know what, there are plenty of out of place things that can still just be appealing sometimes. /shrug
|
|
|
|
|
Old style numerals are my favorite actually. 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".
|
|
|
|
|
|
|
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.)
|
|
|
|
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.
|
|
|
|
This is really nice! I've been hardlining the minimalist/utilitarian approach for https://simple.industries with an intentionally basic system font stack, but this gives a few other options to play with.
|
|
|
|
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
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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/. 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.
|
|
|
|
> 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.
|
|
|
|
Nice.
It would be really useful, if the site could preview the system fonts of those systems you aren't using, though.
|
|
|
|
|
|
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.
|
|
|
|
Thanks for letting me know. So I guess the situation is similar to what it's like on Windows.
|
|
|
|
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!)
|
|
|
|
|
|
|
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"?
|
|
|
|
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
|
|
|
|
Bold of you to assume I’d want Arial or Ubuntu before the one I set as my user agent default in any stack
|
|
|
|
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.
|
|
|
|
I really like "font-family: system-ui, sans-serif;". Life is short, let's go on with our lives!
|
|
|
|
But a short life is to be relished with delights.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
|
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.
|
|
|
|
It would be even better if the fonts were just the same across platforms.
|
|
|
|
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?
|
|
|
|
|
I think the comment you're replying to still applies?
|
|
|
|
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
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
Just wanted to say that I love the dot-pattern background. Very subtle, nicely done.
|
|
|
|
Similar: https://systemfontstack.comEither way, it's the best way to go these days if you don't need any fancy external fonts on your website.
|
|
|
|
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).
|
|
|
|
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?
|
|
|
|
|
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
|
|
|
|
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.
|
|
|
|
Inter is the default font on elementary OS, if I recall correctly.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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!
|
|
|
|
That dot background causes a distracting strobing effect when I scroll.
|
|
|
|
|
|
But then my eyes will be blasted with the light power of a thousand suns. I prefer the strobing.
|
|
|
|
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?
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
Good callout. I updated the tool to allow for min of .75rem or 12px.
|
|
|
|
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.
|
|
|
|
Which of these fonts is closest to Inter, a very popular font?
|
|
|
|
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.
|
|
|
|
Correct me if I'm wrong but is this basically just advicing on using web-safe fonts?
|
|
|
|
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.
|
|
|
|
Limitations based on copyrights significantly hinder the helpfulness of this site, although the design is top notch.
|
|
|
|
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.
|
|
|
|
> 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. Disclaimer: Not legal advice
|
|
