6 ms·

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

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.

dsr_ 6y ago
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/ http://bettermotherfuckingwebsite.com/ forever, because https://thebestmotherfucking.website/ https://thebestmotherfucking.website/ goes too far.
- gowld 6y ago
  Is rather have weird fonts than a site that curses and screams at me.
- jmiserez 6y ago
  To be honest, I like the one without any CSS the best. The others have too much empty space.
ggreer 6y ago
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.
- thaumaturgy 6y ago
  > 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/ 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 https://fonts.google.com/?sort=popularity [2]: https://themes.svn.wordpress.org/twentytwenty/1.3/style.css https://themes.svn.wordpress.org/twentytwenty/1.3/style.css (warning: content-disposition: download)
chadlavi 6y ago
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...
gowld 6y ago
Worry more about your text fitting on the screen even when users increase font size, and less about your brand's "look and feel"
ken 6y ago
> 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.
- chipotle_coyote 6y ago
  > 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.
newhotelowner 6y ago
> 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.
redis_mlc 6y ago
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!"
GrayShade 6y ago
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.

dsr_ 6y ago

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/ http://bettermotherfuckingwebsite.com/ forever, because https://thebestmotherfucking.website/ https://thebestmotherfucking.website/ goes too far.

gowld 6y ago
Is rather have weird fonts than a site that curses and screams at me.
jmiserez 6y ago
To be honest, I like the one without any CSS the best. The others have too much empty space.

ggreer 6y ago

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.

thaumaturgy 6y ago
> 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/ 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 https://fonts.google.com/?sort=popularity [2]: https://themes.svn.wordpress.org/twentytwenty/1.3/style.css https://themes.svn.wordpress.org/twentytwenty/1.3/style.css (warning: content-disposition: download)

chadlavi 6y ago

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

gowld 6y ago

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

ken 6y ago

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

chipotle_coyote 6y ago
> 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.

newhotelowner 6y ago

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

redis_mlc 6y ago

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

GrayShade 6y ago

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.