Stack Overflow switches to system fonts on May 10, 2021 | Hacker News Reader

Stack Overflow switches to system fonts on May 10, 2021

meta.stackexchange.com

179 pointssandebert80 comments

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

Ubuntu has the advantage of having a clear distinction between uppercase i and lowercase L.

In Arial, they're indistinguishable. In Roboto, you can see the difference if they're right next to each other (l is longer than I). Segoe UI has different variants but the one I've found on the MS web site has very similar or identical lI's, just like San Francsico.

I know, fixed width fonts would fix that, but not everything that should will be in those. And especially on a programming website, that matters.

Those differences are more important on editors or programming websites, than for general text.

Reason being that in general text we don't read based on individual letters, we recognize "shapes" of words.

That's because it deosn’t mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht the frist and lsat ltteer be at the rghit pclae. The rset can be a toatl mses and you can sitll raed it wouthit porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe.

Trebuchet MS is an okay choice for distinguishing between l and I. I like it as a happy medium between Arial and Verdana as far as "basic" fonts go.

Fixed width fonts don't always fix it depending on context. Consider

    Your Passcode is: 6234024

Is that an O (oh) or a 0 (zero). It's an Oh. Of course often in a fixed width font the zero has a slash through it but if there's no zero nearby to compare it to most people won't notice.

It's a zero, right? Easily verifiable by copy-pasting it in a Python or JavaScript interpreter.

It's pretty noticeable with the monospace font that used on my system because O is more like a circle and 0 is thinner. There is no slash, and it is fortunate because it could be mistaken with Ø otherwise.

> There is no slash, and it is fortunate because it could be mistaken with Ø otherwise.

Another option, like on my system, is that zeros have a dot in the middle.

>It's an Oh

Is it actually a zero or am I missing something?

Looks like a zero to me. Unless it was supposed to be Ø?

do you mean the ohs in 'Your' or 'passcode' or are you joking?

Likewise here, I've never liked the Ubuntu font. Something about it just feels slightly off, like those letter-shaped refrigerator magnets for kids.

From all the common sans-serif fonts I looked at, it's the only one that distinguishes between I and l.

> I and l

It's even more prescient considering that on my screen, those two letters look exactly the same.

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

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

The noto font is the default family on Fedora Cinnamon, it’s a beautiful clear font on everything from 2560 at 14” to 4K@27.

With JuliaMono for programming I’m finally happy with fonts everywhere :).

Are you sure it's not just what you're used to? I look at the Ubuntu font every day and when I look at the comparison posted elsewhere in the thread, Ubuntu looks the most normal to me.

That’s a great way to describe it.

> At the end of the day, a custom font just isn't very important for the vast majority of sites

IMO custom fonts are fine (beneficial sometimes, matching fonts used in any relevant logos and so forth) for titles and other big text, but for body text stick with something basic and/or familiar to the user.

I put Ubuntu first because it's the most beautiful and unique. Frisco and Sagoe are yet-another-Helvetica-clones. You'd think they would have the money to pay for Helvetica... but I guess that's how you stay rich.

Neither San Francisco nor Segoe are at all similar to Helvetica. Apple used Helvetica as the iOS system typeface for years before switching to SF, so I don’t think the licensing cost is the main issue.

