Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Modern Font Stacks

modernfontstacks.com

Post reply on HN
Print view View original

51–60 of 80 posts

Re: Modern Font Stacks

#51

Post by bfgeek »

One thing to keep in mind when developing these large lists of fonts is that they are generally terrible for performance if the appropriate glyphs for what you are trying to display aren't present in the first font (and the font is available - this isn't an issue if the font isn't available at all).

This is generally more of an issue with non-latin scripts (or when emoji is present for example), and developers adding a font which doesn't have glyph coverage - or sparse glyph coverage.

Chrome/Firefox devtools both have a section "Rendered Fonts"/"Used Fonts" which show which gylphs are used from which font.

Additionally if you are showing non-latin, make sure to language tag your markup: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

`font-family: sans-serif` if not language tagged with incur a similar fallback perfromance penalty (the browser will have to change the "english" sans-serif font, find no glyphs, then use the "other-lang" sans-serfic font).

Re: Modern Font Stacks

#52

Post by tracker1 »

chipotle_coyote wrote: post #21
strenholme wrote: post #13

Right now, the webfont CSS file for my website and blog is 89734 bytes in size. This is a very fast load, with well under a fraction of second of “font change flash” even on a 4g network in a third world country. Point being, I don’t see the point of having a large font stack in the day and age of webfonts. To get a reasonable looking “flash of content”, I used https://screenspan.net/fallback which determined that Ve…

