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

https://modernfontstacks.com/

by danklammer • 3 years ago

335 142 3 years ago

modernfontstacks.com

partyguy• 3 years ago

Similar: https://systemfontstack.com

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

doodlesdev4• 3 years ago

This website feels outdated, if the idea is to use the system fonts you might as well be using system-ui (although that can come with its own set of can of worms if you care about i18n). Specially because it's using -apple-system which is literally the same thing as system-ui nowadays (Apple was the one to propose and push for system-ui).

The font stacks themselves seem solid though. Specially for serif and mono where of course system doesn't cut and ui-monospace is only supported on Apple devices (similar to system-ui but for monospace).

lagrange772• 3 years ago

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

pseudonymcoward• 3 years ago

The github page has screen grabs of all the fonts in each stack: https://github.com/system-fonts/modern-font-stacks

lagrange772• 3 years ago

Nice, thanks.

nati0n• 3 years ago

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

hobofan• 3 years ago

What do you mean? This only includes fonts already present as standard font on the operating system, so presumably they are all permissively licensed.

Either way, you as the website owner are not responsible for whatever font ends up being chosen by the browser to render the website.

tatersolid2• 3 years ago

This only includes fonts already present as standard font on the operating system, so presumably they are all permissively licensed.

No they’re not. Apple, Microsoft and even some Google systems include fonts which are commercially licensed and usable only on a device licensed for that OS. In fact Apple and Microsoft contracted the development of many fonts you see on today’s devices and the web.

corywatilo• 3 years ago

This is really well done. Paragraph view really helps to visualize it.

CSS Font Stack [1] used to be the place for this, but that site hasn't changed in decades.

The one piece missing for me is the percentage adoption by platform (like in the above referenced site). Regardless, this is still replacing CSS Font Stack for me.

The irony is that they were both created by people named Dan.

[1] https://www.cssfontstack.com

wbobeirne• 3 years ago

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

pimlottc• 3 years ago

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

danklammer3• 3 years ago

This is great feedback. I will update to be more accessible.

peterfirefly• 3 years ago

You might be able to get away with changing your reds and greens so (most) colour blind people can see the difference between them.

Matheus28• 3 years ago

You could add a strikethrough on the red ones, and keep the color.

    .nope { text-decoration: line-through; }

scns• 3 years ago

https://colorhexa.com shows how each color "is perceived by people affected by a color vision deficiency".

coreyp_13• 3 years ago

I didn't even realize that the red/green was present until you mentioned it!

I do actually perceive it, now that you draw attention to its existence, and can tell the difference, but you are correct: thin lines are aggravating to deal with!

And it's not just the red/green issue: it's also in distinguishing them from grey when the lines are thin.

Side issue: when I was a kid, my math teacher insisted on grading using those thin BIC red pens. The problem is that it was indistinguishable from my own writing (at a glance), and it took forever to find my mistakes that were "clearly marked" by the teacher. Thin red lines are pointless to me. I guess it's a good thing that I'm naturally good at math!

gketuma• 3 years ago

So is the fix to remove the underlines? Or to stop using red/green color combination? Trying to learn as well. Thanks

323• 3 years ago

Maybe a browser extension should exists which automatically replaces colors with more accessible ones.

nielsbot3• 3 years ago

I think you can do this with system accessibility settings? At least on macOS and iOS.

nielsbot3• 3 years ago

Someone filed an issue already https://github.com/system-fonts/modern-font-stacks/issues/1

Pr0ject217• 3 years ago

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!

BrandoElFollito• 3 years ago

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!

vanderZwan3• 3 years ago

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:

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)

giraffe_lady• 3 years ago

It's a good default approach and the one I use most of the time.

If you're setting a lot of text, or mixed text especially that has both prose and graphs or data you run into the limitation of the system fonts just not having the full set of characters.

Using text figures and tabular figures correctly for example is one of the main things that makes those complex mixed texts read well and look "professional" and afaik none of the system fonts include all three sets of numbers, even if they're available in that font from other sources. They also mostly don't support small caps, which is better looking than most other ways you can emphasize text for titles or diagram labels. The CSS auto-conversion fallback is not a good substitute imo.

