10 ms·
Stack Overflow switches to system fonts on May 10, 2021
- Tomte 5y agoThis is good, and I wasn't aware GitHub had done that, too. I'm still lamenting the state of Wordpress default themes. Twenty Twenty One (which I'm using now) also uses the system font stack, but has made weird choices. Huge post titles (48px), titles are underlined, other things make for a suboptimal reading experience. Twenty Twenty had this really weird font experiment with a variable font (Inter) that was unreadable on some devices (the font outline was… wiggly). Of course you needed a plugin to switch it off. Twenty Sixteen (which I was using before) is really nice, but comes with a web font. I'd love Twenty Sixteen with support for newer developments (like those block things), but without the need for plugins to switch off the font and a few other annoyances.
- arkitaip 5y agoWordpress default themes have been terrible for many years now. Design quality is sacrificed for showcasing some new WordPress feature or for the sake of a new theme because you know we have to have one each year instead of improving on the existing ones.
- milliams 5y agoI'm not an expert on web fonts etc, but if they want the site to look "native" on each platform and to use whatever the computer works best with, why can't they just use `sans-serif` and `monospace`? It's my (limited) understanding that that allows it to use the browser default.
- amarshall 5y agoBrowser default is not necessarily the same as the OS default. Even Safari on macOS (which one might expect to be well-integrated) sans-serif resolves to Helvetica, not San Francisco. It would be great if they were equivalent, but alas, they are not.
- Wowfunhappy 5y agoSafari represents how Apple would ideally like the world to work, and I don't think Apple wants San Francisco to be used for anything other than UI elements. In addition to not being Safari's system font, it also doesn't appear in Font Book or other system font selection menus.
- leodriesch 5y agoGood question though, there are other standard values for OS fonts, such as `system-ui`(0) or `ui-sans-serif`(1). [0]: https://caniuse.com/font-family-system-ui https://caniuse.com/font-family-system-ui [1]: https://caniuse.com/extended-system-fonts https://caniuse.com/extended-system-fonts
- ihuman 5y agoThe browser chooses the default sans-serif. If you want the system font, you need to use "system-ui" for Safari/Chrome and "-apple-system" for Firefox (Chrome also has BlinkMacSystemFont). "system-ui" is becoming an official standard, so its only a matter of time until Firefox supports it. https://drafts.csswg.org/css-fonts-4/#system-ui-def https://drafts.csswg.org/css-fonts-4/#system-ui-def
- dbbk 5y agoI do find it a bit odd though that the browsers don't just default to this at this point. Like, why is the default webpage font still Times New Roman?
- tshaddox 5y agoPresumably because it is or was considered a web standard (either de facto or explicit, I assume the former but I’m not sure) that browsers decided to respect.
- deleted 5y ago[deleted]
- afavour 5y agoThere are two defaults: web default and OS default. I can understand the default default(!) being the web, at least then it looks consistent across platforms.
- jfk13 5y agoBut 'system-ui' is... well... intended for UI usage. It may not be so well suited for page content. If you're creating UI elements on your web page (though why aren't you using the browser's built-in form control elements?), then 'system-ui' is probably appropriate. But if you're publishing textual content (rather than UI), 'sans-serif' or 'serif' may be a better choice. Most browsers even let users configure their preferred fonts for these generic names, if they don't like the defaults.
- tyingq 5y agoI went down this rabbit hole, and it's very confusing. If I recall correctly, Chrome doesn't actually pick the font when you say "sans-serif". It asks the OS for a list of fonts and picks the first one that matches some set of size criteria for a rendered string. That's why "font-family: cursive" ends up being some crazy font on different operating systems, often, not what I would call a cursive font. I get Comic Sans on Chrome/Windows10. I'm told you also get something ugly on MacOS, but it's at least something "cursive": https://jsfiddle.net/cfva2ehw/ https://jsfiddle.net/cfva2ehw/
- patrakov 5y agoI get Z003, Z003-MediumItalic, in Firefox on Arch Linux. It comes from URW fonts.
- ideamotor 5y agoAmazing how differing fonts successfully make each screenshot ”feel” like each OS to me.
- niel 5y agoDon't you think browser chrome might add to that feeling?
- octopoc 5y agoSure, but as someone who regularly switches between Mac, Windows, and Linux (Manjaro) the fonts feel quite distinctive. This probably has some applications in digital forensics.
- bobthepanda 5y agoThere was that case where a Pakistani politician forged documents using Calibri and it was discovered because the documents supposedly predated Calibri's commercial viability. https://www.theverge.com/2017/7/12/15961354/pakistan-calibri-font-scandal-forged-documents https://www.theverge.com/2017/7/12/15961354/pakistan-calibri...
- pwdisswordfish8 5y agoThis happens a lot. In the early 2000s, the news program 60 Minutes was involved in a major controversy that put its fact-checking practices and the reliability of journalism as a whole in the spotlight. The evidence for their reporting came down to some (now known to be forged) documents purported to contain revelations about a scandal involving George W. Bush during his years in the National Guard. It was a big deal, and it had a huge impact on the public image and career of Dan Rather, who was otherwise widely respected at the time. https://en.wikipedia.org/wiki/Killian_documents_controversy https://en.wikipedia.org/wiki/Killian_documents_controversy
- mg 5y agoSo they will serve a different stylesheet depending on the useragent the browser sends? As a reason they cite that that Arial looks dated. I wonder why they don't simply use a web font of their choice.
- jws 5y agoThey will probably define a list of acceptable fonts and let the browser choose. See this article… https://www.digitalocean.com/community/tutorials/css-system-font-stack https://www.digitalocean.com/community/tutorials/css-system-... body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } Hopefully moving forward the browser writers will settle on a name for the system fonts, sort of like the "system" is implied with the "-apple-system" vendor specific tag in the article. It looks like the browser vendors tried with "system-ui", but screwed it up badly with Windows and designers are afraid to use it now.
- ihuman 5y ago> It looks like the browser vendors tried with "system-ui", but screwed it up badly with Windows and designers are afraid to use it now. Is that still the case? I see that it was an issue a few years ago, I can't find any recent info that still says to avoid system-ui. Safari and Chrome still support system-ui. The working draft for the next version of CSS has system-ui, ui-serif, ui-sans-serif, and more. https://drafts.csswg.org/css-fonts-4/#system-ui-def https://drafts.csswg.org/css-fonts-4/#system-ui-def
- jws 5y agoGitHub and Wordpress are both using a list like shown above, neither includes "system-ui". It seems to still be shunned. I'm looking forward to CSS defined names that just say "make me look like the system".
- city41 5y agoYou don't need custom style sheets. One font-family declaration can hit them all: https://markdotto.com/2018/02/07/github-system-fonts/#the-stack https://markdotto.com/2018/02/07/github-system-fonts/#the-st...
- luke2m 5y agoSystem body text and custom headings are good for a compromise between identity and performance/integration.
- city41 5y agoI do this with all my websites. At the end of the day, a custom font just isn't very important for the vast majority of sites. I do purposely leave Ubuntu out most of the time, because I find it's a pretty ugly font. I'm an Ubuntu OS user myself.
- Izkata 5y agoLikewise here, I've never liked the Ubuntu font. Something about it just feels slightly off, like those letter-shaped refrigerator magnets for kids.
- luke2m 5y agoThat’s a great way to describe it.
- tgsovlerkhgsel 5y agoFrom all the common sans-serif fonts I looked at, it's the only one that distinguishes between I and l.
- HDMI_Cable 5y ago> I and l It's even more prescient considering that on my screen, those two letters look exactly the same.
- dubcanada 5y agoRaleway does, there is certainly a lot that don't but it's certainly not the only one. https://fonts.google.com/?preview.text=l%20I&preview.text_type=custom&category=Sans+Serif https://fonts.google.com/?preview.text=l%20I&preview.text_ty...
- jraph 5y agoNoto Sans, the default on my system, used on HN, clearly distinguishes them. How is it good with the pipe? I l | 1 edit: very good. It is also good for 0, O and Ø. It is also very readable. A very good font. Noto Mono is used for monospace, it has the same qualities. I really recommend this set of fonts.
- Tomte 5y agoOn the other side: the browser. You're not at the mercy of what web designers are giving you. In Firefox: Options – Language and Appearance – Fonts and Colors – Advanced… – Disable “Allow pages to choose their own fonts, instead of your selections above” It's what I've been using for months now (and I also block web fonts using Firefox Focus' extension in iOS/iPadOS Safari). And that's even though I'm a typography geek, and have bought fonts. Looks weird for a day or two, after that you never miss web fonts. Make sure to select a nice default font (for example, Verdana is nice, but I'm German, and Verdana does not have a closing quotation mark for German – it's another one than is in use in English). My setting is Constantia as default font and serif, Segoe UI as sans-serif, and Consolas as monospace.
- sodimel 5y agoHere's a gif with all the different screenshots: https://up.l3m.in/file/1620316360-stackoverflow-fonts.gif https://up.l3m.in/file/1620316360-stackoverflow-fonts.gif The macOS font is the only one which has a bar in the Q.
- throw14082020 5y agoI presume this is a config we can set, but I can't even find the stackOverflow settings, and I have more than 5k stack overflow rep so I've been using it quite a bit.
- Qub3d 5y agoIf you have Stylus or Tampermonkey, you can also just override the CSS.
- yakubin 5y agoWhy is the orange colour different on macOS? I've noticed the same effect when I switch to Mac and browse HN (the top bar becomes unreadable).
- htcfx 5y agoHuge hit to brand identity with very little payoff. Font files are usually cached, and load quickly if they aren't.
- BitwiseFool 5y agoI recognize that web fonts is a difficult problem, but it seems like a solution is to get more fonts pre-installed with people's operating systems, no?
- Isthatablackgsd 5y agoThat would be the ideal solution. However, I believes it depends on the font family since some font families are abnormally large such as Noto because of CJK (the Noto family is about 250+ MB). And it depends on the licensing of the font. Also some sites don't use common fonts which is another thing that need to be download to the device. We have over million of fonts and it is not effective to get them all downloaded to the computer eating up storage space.
- damsta 5y agoI wish Twitter would reconsider switching away from system fonts, most people do not care about custom font, but most people would benefit from system font that is more accessible and has more familiar feel.
- dstaley 5y agoAs far as I can tell, Twitter uses system fonts exclusively. Opening Twitter in devtools and looking at the "Font" filter in network shows no downloaded web fonts.
- Brajeshwar 5y agoMany people fail to realize the ROIs of trading fanciful typography with system fonts against custom fonts. Right now, India is a race-against-time with its vaccination drive. There is one website[1] that is the one barrier for anyone to get vaccinated. I'll not even go to the User Experience of the website/app but I'm appalled at who thought of having a plethora of web-fonts loaded just to render some text on it. https://twitter.com/brajeshwar/status/1387310383988232193 https://twitter.com/brajeshwar/status/1387310383988232193 1. https://www.cowin.gov.in https://www.cowin.gov.in
- bobthepanda 5y agoJFYI but that .gov.in site 403s for me; is it only available for Indians? (which would make sense in the context of a vaccination drive)
- globular-toast 5y agoRound and round the merry-go-round...
- brainzap 5y agoI already overwrite all fonts with system fonts in the browser. Now the whole internet is readable and beautiful.
- missblit 5y agoWell except the part of the internet that relies on the Material Icon font (please website designers stop doing this; just use SVGs or something instead!).
- magios 5y agoon linux I installed unifont, a singular bitmap font of size 8x16, that covers most of unicode, moved all other fonts, modified fontconfig to use only that font, disabled bold and italics, switched from chrome to firefox, changed about:config settings in that browser and use a userChrome.css where required. This allows me to have the same font everywhere for easy readability, some sites have text overflow issues because of the bitmap fonts, other sites display the glyphs in the U+F000 to U+FFFF private use area range due to those sites using those codepoints to display arrows, boxes, and such, or sometimes other glyphs that are already covered in unicode. for some extra info, using a 1920x1080 monitor in landscape or horizontal orientation, on linux, using i3 window manager and xst terminal emulator, you can open up 3 terminals in portrait or vertical orientation, each would have a width of 80 characters (8x80x3 = 1920) and a height of 67 characters with 8px left over.
- sergeykish 5y agouBlock Origin, Block remote fonts https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-...
- l0b0 5y agoYou can do this in the browser already. In Firefox, go to Preferences → Language and Appearance → Advanced and untick "Allow pages to choose their own fonts, instead of your selections above". The user experience is that it improves the vast majority of sites, by not having to read in 80 different fonts on 100 different sites, and breaks a few sites in minor ways because some text ends up overflowing their boundaries. It would be great if this became the norm again. Content is king!
- lightbulbjim 5y agoBack in the day I used to force all websites to not only use my font, but my font size. I no longer bother since switching to HiDPI displays, but it was helpful for a while.
- swiley 5y agoOh, I thought they were going to avoid sending a font when you load the page for the first time. Nope, they're going to have you re-download a font you likely already have installed. The web just keeps finding new ways to get worse.
- aaronshekey 5y agoNo fonts are being downloaded.