I think at least a small version of a font stack like these isn't a bad idea even if you're using web fonts. Folks who insist on disabling web fonts are likely a small percentage of any given site's readers, but they're out there. (And for certain sites, like this very one, there's a much higher percentage of them, usually ready to hop right out and proclaim how arrogant it is for web developers to choose typefaces f…

Literally toying with the idea of a "modern" BBS centered around current terminal usage... supporting varying display sizes, images, mouse clicks, urls, etc.

Mostly in that I want at least half a step between someone being able to just click a browser link and participating in discussions.

Re: Modern Font Stacks

#53

Post by chrismorgan »

myfonj wrote: post #19
krono wrote: post #10

An example of something to keep in mind with this technique is that you might actually end up causing the browser to render a different font than either you or the user intended. For a practical example: Environment - Latest Firefox on Windows 10. - Manually installed fonts 'Cascadia Code' and 'JetBrains Mono NL'. - Firefox default 'monospace' font set to 'JetBrains Mono NL'. Setting `font-family: monospace;` would e…

This is excellent analysis, but I think you've forgot to mention one particular detail in your environment description: - Firefox Browser Privacy Enhanced Tracking Protection setting changed to "Strict". It is not default, and explicitly indicates this kind of outcome can potentially happen. But truly agree that the situation here is suboptimal in all aspects. Also maybe worth noting that we can always force our (thr…

> Also maybe worth noting that we can always force our (three) font faces everywhere simply by unchecking the "Allow pages to choose their own fonts" in settings. Yes, this is nuclear option, but I can attest that I use it time to time, and it is quite usable.

Occasionally I deliberately trial major changes for a week or two. Sometimes I revert, other times I stay. I turned font selection off in this way in early 2020, and never went back, it made the web so much better.

Out of the box, Firefox still loads fonts with certain names, to avoid breaking icon fonts. After maybe six months I decided to nuke that with blocking all fonts in uBlock Origin, and although it made some things uglier, and Material Icons is ridiculously stupid in practice (frankly achieving almost the precise opposite of its stated intent for using ligation) it took until this year before I encountered an actual breakage (a couple of sites not realising document.fonts.load() can throw).

I encourage others to turn off font selection, though I wouldn’t encourage most to block web fonts altogether in the way I decided to.

I also urge developers to shun icon fonts: they were always a bad idea, a dodgy hack, and the time when they had meaningful justifying qualities is now long past.

Re: Modern Font Stacks

#54

Post by tracker1 »

reaperducer wrote: post #31
sometimez wrote: post #17

Similarly: https://www.cssfontstack.com/

This one surprised me: Helvetica Win: 7.34% Mac: 100% I know Microsoft prefers Arial over Helvetica, so I guess I shouldn't be surprised. But I didn't expect macOS to adopt it so widely. Arial Win: 99.84% Mac: 98.74% Then again, the Mac was designed from day one for this sort of thing.

If you're really targeting either, you're probably better off with the fallback sans-serif which is often one or the other based on the platform (historically, not 100% sure on current browsers). Arial displays slightly better on Windows, and Helvetica likewise with Mac.

Re: Modern Font Stacks

#55

Post by leephillips »

krono wrote: post #50
leephillips wrote: post #28

Earlier quoted context omitted.

That is clearly not the intention, else there would be no reason to bother with font stacks. The intention is to list a set of ranked preferences, implemented as fallbacks, that best express the designer’s vision for the site, while avoiding font downloading. In your example, presumably the designer thinks that Consolas works better than JetBrains Mono NL.

Yes, I see what you mean, but if that's really the intent, then having only this font-family rule isn't sufficient. For that argument/reasoning to hold up, it would have to be accompanied by metrics adjustments to compensate for the massive differences between some of the listed fonts in these stacks.

Absolutely true. In fact (and thank you for getting me to think about this), font stacks without metric adjustments don’t really make much sense, do they? (Unless confined to a list of fonts that are very close metrically, which they never are.)

Re: Modern Font Stacks

#56

Post by indemnity »

dhosek wrote: post #45
hu3 wrote: post #36

Earlier quoted context omitted.

> Allow pages to choose their own fonts" in settings. Yes, this is nuclear option, but I can attest that I use it time to time, and it is quite usable. Does this nuke icon fonts? I presume yes.

Icon fonts are bad for accessibility. Better to use SVG graphics and provide alt text for screen readers.

How so? aria-label= and role= attributes exist, this is not 1999.

Re: Modern Font Stacks

#57

Post by bigstrat2003 »

tracker1 wrote: post #44
myfonj wrote: post #23

Earlier quoted context omitted.

> esoteric browser prefs That hurts. I see where you are standing, and can confirm you expressed opinion of the contemporary majority of browser users, but man, how sad it that. The attitude diverged by a light years, when "Setting preferred fonts for generic font families" is now "esoteric". (Web) browsers ("user agents") came to existence with these capabilities in mind, and even now are build around the principle…

It's mixed bag... the designer of a given website has an intended look/feel and style... if you override that you can do as you like, but it's not like the author's intent should always simply be dismissed. Beyond this, not every web developer expressly wants to burden a browser to a specific web font payload when they have a close/suitable match where this modern font stack is good enough in terms of design intent.…

> it's not like the author's intent should always simply be dismissed.

Yes it is. The designer should always understand that the user is ultimately in control of a web page, and that their (the designer's) vision is not what matters at the end of the day.

Re: Modern Font Stacks

#58

Post by toast0 »

tln wrote: post #16
krono wrote: post #10

An example of something to keep in mind with this technique is that you might actually end up causing the browser to render a different font than either you or the user intended. For a practical example: Environment - Latest Firefox on Windows 10. - Manually installed fonts 'Cascadia Code' and 'JetBrains Mono NL'. - Firefox default 'monospace' font set to 'JetBrains Mono NL'. Setting `font-family: monospace;` would e…

I don't think web pages should stay away from font stacks just to handle people with changed esoteric browser prefs. If you as a user want to see different fonts everywhere, you'll need invasive tools that block font face etc. Or Firefox (where this message comes from) has a setting to "Allow pages to choose their own fonts, instead of your selections above"

> If you as a user want to see different fonts everywhere, you'll need invasive tools that block font face etc.

You have it backwards. These tools allow you to see the same fonts everywhere.

Just because the page author thinks lowercase f should look out of place doesn't mean I should have to see them like that. :p

Re: Modern Font Stacks

#59

Post by dang »

perihelions wrote: post #4
factorialboy wrote: post #2

Good resource. Pretty sure I've seen it posted before, perhaps on HN itself.

https://news.ycombinator.com/item?id=35150345 ( "Show HN: Modern Font Stacks – New system font stack CSS for modern OSs (modernfontstacks.com)" (2023); 144 comments)

Thanks! Macroexpanded:

Modern Font Stacks - https://news.ycombinator.com/item?id=35168652 - March 2023 (9 comments)

Show HN: Modern Font Stacks – New system font stack CSS for modern OSs - https://news.ycombinator.com/item?id=35150345 - March 2023 (142 comments)

Re: Modern Font Stacks

#60

Post by Kwpolska »

myfonj wrote: post #19
krono wrote: post #10

An example of something to keep in mind with this technique is that you might actually end up causing the browser to render a different font than either you or the user intended. For a practical example: Environment - Latest Firefox on Windows 10. - Manually installed fonts 'Cascadia Code' and 'JetBrains Mono NL'. - Firefox default 'monospace' font set to 'JetBrains Mono NL'. Setting `font-family: monospace;` would e…

This is excellent analysis, but I think you've forgot to mention one particular detail in your environment description: - Firefox Browser Privacy Enhanced Tracking Protection setting changed to "Strict". It is not default, and explicitly indicates this kind of outcome can potentially happen. But truly agree that the situation here is suboptimal in all aspects. Also maybe worth noting that we can always force our (thr…

IIRC, Safari has this limitation with rendering only system fonts and it cannot be disabled.
Post reply on HN