Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The Fastest Google Fonts

csswizardry.com

Post reply on HN
Print view View original

61–70 of 152 posts

Re: The Fastest Google Fonts

#61

Post by ggreer »

baddox wrote: post #44
ggreer wrote: post #32

Earlier quoted context omitted.

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'…

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

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.

Re: The Fastest Google Fonts

#62

Post by baddox »

ggreer wrote: post #61
baddox wrote: post #44

Earlier quoted context omitted.

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

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 produc…

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.

Re: The Fastest Google Fonts

#63

Post by christophilus »

johnghanks wrote: post #37
slashdev wrote: post #3

Just use the built-in fonts. Use a good fallback list so each platform gets a good option. Specifying custom fonts is largely a waste of bandwidth for a very marginal improvement in aesthetic. The people who care most are the ones making the decision to use that font. The solution, tritely, is they should stop caring about the little details that much. The bigger details are usually what move the needle. Don't get st…

What an absolutely stupid response to this. Of course, just use something that people would already have, 5head. Let me just ask the designer on my team to stop using anything other than Arial and Times New Roman. If a typical HN reader had their way, every single webpage on the internet would be text-only, with monospace font, and an RSS feed.

You can make a stack of standard fonts look just fine. I think most of the web would be better off doing that. You can choose the best looking font for Windows, the best one for Mac, and the best looking Linux fonts, and just move along. Your page will load faster, and look more familiar to your users.

Re: The Fastest Google Fonts

#65

Post by ggreer »

baddox wrote: post #45
ggreer wrote: post #24

Earlier quoted context omitted.

Web fonts are my litmus test for whether I can trust a designer's judgment. Users don't want to see a site's brand in every letter on the page. They want legible text that loads quickly. The default fonts on Windows, Mac, iOS, and Android are the result of millions of dollars of R&D. Custom fonts are far more likely to have issues with kerning, hinting, or subpixel rendering. They also degrade load times and cause a…

You snuck in a hidden implication, which is that web fonts are less legible than system fonts. That's absolutely not the case across the board.

The system fonts are legible. With web fonts... sometimes they are and sometimes they aren't. And web fonts have that re-flow during page load, which is super annoying when you're reading the first paragraph and lose your place because the web font finally loads and it's a different width than the system font. If that's not an instance of illegibility, I don't know what is.

Re: The Fastest Google Fonts

#66

Post by Silhouette »

ggreer wrote: post #24
young_unixer wrote: post #16

Earlier quoted context omitted.

> Use a good fallback list so each platform gets a good option. Specifying custom fonts is largely a waste of bandwidth for a very marginal improvement in aesthetic. If you're content with mediocrity, sure. But if you value your brand you will want the fonts to send the message that you want to be associated with your brand. Also, you'll probably want them to be in line with the rest of the design.

Web fonts are my litmus test for whether I can trust a designer's judgment. Users don't want to see a site's brand in every letter on the page. They want legible text that loads quickly. The default fonts on Windows, Mac, iOS, and Android are the result of millions of dollars of R&D. Custom fonts are far more likely to have issues with kerning, hinting, or subpixel rendering. They also degrade load times and cause a…

The default fonts on Windows, Mac, iOS, and Android are the result of millions of dollars of R&D.

For quite some time, Apple was using Helvetica, a typeface that has objectively awful (edit: legibility) properties.

Meanwhile, some of the web fonts you see have had a very large amount of money spent on making them and world class font designers working on them.

So I don't think this argument carries much weight.

Custom fonts are far more likely to have issues with kerning, hinting, or subpixel rendering.

That depends entirely on the quality of the custom font.

As another example, for a long time on Windows you could get strange results with font stacks that used Helvetica/Arial/equivalents, because someone's random printer font would end up taking precedence over the system font you intended and result in your page looking atrocious. If you didn't know that one and used some widely recommended font stacks based on default system fonts, you would get awful results for a significant number of users.

That's what Github, Wordpress, Facebook, and Twitter do. They all have distinct brands without custom fonts.

They all have strong brands without any reference to visual design at all, other than arguably their highly recognisable logos.

However, the other 99.9999% of businesses you'll come across don't. If you're not already a world-famous unicorn brand, a well-designed and consistent look and feel does affect brand recognition and, in some cases, have very practical effects on usability.

Re: The Fastest Google Fonts

#67

Post by Solar19 »

Faster still would be to skip the request for the CSS altogether by inlining it in the head. Therefore you'd just request the font immediately and directly. This makes the preconnect moot, and should be faster.

Faster still is to use already installed fonts, as others have noted. But don't use "system" fonts if that means UI fonts like San Francisco or Segue. Exploit the rich font options on the desktop: Georgia, Sitka Text (Windows 8.1+), Calibri, Hoef, etc. Bootstrap and Medium started a ridiculous fad of using system UI fonts for body text. There are actual body text fonts available people.

Re: The Fastest Google Fonts

#68

Post by Silhouette »

gumby wrote: post #26
young_unixer wrote: post #16

Earlier quoted context omitted.

> Use a good fallback list so each platform gets a good option. Specifying custom fonts is largely a waste of bandwidth for a very marginal improvement in aesthetic. If you're content with mediocrity, sure. But if you value your brand you will want the fonts to send the message that you want to be associated with your brand. Also, you'll probably want them to be in line with the rest of the design.

> But if you value your brand you will want the fonts to send the message that you want to be associated with your brand. That's an important point. Unfortunately loading custom fonts slows down the experience and when that happens it does tell me something about the brand. (It's likely the overhead of loading fonts is drowned out by the overhead of all the trackers, but I have those blocked which speeds the web up e…

Unfortunately loading custom fonts slows down the experience

Unless someone has either gone totally overboard on the number of fonts or set their site up very badly, this is largely a non-issue in most markets today.

The total weight of all web fonts on any site/app I've worked on recently was typically less than the largest single image on the home page, and loading those fonts from a well-configured CDN rarely took more than a few tens of milliseconds and happened in parallel with everything else.

Of course you could get a FOUT if you are using an unreliable Internet connection and it drops out at just the wrong time. But then, you could equally well be missing important images or seeing a layout reflow when a stylesheet finally loads in that environment as well.

Re: The Fastest Google Fonts

#69

Post by Solar19 »

baddox wrote: post #62
ggreer wrote: post #61

Earlier quoted context omitted.

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 produc…

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.

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

Re: The Fastest Google Fonts

#70

Post by davidhyde »

sa46 wrote: post #51
davidhyde wrote: post #39

The modern bloatware web where 1.7 seconds is considered fast. Good article though, great research effort.

> The specific profile was a Samsung Galaxy S4 over 3G. 1.7 seconds is pretty reasonable for a 7 year-old phone on 3G.

Thanks, I didn’t realise that.
Post reply on HN