[thaumaturgy]

There seems to be a reply like this at the top of every font-related thread on HN. I often wonder whether it's coming from designer/developers or from end users.

Web fonts aren't popular just because they're pretty. They continue to be used everywhere because they offer a consistency that's impossible to get otherwise. With a plethora of mobile devices and desktop environments, you can't get a consistent look-and-feel for a site with just installed fonts. For some really basic sites, that's totally okay and even hits a nice quaint aesthetic, but for the kinds of sites that people pay money for, that's not good enough.

Variability in system fonts means that getting consistent paragraph and header widths and spacing is impossible. It means that the text looks too dark sometimes and too light other times. It means that the font appears unreadably small sometimes and obnoxiously large other times. It means having to build a font stack and then keep it updated as preinstalled fonts change. It means spending a lot of time dealing with issues like Helvetica Neue looking okay on MacOS but rendering like ass on somebody else's desktop because they installed a free knock-off of it. It ultimately introduces a lot more complexity and fragility than properly using a locally-hosted web font.

[ggreer]

You said it yourself: Users are viewing your site on devices with totally different screen sizes, different resolutions, on different platforms, with displays of varying brightnesses, glare, viewing angles, color spaces, and in environments of varying levels of lighting. Given these constraints, it's not possible to get a consistent look-and-feel.

So don't waste resources trying. You'll create more problems than you'll solve.

Nobody tests their web fonts as thoroughly as the default fonts have been tested on their respective platforms and devices. Web fonts can have odd platform-specific bugs with kerning, hinting, and subpixel rendering. I've had web fonts render without hinting on Edge, but look fine on Chrome & IE on the same system. How does one even begin to write automated tests that detect issues like that? Using the default fonts guarantees you'll never have to worry about such bugs.

The system's installed fonts are guaranteed to work. They improve performance. They prevent re-flows. And they're what the user is accustomed to. These reasons and more are why Facebook, Github, Twitter, Wordpress, and many others use the system fonts.

[baddox]

But it is possible to get a consistent look and feel for fonts, by using web fonts.

[ggreer]

If by "consistent" you mean "looks like garbage on some platforms", then yes, it's possible: https://medium.com/@ValidScience/two-mysterious-web-font-bug...

Web font bugs show up in the weirdest places. Unless you're constantly vigilant and manually test across all the platforms you want to support, some users will see crappy fonts. Hardly anybody goes looking for these bugs, so the bad fonts can be shipped in production for years without anybody at the company noticing. This is what has happened at Apple, Wired, and Medium.

Not that consistency is worth striving for. There's not much consistent about what you can show on both a 6" 4K OLED and a 15" 1366x768 TFT LCD. Certain fonts will look great on the former and be borderline-unreadable on the latter.

[baddox]

The first one is, just like it says, a bug, and apparently a bug that Apple fixed on their website. The second one is Wired using a terrible web font. Neither the possibility of having fixable bugs nor the option of choosing a terrible font strike me as particularly strong arguments against web fonts. You are already free to use system fonts at terrible sizes or contrast ratios, and many sites definitely do that.

[Solar19]

I'm the author of that Medium article. The "second one" you referred to isn't the second bug I reported – it's just an aside on Wired's crazy headline font. They've since replaced it with a normal readable font...

[wtallis]

I feel like we need some clarification about what "consistent" means here. If we're talking about having the typography shown to user A look exactly the same as that shown to user B, why does that matter? (And why do the major font rendering differences between Windows and macOS not matter?)

If we're talking about having the typography on user A's phone look the same as on user A's desktop, that seems a bit more reasonable, but the rest of the UI is necessarily going to be drastically different save for perhaps the color scheme.

Or is the "consistency" that matters here about making sure the website is pervasively using the same typography as the advertisements?

[baddox]

> If we're talking about having the typography shown to user A look exactly the same as that shown to user B, why does that matter?

