Live data from Hacker News

Modern Font Stacks

modernfontstacks.com

31–40 of 80 posts

Re: Modern Font Stacks

#31

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.

Re: Modern Font Stacks

#32
post #18

Earlier quoted context omitted.

These font stacks don't handle anything at all, they just throw a bunch of common typeface names at the wall and they can't even tell what sticks because it's so random. All the while, the user might have a prefered fallback font set that they prefer over any of the ones in the font stack - and even if that isn't the case, simply using 'monospace' as the only fallback will render the default monospace font anyway. I…

they just throw a bunch of common typeface names at the wall and they can't even tell what sticks because it's so random. Anytime someone on HN doesn't understand CSS, they throw up their hands and call it random. Just because you don't understand what's happening doesn't mean it's random. I don't understand the SAM76 programming language, but I don't pretend that !%ii,*,1,1,!%mu,*,%F,%su,*,1//////////= is "random."…

Accusing the person you are replying to of not understanding css after the knowledge built in to their argument doesn’t paint you in a good light. I don’t have horse in this race, but I’d encourage you to take a beat.

Re: Modern Font Stacks

#33
I've been using the Verdana core web font on personal sites for close to twenty years now, I still think it's very readable and easy on the eyes.

I find it generally more "well-kerned" than a lot of modern web fonts.

Works everywhere.

Re: Modern Font Stacks

#34

Earlier quoted context omitted.

they just throw a bunch of common typeface names at the wall and they can't even tell what sticks because it's so random. Anytime someone on HN doesn't understand CSS, they throw up their hands and call it random. Just because you don't understand what's happening doesn't mean it's random. I don't understand the SAM76 programming language, but I don't pretend that !%ii,*,1,1,!%mu,*,%F,%su,*,1//////////= is "random."…

Accusing the person you are replying to of not understanding css after the knowledge built in to their argument doesn’t paint you in a good light. I don’t have horse in this race, but I’d encourage you to take a beat.

[flagged]

Re: Modern Font Stacks

#35

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.

I believe Helvetica has shipped with every Macintosh since the very first one.

Re: Modern Font Stacks

#36
post #19
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…

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

Re: Modern Font Stacks

#37
post #18

Earlier quoted context omitted.

These font stacks don't handle anything at all, they just throw a bunch of common typeface names at the wall and they can't even tell what sticks because it's so random. All the while, the user might have a prefered fallback font set that they prefer over any of the ones in the font stack - and even if that isn't the case, simply using 'monospace' as the only fallback will render the default monospace font anyway. I…

they just throw a bunch of common typeface names at the wall and they can't even tell what sticks because it's so random. Anytime someone on HN doesn't understand CSS, they throw up their hands and call it random. Just because you don't understand what's happening doesn't mean it's random. I don't understand the SAM76 programming language, but I don't pretend that !%ii,*,1,1,!%mu,*,%F,%su,*,1//////////= is "random."…

> Great! Then the user gets his preferred font, as requested, instead of the one the page specified.

No. You've misread the main point. The user would have gotten his preferred font if the font stack was either just plain

    font-family: monospace;
or

    font-family: , monospace;
. But the case is that the suggested font stack contains some "unwanted" font that their system both supports and allows to be used, that precedes the generic `monospace` font family the user actually prefers, or, more precisely, have assigned their typeface to. Is it more clear now?

I agree it is not a huge "bug" on the first sight, and as it seems even this is somewhat solvable without disabling font support completely. But since it takes some effort and expertise on the user's side, it adds the "bug" some weight nonetheless.

Re: Modern Font Stacks

#38
post #30
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…

How do I make sure my browser doesn't "protect" me in such a way?

I'm not sure why would you put "protect" in scare quotes here. This protection against fingerprinting is very real. Having any installed fonts that didn't come with the OS (and that includes fonts that are installed by other programs), makes your computer a lot more easy to fingerprint and track. Not everybody is interested in this protection, but this protection is very real.

It also doesn't seem to be enabled by default, since it tends to break some sites, as explained above. If you want to disable prevent Firefox from doing that, just don't set "Enhanced Tracking Protection" to Strict. You can even go for full Custom mode and enable "Protection from Suspected Fingerprinters" (which blocks some fonts as described by GP) only for private windows.

Re: Modern Font Stacks

#39
post #36
post #19

Earlier quoted context omitted.

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…

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

Good question! Actually (to my minor dismay): not completely. Disabling "font support" in Firefox surprisingly still has a hatch for "well-known" icon fonts, with intention to prevent "blind" icons in webpages. I believe it is driven by the pref

    browser.display.use_document_fonts.icon_font_allowlist
that contains "FontAwesome" and (Google) Material Icons and Symbols (many, presumably all, variants). So to truly disable all "non-preferred" fonts, we have to both wipe that pref and also change for the

    browser.display.use_document_fonts
to zero. But that's what the GUI checkbox controls, so no need to go to about:config for this one.

Re: Modern Font Stacks

#40
post #9

I use this quite a bit! At the very least, if you're going to insist on using a custom font, having the rest of one of these stacks behind it can help guarantee that users with third-party resource blockers or other weird browsers get an experience closer to what you intend. For example, I always take Google Font's suggestion for Inter[1]: font-family: "Inter", sans-serif; and change it to: font-family: "Inter", syst…

But there's no guarantee that system-ui is even a sans serif font. Why make that change?
Post reply on HN