Anyway again it's a great approach for basic text and still a good start for more complex stuff, but not a full solution depending on how much you care about text presentation. But since most websites are mostly text I think you should care a lot.

glogla• 3 years ago

I like it.

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

reaperducer• 3 years ago

I agree, since I build multi-lingual web sites. I hope this will be helpful.

There is a little box at the top that allows you to replace the default text with the text of your choice to test whether your specific non-ASCII characters will work.

yawpitch• 3 years ago

Ahh, thanks for noticing that, I’ve got a ludicrous number of Vietnamese accents to deal with, and have been looking for just such a tool!

ikesau• 3 years ago

Super. Will keep this in mind for future projects.

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

VPenkov• 3 years ago

Sort of but not really. Operating systems usually come with a mostly-known set of fonts, however major updates sometimes change or iterate on fonts. Also, installing certain Office and/or design software adds more fonts. But this is why people use such lengthy font stacks that look alike.

kalleboo• 3 years ago

Doesn't show install base, but the GitHub page shows which OS has which font https://github.com/system-fonts/modern-font-stacks

chrismorgan• 3 years ago

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 `ﬁ`. 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.

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.

hLineVsLineH6• 3 years ago

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?

philistine2• 3 years ago

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.

wiradikusuma• 3 years ago

Sorry I don't understand how to use this?

Is the website supposed to be like Google Fonts website where I select a font and it will give me code snippets to paste in my HTML?

tomhanlon• 3 years ago

Instead of loading a font from Google Fonts you would just use the font-family property for the given typeface:

  font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;

for instance.

anamexis• 3 years ago

I think it's suggesting font families which have similar characteristics and for which at least one is likely to be installed for a given OS/browser.

yowzadave2• 3 years ago

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

noneeeed• 3 years ago

The repo actually has png/gif comparisons for them. https://github.com/system-fonts/modern-font-stacks#industria...

But yeah, I'd love some way to preview a custom piece of text.

amelius• 3 years ago

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

yowzadave2• 3 years ago

What if you're building a web app, and your goal is to emulate the system font appearance (whatever it may be) of the client?

tasuki• 3 years ago

I think the comment you're replying to still applies?

SquareWheel4• 3 years ago

Then your default font stack should look something like this.

https://github.com/twbs/bootstrap/blob/adf7b8dc4083b6ddc318e...

javajosh• 3 years ago

This is valuable.

But the value is hidden because the "key" is at the bottom, not at the top. This page's value is that it shows you what device fonts are available (and in use), but that's not clear (enough). (And this value is further reduced by the color scheme, which many people cannot distinguish.)

I'd also like to see a discussion of where you got these stacks.

SquareWheel4• 3 years ago

Great website. There's really no concept of "web safe" fonts today when you mix in mobile operating systems. At best you can choose similar-looking fonts and hope for the best, and this site seems useful in that aim.

One tool I'd love, though would clearly be out of scope here, would be a way to find safe fallbacks for popular webfonts. For example I recently created a site in Montserrat. After some testing I found a close fallback font was Verdana, with a size-adjust[1] of about 99.5%. That resulted in minimal document reflows when the font was slow to load.

Picking the top 10 or 20 popular Google Fonts and finding nearby fonts with good scaling tweaks would be very useful. I could see a sister project to this site offering something like that.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/...

ZeroGravitas• 3 years ago

https://meowni.ca/font-style-matcher/

Is a tool that lets you play around to discover good fallback settings.

SquareWheel4• 3 years ago

Thanks for the link. I've actually used this one before, but it's not quite what I was hoping for.

These settings (font-size, line-height) are defined in the content CSS, not the @font-face rule, so they won't be automatically applied when the font is swapped. Properties like size-adjust or ascent-override are better for matching like-fonts as it's all automatic.

Also, while it is very useful to have a tool to come up with your own pairings, I think a list that covers some of the most popular fonts and creates perfect settings would be very useful for quick implementations. Something like the submitted site above that has done the legwork for you.

airstrike3• 3 years ago