Well, I suppose that's a valid question, but it's moving the goalposts. We were talking about having consistent fonts, and I'm claiming it's absolutely possible by using web fonts (after all, that's the reason web fonts exist).

[wtallis]

> Well, I suppose that's a valid question, but it's moving the goalposts.

We still haven't figured out where the goalposts started!

[thaumaturgy]

> So don't waste resources trying. You'll create more problems than you'll solve.

This doesn't follow. It's an argument for "put black text on a white background and call it a day because this is too hard". People don't pay money for that.

Web fonts solve an entire class of problems unrelated to whether the user is standing in the sunshine or not.

> Nobody tests their web fonts as thoroughly as the default fonts have been tested on their respective platforms and devices.

This is wrong in fact, given that the most popular fonts are coming from big design houses that probably know more about the details of font rendering than I'll ever know about any subject [1]. It's also wrong in principle because exactly zero people get paid to test platform-default fonts for my application or website. That leaves it up to the developer to test the site on every platform under the sun and moon and, even when they do that, they still have users with goofy font installations that make it look bad or unusable.

> Using the default fonts guarantees you'll never have to worry about such bugs.

Again: it doesn't, because when you do this, you're using whatever fonts are installed on the user's system, and there are a lot of people running around with crappy knock-off fonts installed. Using the default fonts guarantees that this is an issue.

And where are these people coming from that care about inconsistent subpixel rendering in web fonts but don't care about inconsistent layouts from using whatever bag of fonts they happen to have on their system at the time?

> The system's installed fonts are guaranteed to work.

Allow me to repeat myself: a "Consolas" font on one system is not the same as a "Consolas" font on another system. There are no guarantees when relying on a system's default fonts, and that's why web fonts are popular.

> ...Wordpress, and many others use the system fonts.

It's a shame you included this example, because it opens a big door for me.

Let's look at the style.css file for Wordpress's default "twentytwenty" theme [2]. It includes a gnarly font hack near the top along with the following comment:

> Chrome renders extra-wide   characters for the Hoefler Text font. This results in a jumping cursor when typing in both the classic editor and block editor. The following font-face override fixes the issue by manually inserting a custom font that includes just a Hoefler Text space replacement

...and right below that it includes two web fonts.

Their twentynineteen theme includes the same hack but no other web fonts.

How about the most popular third party theme? Web fonts: https://themes.svn.wordpress.org/astra/2.4.4/assets/fonts/

15 out of the 20 most popular Wordpress themes include web fonts (not counting FontAwesome or other symbols-and-icons fonts). I checked.

Facebook, Github, and Twitter operate at scales that are not relevant to most of the engineers on HN. They are motivated to spend engineering budgets on performance and they're willing to forsake things like typographic consistency if it saves them having to pay for another data center.

The first not-Facebook-scale example you cited is full of web fonts.

[1]: https://fonts.google.com/?sort=popularity

[2]: https://themes.svn.wordpress.org/twentytwenty/1.3/style.css (warning: content-disposition: download)

[ken]

> There are no guarantees when relying on a system's default fonts, and that's why web fonts are popular.

Technically true but misleading. There are no guarantees when including custom web fonts on a web page, either. It's the web! No matter how much fancy CSS/JS wizardry you throw in there, it's ultimately up to my browser to put the bits on the screen.

I guarantee most web designers didn't test with any of my 3 main web browser configurations, because a good portion of the time I can't even read the text through their CSS.

Earlier, you pondered:

> There seems to be a reply like this at the top of every font-related thread on HN. I often wonder whether it's coming from designer/developers or from end users.

It's amazing how many designers screw up web fonts -- maybe that's why avoiding them is also so popular.

[ggreer]

I was talking about wordpress.com, not Wordpress blog themes or wordpress.org. Of course the themes are going to go wild and use every possible browser API to customize their appearance. That doesn't mean it's a good idea.

I'm surprised you're talking about knock-off fonts, because I think it argues against your position. The portion of users who have installed crappy knock-off fonts is far smaller than the portion of users on slow internet connections (such mobile users), or the users annoyed by the re-flow, or those who run into bugs in the web fonts themselves. Apple, Wired, and Medium have all shipped web fonts that look like garbage on Windows.[1] They didn't notice these bugs for years because they simply don't test on Windows.

So web fonts cause more annoyances and bugs for the majority of users to slightly improve the experience of a tiny fraction of users who have misconfigured their systems. Do you also write code that defends against buggy browser extensions? At some point you have to accept that the user is responsible for their own device. I'm fine admitting that if a user has the gumption to install custom fonts, they also need to be knowledgeable enough to choose good ones.

1. https://medium.com/@ValidScience/two-mysterious-web-font-bug...

[dsr_]

It's coming from users, of course. If you give a designer a knob, they will tweak it.

End users don't care if they get Arial, Helvetica, Helvetica Neue or system sans-serif -- except in the case where they set it up themselves, and they're rather upset that you aren't using their preferred versions. But that's OK too, because those end users are almost as rare as designers.

All the inconsistency problems you're noting are of your own devising.

In conclusion, http://bettermotherfuckingwebsite.com/ forever, because https://thebestmotherfucking.website/ goes too far.

[jmiserez]

To be honest, I like the one without any CSS the best. The others have too much empty space.

[gowld]

Is rather have weird fonts than a site that curses and screams at me.

[ken]

> They continue to be used everywhere because they offer a consistency that's impossible to get otherwise.

That sounds backwards to me. Using standard fonts is how you achieve consistency. Using a custom font for just your webpage is not helping me (the user) get consistency at all. That's what 'standard' means.

(Frequently, custom fonts also hurt readability, which is why I hit "reader mode" on nearly every webpage these days. Every single day I run across webpages with custom fonts that I literally struggle to read.)

The situation is just like early versions of Mozilla or Java, where they used the same UI toolkit on all platforms for "consistency". Eventually, programmers realized that users tend to switch between applications more often than they switch operating systems, so the way to achieve consistency for actual users is to match the local environment.

> Variability in system fonts means [...]

Yes, all of those are real problems. That's why I've set up my web browser in a way that results in legible text for me. As per the Pottery Barn Rule, if you use a custom font, you're taking responsibility for all of these issues -- and you're going to screw up at least some of them (or something you didn't think of), and I'll hate your webpage for it.

[ancarda]

>Every single day I run across webpages with custom fonts that I literally struggle to read.

Have you considered turning off custom fonts? Firefox lets you do this -- Preferences > General > Fonts and Colors section > Advanced > [ ] Allow pages to choose their own fonts.

I did months ago and it has only improved the web for me. The sole exception is people abusing fonts for icons. But that is thankfully not very common.

[chipotle_coyote]

> Using standard fonts is how you achieve consistency.

If my web page downloads a font to a browser for that browser to use, every browser capable of downloading that font will use that font.

If my web page specifies a list of fonts that users may or may not have on their system, every browser may display a different font from that list (or even a font not from that list).

I suppose YMMV and all that, but I would say the first case is clearly giving a more consistent result than the second case. That doesn't make the second case "bad," per se, but on my system Hacker News is in Verdana and on different distributions of Linux it's in... shrug emoji? There's a Microsoft Core Fonts package floating around out there, but not everybody has it installed. And lately it's become fashionable to specify a font stack of "default system fonts," so Macs get San Francisco, Windows 7+ users get Segoe UI, etc. That's fine, and maybe it's exactly what you want... but don't call it "consistent."

I almost guarantee you have fonts on your system installed that you will not want me to use on a web page, and I can also almost guarantee you that there are a lot of pages out there that have "custom fonts" that are just fine. They're just fine! Nobody reads a web page set in Charter or Franklin Gothic or any other rational typeface for body text and screams in outrage at its illegibility.

Maybe there are designers out there who want to force terrible horrible no-good custom fonts down your throat because they want to make your reading experience worse. Maybe there are web pages set in Zapfino and Wingdings. I don't know. But when you say "custom fonts," I say "professional high-quality typeface that is consistent across all browsers." That's it. That's all I'm trying to give you.

[chadlavi]

I'm a designer and I'm very pro system fonts. Then again I don't work for a company with a typography-related identity like NYT or WSJ. For them it's a lot more important, at least in theory.

But if you make like, a productivity tool or some sort of SAAS? just use system fonts.

Edit: then again, I say this as a designer who has worked a lot in companies with heavy emphasis on accessibility and performance, so that may be a bit of my own bias...

[newhotelowner]

> Variability in system fonts means that getting consistent paragraph and header widths and spacing is impossible.

Everyone is on different screen types. From desktop to mobile, different OS, low to high DPI, different resolutions to screen size (1080p on 21in monitor vs 27in monitor), different font sizes, different brightness/colors/contrasts. Most designers I have worked with have never looked at the site on different kinds of screens. Most designers only care about how it looks on mac.

Windows render font differently compare to Mac/Android. Chrome on windows renders font differently compare to Firefox.

You will never be able to render your site perfectly on all the devices.

[gowld]

Worry more about your text fitting on the screen even when users increase font size, and less about your brand's "look and feel"

[GrayShade]

As an end user, I don't care about your web fonts, and I suspect others think the same. Usually designers push for them with concerns of brand image and consistency between platforms. I couldn't care less that I get a different font on Linux than what you design for on your Mac.

On the other hand, I care about the loading time of web sites and the privacy issues brought by the pervasive use of Google Fonts.

[redis_mlc]

So just use Arial like everybody else has for over 20 years.

I recently ripped the webfonts out of one web site and the page load time halved. I was like, "You have to be kidding!"