Had it licensed from Linotype since the very early 1980s I think? It's literally one of the reasons for the Helvetica's cachet, Linotype were clever with their licences (Apple, Adobe, Xerox & it's a core postscript font).

Also, Helvetica clones exist mainly to get around licencing costs related to physical printers (if your software uses something metrically identical you can just use the existing postscript drivers). SF and Segoe are for UI text, which Helvetica is not suited to (Apple had to adjust the metrics to make it more usable, for example)

Actually, Segoe is a Frutiger clone, not a Helvetica clone. Also see https://en.wikipedia.org/wiki/Segoe#Licensing_controversy

Maybe unpopular opinion: I love the Ubuntu font.

>I 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'd say a custom font isn't important for any site. Except perhaps a font fountry showcasing their wares.

I do wish OS and/or browser vendors added more agreed system fonts though (pre-installed and ready to go). So that we have a selection of say 100 fonts guaranteed to be on Windows, macOS, Linux, iOS, Android, FreeBSD... I guess adding emojis anually is more important...

"At the end of the day, a custom font just isn't very important for the vast majority of sites."

I also believe performance should trump other design aspects of a website. This means including using the default Operating System (OS) font stack over a custom font if it means faster page loads.

However, I also recognise that a carefully chosen custom font plays a big part in the aesthetics of a website. It can set the tone of the website as well as giving it a distinctive look that sets it apart from other websites. Can you imagine books, posters, magazines, films etc all set in a limited palette of available fonts? The variety of typefaces available is infinite and the printed word is immeasurably richer for it.

There are ways of limiting the download size of fonts. For example, limiting typeface weights (e.g. 3 weights only: regular, bold, italic) can amount to approx 60kb of downloads in total (20kb per font x 3 using the WOFF2 font format). That might still be too much for many developers, but I suspect that images will be larger (and possibly JavaScript too).

I agree with you at least in theory. But the issue with web fonts is it's difficult to use them in a way that doesn't harm performance and also doesn't cause flashes of unstyled content. Every time I visit wired.com I find the font transition jarring and unsatisfying, honestly I think they'd be better off with system fonts.

Print media just doesn't have any downsides to custom fonts so there's no reason to not use them.

I normally do not use webfonts either, although I do use a cascade of fonts ending in serif/sans-serif to use specific fonts if available. As you say, it’s not very important.

But there is one where it did matter: the Nigerian Oil Spill Monitor [1], a data entry and exploration application I built in 2013-2019.

I did try different free fonts, and found that with Ubuntu I could read the data much more accurately so I put it there as a webfont even if I was trying to minimize the amount of data loaded. (Internet bandwidth in Nigeria was not great at the time; many of our users used the application through shared GSM links.) Maybe by now, with the application’s users having better screens and improved font rendering, it would be fine to remove the Ubuntu font. Back then, with fewer pixels, it was the best way to pack information in the screen.

[1] https://sentido-labs.com/en/portfolio/#Nigerian-Oil-Spill-Mo...

The fonts that ship with most Android installs are really uninspiring. That's one platform that really needs better built-in fonts, otherwise the "out of box" typography is pretty dreary -- it's effectively just Roboto which can get monotonous really fast, and a very mediocre (imo) Roman typeface.

I think "boring" is what we should aim for when it comes to system fonts. This way, the typeface will get out of your way and you can really focus on content. Using fonts that have a special feeling works quite well if you want to get attention, so it's good for ads and okay for headings sometimes, but for body text it's better to use a boring font.

Roboto is reasonably boring but the real issue is, on most Android phones it’s the only decent font, so it’s a bit monotonous, but as a font Roboto’s fine.

However the Droid Serif font that ships with Android isn’t boring — it’s just awkward. Blockier than Times New Roman, with serifs that jut out. Reading a page of text in it does make me notice the font — and not in a good way.

I, for one, really like Ubuntu font. However, I would rather prefer it not be used as a default on websites I frequent.

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

The 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

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

I 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?

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

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

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

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

I 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/

I get Z003, Z003-MediumItalic, in Firefox on Arch Linux. It comes from URW fonts.

Good 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 [1]: https://caniuse.com/extended-system-fonts

Here's a gif with all the different screenshots: https://up.l3m.in/file/1620316360-stackoverflow-fonts.gif

The macOS font is the only one which has a bar in the Q.

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

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

If you have Stylus or Tampermonkey, you can also just override the CSS.

You 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!

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

Amazing how differing fonts successfully make each screenshot ”feel” like each OS to me.

Don't you think browser chrome might add to that feeling?

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

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

This 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

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

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

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

I 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?

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

System body text and custom headings are good for a compromise between identity and performance/integration.

I already overwrite all fonts with system fonts in the browser. Now the whole internet is readable and beautiful.

Well 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!).

uBlock Origin, Block remote fonts

https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-...

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

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

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

Oh,

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.

No fonts are being downloaded.

Many 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

1. https://www.cowin.gov.in

JFYI 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)

Round and round the merry-go-round...

Huge hit to brand identity with very little payoff. Font files are usually cached, and load quickly if they aren't.

What fraction of the users come to stack overflow because of the font?

I'm not sure. What fraction come "because of the logo?"

You a starting to get my point.

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

They will probably define a list of acceptable fonts and let the browser choose. See this article… 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.

> 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

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

You don't need custom style sheets. One font-family declaration can hit them all: https://markdotto.com/2018/02/07/github-system-fonts/#the-st...

Reply on news.ycombinator.com