Loved this, thanks for sharing

webmasterfish• 3 years ago

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

stefncb• 3 years ago

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

danielvaughn• 3 years ago

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

fouronnes3• 3 years ago

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

creativenolo• 3 years ago

But a short life is to be relished with delights.

andrewmcwatters3• 3 years ago

It seems blatantly wrong to me that anything other than traditional or old style typography would use lower case numbers.

Who are these people designing typefaces in the neo-grotesk family with old style numerics?

adamc• 3 years ago

What are "lower case numbers"?

vanderZwan3• 3 years ago

I presume numbers with the top aligned with the x-height[0]. Corbel and Candara both have them if you look at the screenshots on the GH page[1].

[0] https://en.wikipedia.org/wiki/X-height

[1] https://github.com/system-fonts/modern-font-stacks#classical...

latexr• 3 years ago

Numbers with varying heights, ascenders, and descenders (like lowercase letters).

https://en.wikipedia.org/wiki/Text_figures

vanderZwan3• 3 years ago

I don't see any lower-case numbers on neo-grotesk, nor do any of the screenshots on the GH page show it so it's not just my machine. Could you maybe have an incomplete font with some weird font-substitution quirks?

[0] https://github.com/system-fonts/modern-font-stacks#neo-grote...

JonathonW• 3 years ago

Microsoft's font designers, apparently. (Corbel and Candara both have them, despite it being kind of weird for a sans-serif font-- those were MS-commissioned fonts launched as part of the ClearType Font Collection with Windows Vista and Office 2007.)

None of the fonts here have lowercase figures by default on Mac.

(If Neo-Grotesque is showing lowercase figures on your machine, I think something funky is going on with your font stack-- pretty sure none of those fonts should have them by default.)

crazygringo2• 3 years ago

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.

andrewmcwatters3• 3 years ago

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.

olah_1• 3 years ago

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".

ar9av• 3 years ago

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

pitaj• 3 years ago

Is it just me or on Android do like 90% of these not really work right? Firefox is especially sparse, but Chrome isn't much better.

Does Android just not ship with many fonts? I'm on a Pixel 6 with Android 13.

For instance on Firefox:

- Transitional, Old Style, Slab Serif, Antique, and Didone fall back to serif

- all Humanist variants, Industrial, and Rounded Sans fall back to sans-serif

- nothing for Handwritten (so just shows up as sans serif)

And Chrome is better but still not great:

- Transitional, Old Style, Slab Serif, and Didone fall back to serif

- all Humanist variants and Rounded Sans fall back to source-sans-pro

thrdbndndn2• 3 years ago

Everytime "System UI" is mentioned on HN I feel obligated to post this: Be careful about it.

The intent of "System UI" is great. However, the actual implementations across multiple platforms and especially with different international languages, not so much.

The main issues are:

1. On Chinese and Japanese Windows, it would end up using MS Yahei and Yu Gothic UI. The former isn't optimized to show English-only (or Latin alphabet only) content, while the latter isn't even suitable to display Japanese content, let alone English ones. As the name suggests, it's intended to be a "UI" font - it's extremely narrow to accommodate long Japanese characters in UI elements such as context menu, button etc. You're supposed to use "Yu Gothic" to show normal text in Japanese.

And because these two fonts are unicode (include almost every glyphs), it won't fallback to other fonts either. English Windows does not suffer from this issue the other way precisely because its default UI font, "Segoe UI", not only great to show English characters, it also does not contain any CJK glyphs so these would fallback to proper fonts.

