9 ms·
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 ma
by eloff 6y ago
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 stuck optimizing a local maxima, which is very easy to do if you're using AB tests. Arguably the point of an AB test is to find the local maxima, but the goal should be to broaden the search space and look for something closer to the global maxima.
- Elidrake24 6y agoI agree entirely; the clients don't. It's an almost universal question brought up by them during the design phase - "this font looks like everyone else, we want our own". The changes to TypeKit have certainly put a squeeze on their options, but they still almost universally hate the system level fonts. Wish I could convince the business guys to push back, but eh, there are bigger problems we face on a day to day basis.
- winrid 6y agoEven the System Font Stack? Also, this list won't help anyway. The clients aren't picking fonts by performance.
- onion2k 6y agoThat might change. Google are changing their search ranking metrics to include the new Core Web Vitals metrics[1]. One of those is "Cumulative Layout Shift", or how much the page changes the layout over time. Using a font that isn't performant will cause the page to render, and then to move around once the page loads, which could push your site down on Google's search results page. [1] https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html https://webmasters.googleblog.com/2020/05/evaluating-page-ex...
- derefr 6y agoHas anyone ever suggested doing "progressive fonts"? I.e., start the font downloading before the page renders at all; have the font organized so the first thing that's received is the bounding boxes + kerning table + ligatures table (= enough to know how much space an inline flow of graphemes will take up); then load the page, with the page layout already settled, while loading the font itself in the background. Eventually, the text just pops into existence (without disrupting the layout) once the font is available. Or, if you don't want to make the browser engine understand the intricacies of font formats, just split the font file for each font-family into two new file-subformats, one for layout-description and one for visual-description. Then add a rule to the CSS parser, saying that CSS references to font layout-description files are loaded synchronously (i.e. blocking rendering), while CSS references to font visual-description files are loaded asynchronously (as they always have been.)
- singron 6y agoThis is a great idea. Actually drawing the glyphs can be computationally expensive too. I'm not sure what browsers do, but in the last game I made, it was an enormous win to have a glyph cache for the various combinations of (size,glyph,quantized pixel alignment) rather than rendering each glyph from scratch. I could imagine quickly getting layout information, then asynchronously getting glyph drawing information and painting from the glyph cache when it becomes available. You could even paint a similar fallback font using the layout information of the real font to avoid redoing layout on the whole page while still being readable until it finishes.
- nicbou 6y agoJust HTTP2 Server Pushing a smaller set of fonts will do the job. I have a website with 6 font variants that loads in 200ms. It loads even faster once the fonts are cached.
- 0-O-0 6y ago> the text just pops into existence This is very jarring and happens all the time with web fonts.
- open-source-ux 6y ago"Specifying custom fonts is largely a waste of bandwidth for a very marginal improvement in aesthetic...They should stop caring about the little details that much" For many websites, the choice of font can make a noticeable difference to the appearance of the site and yes, make it more aesthetically pleasing. Of course, it's best to choose only a minimal number of font weights to keep downloads size to a minimum.
- shash7 6y agoCheckout variable fonts. With them, you only load 1 single font file(abit a bit bigger) and specify the weights and styles through css.
- young_unixer 6y ago> 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.
- ggreer 6y agoWeb 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 re-flow when the font is done downloading. All of these issues can be avoided by using the fonts that are already installed on the user's device. That's what Github, Wordpress, Facebook, and Twitter do. They all have distinct brands without custom fonts.
- wtallis 6y ago> Users don't want to see a site's brand in every letter on the page. They want legible text that loads quickly. The worst cases of this are when a site loads a font that has a few letters re-drawn to match the companies logo, but the font is used as the site's default for body text. That leads to words unrelated to the company's name appearing with pieces of the company logo—very distracting and harmful to legibility.
- kick 6y agoWordpress: Open Sans, via Google Fonts https://wordpress.org/ https://wordpress.org/ Facebook: Freight Sans https://www.facebook.com/ https://www.facebook.com/
- ggreer 6y agoWhen I visit Facebook I see... font-family: Helvetica, Arial, sans-serif ...on every element I inspect. When I visit Wordpress.com and check the font on the body, I see: font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif For paragraph text such as on https://wordpress.com/about/ https://wordpress.com/about/ I see... font-family: Merriweather, Georgia, "Times New Roman", serif ...though no web fonts are downloaded. It's wordpress.org (not .com) that has Open Sans. Not sure what that's about.
- clairity 6y agoyou're arguing not to overly optimize and sweat the details, but then prematurely optimizing by recommending against custom fonts. different fonts give sites different personalities, adding richness to the web (whether you appreciate it or not). for 99.9% of sites, being overly focused on font size/download speed is an unnecessarily trivial optimiztion. with that said, don't remotely load google fonts because privacy does matter. for most sites, the speed and bandwidth difference doesn't matter. just serve them as first-party, cacheable assets.
- snazz 6y agoThe argument in favor of Google Fonts and similar services is that visitors likely already have that font cached from visiting another site that uses the same font. It can also decrease bandwidth costs if that's a bottleneck. That said, serving from your own domain is a great way to make sure that a third party can't break your fonts, in addition to what you mentioned about privacy.
- csswizardry 6y agoOP here. Cross-domain caching is a myth[1] so reusing font files won’t work. In fact, it’s literally impossible in Safari[2] and soon to be made impossible in Chrome[3]. 1. https://csswizardry.com/2019/05/self-host-your-static-assets/#myth-cross-domain-caching https://csswizardry.com/2019/05/self-host-your-static-assets... 2. https://andydavies.me/blog/2018/09/06/safari-caching-and-3rd-party-resources/#shared-caching https://andydavies.me/blog/2018/09/06/safari-caching-and-3rd... 3. https://bugs.chromium.org/p/chromium/issues/detail?id=910708 https://bugs.chromium.org/p/chromium/issues/detail?id=910708
- devadvance 6y agoFor purely aesthetic purposes, this might be a fair point. However, there are many reasons to use custom fonts beyond that. One example is accessibility in a very broad sense. In some circumstances, it reasonable to use a font with more legible type across device types, more support for internationalization (i18n), or better support for uncommon characters (e.g., mathematics). Another example is alternatives to image assets. Emoji are the common example here, but the private use areas [1] mean that fonts can be used to deliver what would otherwise be raster images or SVGs. A great example is mixing symbols in with text without resorting to images or CSS-via-spans to solve the problem. Think public transit icons, for instance. [1] https://en.wikipedia.org/wiki/Private_Use_Areas https://en.wikipedia.org/wiki/Private_Use_Areas
- jlg23 6y ago> Specifying custom fonts is largely a waste of bandwidth for a very marginal improvement in aesthetic. Designers tend to disagree. I personally agree with you, but if we were not a very small minority, lynx[1] would be much more popular today.. [1] https://invisible-island.net/lynx/ https://invisible-island.net/lynx/
- thaumaturgy 6y agoThere 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 agoIt'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.
- smnrchrds 6y ago> Specifying custom fonts is largely a waste of bandwidth for a very marginal improvement in aesthetic. Perhaps for English and other Latin-based alphabets. But for some other writing systems, system fonts are simply terrible.
- Flimm 6y agoI completely agree. System fonts render Arabic very differently on Windows, on Chrome OS and on Ubuntu, for instance, so differently that you feel you need to adjust the font size depending on the font being used.
- johnghanks 6y agoWhat 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.
- jabl 6y ago> 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. And what a glorious improvement that would be! (I could do without the RSS feed, though)
- jay_kyburz 6y agoLet me also chime in and say this would be awesome!
- christophilus 6y agoYou 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.
- nicbou 6y agoThe fonts on my site weight about 50 kb. I don't think it will make such a big difference.
- csswizardry 6y agoI did say right there in the article: > On this site, in which performance is the only name of the game, I forgo web fonts entirely, opting instead to make use of the visitor’s system font. This is fast, incredibly well suited to the device in question, and has almost zero engineering overhead. So… well read, I guess?
- Silhouette 6y agoDon't get stuck optimizing a local maxima, which is very easy to do if you're using AB tests. Surely if there is one thing we have learned from the culture of comparative testing in recent years, it is that assumption is the mother of all #$%& ups. Everyone commenting in this discussion to the effect that all sites should use system default fonts is making a huge assumption that using other fonts does not have a material effect on anything that matters to the user and/or the site owner. And yet, both in industry and in academia, lots of research has been done that did observe changes in outcomes even from relatively subtle (at least to an untrained eye) changes in typography. If someone wants to argue that they personally do not like web fonts then of course they are free to block them. Any major content blocker on their platform of choice will do this easily enough. But if someone wants to argue that everyone else should avoid web fonts, they had better bring data. In this entire discussion, I don't see much of that, only personal preferences and the odd anecdote about a bug in a specific situation.
- fermienrico 6y agoCouldn’t disagree with this more. Let me share some engineering perspective. Fonts are literally the outlines that allow the vision system to take a 2D shape and convert it to a concept in the limbic system through the semantics of language. In fact, well engineered fonts are absolutely crucial in any medium, not just electronic. From road signs to tax documents, from web pages to warning labels - fonts are one of the most underrated aspects of graphic design. Why though? Each font has a specific purpose. Mono space fonts are used for things like code and tabulated figures while fonts such as Baskerville excel at prose. There is so much to say, I don’t know what to pick and choose. Honestly, study typography from an engineering take - it is a tool. Perhaps there is a distaste for gawdy, large and loud typography and all the shenanigans designers do today, but that has nothing to do with why fonts are important. I think this oversight is highly disappointing because there is bigger fish to fry. Javascript payloads, bloated reactive websites and overall regression in what a great UI should be.
- Angostura 6y agoStrongly disagree. You may not consciously notice font choice, but it will certainly effect the way you read the page, how you interpret the the heirarchy of information and tone.
- RenRav 6y agoI try to block all the web fonts I encounter. A lot of UI symbols aren't rendered which amusingly sometimes results in overlapping text descriptions. I just can't stand looking at certain fonts or ligatures and refuse to let a website decide how it renders text.