Css: Update font stack #8632
Css: Update font stack #8632
Conversation
This was for <code> tags, which we don't have here. The rest is already all monospace and Source Code Pro has bugs on macOS.
Unfortunately the normal font families like "sans-serif" and "monospace" are basically broken because the browser defaults are decades old. TODO: Inline code is barely distinguishable.
This allows it to be distinguished not just based on the font. Not adding a border because that's a bit much.
|
Okay, Windows now picks Segoe UI and Consolas, it used to pick Arial/Courier New in Firefox and Arial/Consolas in Edge. On Arch I'm not sure what it picks for the proportional font, possibly Nimbus Sans (that's what On KDE it'll now pick Hack for monospace (and possibly Noto Sans typically for proportional? it's unclear), on macOS San Francisco, on Ubuntu Ubuntu and on Gnome Cantrell and probably Noto Sans Mono (because we can't list Source Code Pro). At worst it'll pick an unfamiliar but acceptable font or fall back on sans-serif/monospace. This is better than picking Arial and some bad monospace font in most cases. The downside is that this is no longer user-configurable. That's an unfortunately necessary trade-off because the defaults are horrible. |
|
I would appreciate testing on macOS given that I've eschewed listing "BlinkMacSystemFont" and "-apple-system" under the belief that all browsers there now support system-ui. |
|
macOS 12.1: Chrome Firefox Safari |
|
Okay, I just tried picking Cascadia Code (the Windows Terminal default font), and our comment/output styles are italic, so it's awkward. They've improved the italic version so it's not unreadable to non-americans anymore, but it's still very different from normal. So I won't be adding it here. Other than that, this seems to give okay results everywhere, so I'm merging! |
Description
Unfortunately, the "monospace" and "sans-serif" font families are basically broken. The browser defaults have ossified, e.g. Firefox and Edge on Windows still default to Arial. (this situation, for the record, is horrible)
So, instead we try to use the "system-ui" font. Unfortunately there's a few caveats here:
Screenshots
(in Firefox on Linux)
Before
After
Note also how there's a colored background behind the inline-code blocks. This is also in light mode, and allows distinguishing the two even if the fonts are similar (like here).
@zanchey If you are comfortable with this I would like it for 3.4.
I do not believe this should ever make anything worse. Technically it's possible you'd get e.g. Segoe on linux, but Segoe is an okay font, and very very likely nicer than what "sans-serif" would pick for you.