2. Unlike "sans serif", system-ui overrides "default fonts" that user can tweak in (any) browser settings. Users can even change fonts for each written script/language to make they have the fonts that suits them best too (and browsers usually have sensible default for them). This means you can use <lang="ja">, <lang="zh">, <lang="en"> to specify language of HTML elements to ask the browsers to use specific fonts for each language. System-ui overrides all these: once you have assigned "system-ui" it will just use system font regardless of any language context. Again, this is particularly bad for CJK users because of problem 1 ("system-ui" fonts have all the glyphs). So end result: Chinese paragraphs use Japanese characters (they're different but have the same Unicode point), and vice versa.

3. In lots of platforms, including MacOS (I didn't test newest version yet), Android, iOS, using "system-ui" will end up using exactly the same font as just use "sans serif" anyway. So it really has little benefit.

One of the only benefit of using "system-ui" is on English Windows: lots of browsers including Firefox and Chrome still use Arial as sans-serif's default for Latin content for backward compatibility (you can change it yourself in browser settings, though). So by using system-ui, on English Windows, fonts would become Segoe UI, which is indeed better. But you can "fix" this without messing over Chinese/Japanese users by just apply "Segoe UI" directly. It does not affect other platform either because they simply don't have this font. Actually, this is exactly what most of major websites (GitHub, SO, Twitter, etc.) currently are doing, after they rolled back from using "system-ui" due to issues and backlash mentioned above. Wikipedia also tried, but they now choose to continue rocking "sans-serif" without any fancy "stack".

(I'm not a Linux guy so feel free to chime in about situations there.)

alwillis• 3 years ago

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.

thrdbndndn2• 3 years ago

Thanks for letting me know. So I guess the situation is similar to what it's like on Windows.

starik362• 3 years ago

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

conaclos• 3 years ago

A preview is available on the GitHub README [0]

[0] https://github.com/system-fonts/modern-font-stacks#system-ui

starik362• 3 years ago

Exactly what I was looking for. Thank you.

hypertexthero• 3 years ago

Excellent work, and thank you for introducing me to the lovely Seravek - https://en.wikipedia.org/wiki/Seravek

I did not know it was a default font in macOS.

foxandmouse2• 3 years ago

Most of the fonts listed here are premium fonts, the complete DIN typeset costs nearly 2k. If we're going that route, then it's safe to say most of these are lesser than the best in class for each category. popular fonts like Futura, Century Gothic, Baskerville, and Univers are just a few that are omitted..

While there's no objective truth in design, these fonts are not suitable for designers who prioritize typography. However, if you're looking for a quick solution for a side project and don't care much about typography, this list could be helpful. Can't see why it belongs on the front page though.

joe51505• 3 years ago

The type named, DIN Alternate, is included with MacOS (bold and condensed bold only). The GitHub page has some notes about this, along with more info about what systems support which typefaces.

https://github.com/system-fonts/modern-font-stacks#industria....

foxandmouse2• 3 years ago

Thanks! the GitHub page includes a lot of (imo) essential information that should be included on the site. The developer clearly did a lot more research than I assumed.

That said, one thing to consider if you're using this stack is that this implementation will produce OS specific designs. The fonts in each stack differ significantly between operating systems, which means that testing for each OS will be necessary. I already have an issue with the same fonts looking different due to different rendering methods in each browser/ OS.

deckard12• 3 years ago

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.

jraph3• 3 years ago

if you're using a font "stack" then you don't care about typography at all

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.

toastal• 3 years ago

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

prewett• 3 years ago

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

nielsbot3• 3 years ago

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

aimor2• 3 years ago

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

riidom• 3 years ago

Switch off Dark Reader :)

doodlesdev4• 3 years ago

But then my eyes will be blasted with the light power of a thousand suns. I prefer the strobing.

aimor2• 3 years ago

When I scroll the background flashes red from subpixel rendering I guess.

https://streamable.com/q3ampy

https://ufile.io/21yihckd

azatom• 3 years ago

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

danklammer3• 3 years ago

Good callout. I updated the tool to allow for min of .75rem or 12px.

kevincox2• 3 years ago

It seems to min out at 0.75rem. I don't see where 12px comes in. Unless you are hard coding the root don't size to 16px.

cantSpellSober2• 3 years ago

I've never had a designer tell me "if x typeface isn't available, fallback to y." Simply fall back to the generic name unless specified.

Why does "Monospace Code" begin with a generic name (`ui-monospace`) instead of ending with one?

(Well done demo, thanks for sharing!)

danklammer3• 3 years ago

`ui-monospace` is an extended system font property [1] similar to `system-ui` that is currently only supported in Safari. This will render SF Mono on macOS and iOS [2].

[1] https://caniuse.com/extended-system-fonts

[2] https://github.com/system-fonts/modern-font-stacks#monospace...

cantSpellSober2• 3 years ago

It's also a generic value, like `sans-serif` that typically comes at the end of a stack. If someone has Consolas installed why show them something else only on Safari?

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family...

DyslexicAtheist• 3 years ago

very nice. been looking at the "system-ui" font saying "damn that looks great I must try it", then as I continued to browse further down got confused. Why does every font look the same? It must be my design-ignorant brain not picking up on the subtle differences in these fonts? They're clearly brilliant though.

as I couldn't spot any differences in any of them (and all of them looking fantastic and really similar or same as the rest of my system) ...

Then it hit me, so went to

  Firefox -> 
     settings -> 
        Fonts -> 
           Advanced -> 
             "Allow pages to choose their own fonts, instead of your selections above"

problem solved :) I was no longer staring at "DejaVu Sans" in every box.

FooBarWidget• 3 years ago

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

doodlesdev4• 3 years ago

I'm a big proponent of doing exactly what you say, however, for some companies the text rendering is an essential part of their branding (take Discord as an example). In those cases you might not want to load webfonts to reduce reflow, bandwith usage, etc. However using sans-serif or serif will generate very different results in each platform, these font stacks are optimized to look almost the same on each platform. The GitHub has much better information about this than the website itself since it has screenshots of the fonts instead of relying on your browser rendering them.

In practice though using system-ui, sans-serif, serif and monospace is truly the best answer. I'll override any websites fonts with mine anyways so I don't bother with criticizing websites that use bloated web fonts or font stacks unnecessarily. :D

Narushia• 3 years ago

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

airstrike3• 3 years ago

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

joe51505• 3 years ago

The site doesn't load any webfonts. It only attempts to use already-installed "default" fonts from various systems. The GitHub readme[1] says Inter is a "user-installed" font, so I'm not really sure it should count here.

1: https://github.com/system-fonts/modern-font-stacks#neo-grote...

airstrike3• 3 years ago

Sure, but realistically who doesn't deploy webfonts these days? Might as well include them on this site to reflect the current state of the world

hLineVsLineH6• 3 years ago

Inter is the default font on elementary OS, if I recall correctly.

doodlesdev4• 3 years ago

I would love to see more websites that do this:

   font-family: system-ui, sans-serif;

Instead of trying to download fonts from Google Fonts (which I block though uBlock Origin filters) or the "superior" Bunny CDN or whatever it's called. Nowadays I even went to the point of forcing all websites in my web browsers to use system-ui and I could not be happier. A few advantages of that are:

- Websites load faster.

- Typesetting is beautiful everywhere.

- Text is readable and consistent.

The only problem I still have is when websites decide that using web-fonts is a good way to ship icons, I have no option sometimes but enable remote fonts and I hate it.

If you aren't using system-ui yet take a look here how it looks in various operating systems: https://github.com/system-fonts/modern-font-stacks#system-ui

kevincox2• 3 years ago

I would even prefer that websites do this:

    /* Intentional left blank */

And use my defaults. Maybe I have a high DPI display and prefer serif for body text.

kimburgess• 3 years ago

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.

laserbeam• 3 years ago

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

lloydatkinson2• 3 years ago

It always amazes me Google doesn't simply ship say the top 50 most popular fonts in Chrome that Google are already providing via Google Fonts anyway. Think of all that wasted energy and bandwidth!

Every time I suggest this the idea is laughed at and the hand wavy replies say that it can't be done.

punyearthling• 3 years ago

Don't they collect data using their webfonts?

lloydatkinson2• 3 years ago

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

leodriesch• 3 years ago

I'd say Inter is pretty close to Helvetica Neue or San Francisco, the system-ui font for macOS and iOS.

So I'd say the Neo-Grotesque style. But that uses Arial on Windows which I find pretty awful.

seanhunter• 3 years ago

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

kamilm• 3 years ago

Well done tool, thanks!

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.

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

Related Stories