I disagree. The web is a place for art and graphic design as much as anything else. Websites are allowed to be pretty.
That extra flair on your lowercase “t” doesn’t help the user better interact with your features or UI. It just slows them down.
Anecdotal at best. Misleading at worst.
The user wants to complete a task - not look at a pretty poster
You are not all users. I, for one, do not enjoy using websites that don’t look nice.
many designers design more for their own ego and portfolio rather than the end-user
Again, anecdotal (though it does seem plausible).
I find myself agreeing with all the other points brought up in the article (system fonts are usually good enough, consistency across platforms isn’t essential, performance). I don’t have any extra fonts used on my website (except for where Katex needs to be used) and I think it’s fine (in most cases. I’ve seen the default font render badly on some devices and it was a little sad).
I still disagree about “websites are tools and nothing else”. I don’t want my website to be a tool. I want it to be art. I’ve poured in time and effort and money and my soul into what I’ve made. I do consider it art. I consider it a statement. And if I have to make a 35kb request to add in a specific typeface, then I’ll do it to make it reach my vision.
That extra flair on your lowercase “t” doesn’t help the user better interact with your features or UI. It just slows them down.
Anecdotal at best. Misleading at worst.
That was obviously not the real question though: the point is, do web fonts help users in any way, compared to widely available system fonts? My guess is that the difference is small enough to be hard to even detect.
As a user, they make me happy and I tend to be more engaged with the content (when used effectively), so yes I find them helpful. I don’t want to live in a world without variety or freedom of expression. As long as there are ways to turn them off, surely everyone can be happy.
We live in a world full of colour. I don’t like this idea of the hypothetical ‘user’ who ‘just wants to get things done’ and has no appreciation for the small pleasures in life. I don’t have anything against anyone who feels that way of course (it’s completely valid). Just this generalisation of ‘the user’.
It’s impossible not to detect my own instinctive, positive reaction to a nice web design, and typography is a big part of that. I am quite certain I’m not alone in that feeling. That enjoyment is “helpful” enough for me to feel strongly that web fonts are here to stay, and that’s a good thing. There’s also plenty of UX data about what typography communicates to users, even if those findings aren’t normally presented in terms of “helping.”
A poorly chosen font can be hard to read in a certain context, but that’s a far cry from “all custom web fonts are bad for usability” and I haven’t seen any evidence to back up that claim. So given there are obvious positives I think the question is really what harm they actually do.
Now obviously there’s a difference between a good web font and a crappy system font. But are all system fonts crappy? I haven’t checked, but don’t we already have a wide enough selection of good fonts widely installed on user’s systems already? Isn’t the difference between those good fonts and and (presumably) even better web fonts less noticeable? Surely we’re past the age of Arial and Times New Roman by now?
I mean, I guess it won’t be as good as the best web font someone would chose for a given application, but if anything is “close enough”, that could be it.
Obviously fonts are a subset of typography (didn’t mean to imply they are the same), but they are absolutely central to it. And I didn’t say that system fonts are all crappy. My argument doesn’t rely on that premise, and anyway, I like system fonts! I think that designing within constraints can foster creativity! I just don’t think we should impose those constraints on everyone. At least not without a lot more evidence of actual harm than I’ve seen presented.
And although we are definitely past the New Roman Times ;) I don’t think that means that a striking use of a good font is any less effective on the web.
Web applications serve an action or purpose. The user wants to complete a task - not look at a pretty poster. I understand this sounds harsh, but many designers design more for their own ego and portfolio rather than the end-user.
Sometimes I feel like I live in a totally different plane of existence as minimal-web enthusiasts. I want my tools to look good! A couple extra HTTP requests to download pretty fonts is definitely worth it. All of the caching done in your browser and in CDNs is conveniently ignored here.
I agree with you on aesthetic grounds. However, the caching situation has changed to protect user privacy. The performance calculus therefore changes too. Every first visit to a website requires CDN-hosted fonts to be downloaded regardless of whether some other site the user’s visited used the same font at the same URL. From 2010 to 2020, everyone experienced only occasional FOUT or FOIT from Google-hosted fonts. Now it’s a constant problem. There are mitigation strategies. Or, as the author rudely commands, one can go back to “web-safe” fonts (i.e. ones you think your users have installed in their OS). I think it’s a strategy worth considering for body copy on text-heavy websites, especially if most of your sessions are first-time visitors.
“Stop using custom web fonts” and “stop using fonts with proprietary licenses” are two completely different arguments. It’s frustrating and weird to see them conflated.
If you don’t like custom fonts, turn them off in your browser. There’s nothing wrong with shipping a stylesheet that refers to a suggested font, as long as the pages are still legible in a different one.
What I want is a more robust settings system for webfonts in browsers. Firefox, for example, allows me to set an all-or-nothing approach for all font families on all sites, but instead, what i tend to find is:
I want windy.com to use its preferred webfont for wind directions (which live in a goofy lil isolated span of their own), but otherwise use my fonts for everything
I want Slack/Zulip/Discord/etc. to all use my fonts for everything
I don’t entirely care that much what fonts GitHub uses so long as my monospace preferences are respected (read: fall back to the system monospace, which I configure in fonts.conf to be whatever I’m using in all my apps at that point)
I want font preview sites to be free to do whatever they want because that’s the whole point
And so on. The closest I can get to this is at least an on-demand toggle button with https://github.com/M-Reimer/togglefonts, but it’s not as nuanced as I’d like. I’m almost thinking of something like uMatrix’s UI here, but for alllowlisting webfonts.
Like most things about customizing browsers, the interface for doing it is dogshit, and it’s somehow completely undocumented on mozilla.org, but userContent.css should let you do all that: https://davidwalsh.name/firefox-user-stylesheet. Having to restart the browser to apply it is super cringe, but that’s browsers for you.
Doesn’t the Stylus extension do what you need? I’ve only needed userContent.css to style pages that aren’t accessible to extensions because they’re internal (like the Readability page) or protected (mozilla.org).
In theory, yes. However, this extension replaced an older extension which got sold to scammers! So as a rule I don’t install 3rd-party extensions unless I’m desperate, because Mozilla doesn’t do like … the most basic level of quality control, and doesn’t provide a way to install from a trusted, audited source.
I’m using the Enforce Browser Fonts extension, which is a on-demand toggle button, but it remembers when you enable webfonts for a given site and will disable them again when you navigate to a different site (including switching tabs) and re-enable them when you go back to that site.
It’s not quite as nuanced as enabling or disabling individual fonts within a site, but it definitely lets me browse the web mostly with my chosen fonts except for the places where custom fonts are important.
as long as the pages are still legible in a different one
and don’t complain if it looks like crap if your reasoning isn’t related to accessibility in some way. Design is inclusive of accessibility, not of folks expecting a Spartan web experience.
This doesn’t work out that well in practice in a lot of cases; fancier sites that use custom fonts often (usually?) don’t test them without the font loaded, and the fallback tends not to be “metric compatible” (i.e. the font will have different sizing and placing for the glyphs in addition to different shaping).
The end result being that parts of the design are unintentionally reliant on the font being loaded and may degrade with the fallback; elements may be carefully styled or sized to avoid wrapping, or an unknown assumption about the correlation between font size and character size, etc.
And yet the person who wrote this used something other than the browser’s default layout for their page.
And put a bunch of links to tools they used to build the page. And a “Donate” link. And a bunch of other things that are not the pure, brutalist content-and-content-alone that is the logical conclusion of the post.
So: “Fuck your brand!” I don’t care about your wiki or your donation page or the software you used or any of that other stuff, so I’m going to come barging in and yell obscenities at you unless you do things my way. I am, after all, the user, and therefore I trump all of your preferences. “Period.”
Right?
This kind of post reeks of entitled arrogance, of demanding that everything be done your way, no exceptions..
But maybe, just maybe, my little corner of the web is mine, thank you very much, and I’ll do with it as I please. Some of our greatest booms in web literacy and and web technology literacy have come from places like Geocities and Neopets and Myspace that just let people experiment and make their own pages that might look nice or might look bad or might be goofy or cringy or a thousand other adjectives but it’s MY page, look what I can make it do! and that’s an unbelievable hook and even one instance of it is more empowering of users than any million bland homogenized utilitarian pages the author of this post might ever produce.
Fair enough. I was leaning more towards web applications / big brand “marketing” websites, but I think it could certainly apply to personal sites as well.
This kind of post reeks of entitled arrogance, of demanding that everything be done your way, no exceptions
Well, more as in the “user’s way”. As it should be. By having all your custom fonts/assets you’re essentially telling me it has to be your way - no exceptions. Goes both ways.
I will say that there is certainly more power in the “readers” corner (extensions to disable, blockers etc) but it doesn’t mean one shouldn’t be a little considerate…
Well, more as in the “user’s way”. As it should be. By having all your custom fonts/assets you’re essentially telling me it has to be your way - no exceptions.
No, as a web author all I can do is suggest. It’s up to your user agent, taking into account your configured preferences, to decide what to actually show you.
And you’re still not getting my point: I’m a user, and I don’t like your site. That means, by your stated values, it’s time for you to get busy making changes to your site to tailor it to my preferences. So why are you here arguing with me, instead of working on making your site be what I want it to be?
This post is, probably unintentionally, like a middle-finger to the arts of typography and graphic design. I look forward to a sequel about how we should save precious bytes by going back to 8-bit color palettes, because 256 colors should be enough for anyone. We can do without lower case letters too, they’re not essential for getting a message across.
More constructively: there is no reason you have to use commercial fonts on a website. By now there are a lot of high-quality free ones, and Google Fonts hosts most of them and makes them dead easy to use. Yeah, 75% of the fonts on Google Fonts are crap, but that’s down from 90% a few years ago and it’s easy to scroll past them. Kudos to Google for investing in commissioning a lot of well-designed fonts from skilled designers.
As a tangent: Please be aware that it’s illegal in the EU to link to Google Fonts on a website without explicit inclusion in the privacy policy (given Google can track people with these convenient fonts). I recommend taking your time to download the fonts and host them yourself, which probably makes things faster as well given you can serve everything in one go.
Indeed, enabled fonts are one way that a browser can be fingerprinted, and associated with a individual user.
“Font fingerprinting is a technique used to track online activity by analyzing the unique characteristics of a user’s system fonts. By measuring the dimensions of text or individual Unicode glyphs, enumerating fonts and finding rendering differences, this method can create a unique fingerprint that is difficult to spoof or alter.”
A lot of designers I’ve worked with or talked to in the past tend to be big supporters of reducing their carbon footprint and minimizing their individual output of “waste”. What I always find interesting is how that never seems to translate into their work.
It might be small in the grand scheme of things, but having an extra HTTP request (or more) for your custom fonts and requiring your users to consume more bandwidth on their end is not “eco”. As designers we should cut the fat and reduce software bloat in the small areas that we’re able to: the front end.
I don’t like these kinds of sustainability arguments in general and want to explore why. It comes down to the implications of moralizing tiny-scale changes.
Take switching to local fonts. It’s hard to get numbers, but one person estimated it at 100kg of CO₂/year, under the assumption of 10k visitors a month. That seems like a lot, but it’s actually negligible. By comparison, the average person emits 300kg/yearjust by breathing. By carbon offset prices, that 100kg costs about 3 USD to offset. So you’re basically calling people hypocrites for not doing 3 dollars worth of sustainability.
(I know offsets are a controversial and terrible metric, but it’s for a sense of scale, to convey how little 100kg/year actually is.)
So the degree of improvement is actually really, really small. But any improvement is worthwhile, right? But the same argument applies to everything else in our lives, because there’s lots of other ways to cut down on your emissions. Like turning your desktop off every night. Or washing clothes by hand. Or not toasting your bread. Inevitably there are going to be some things that seem silly to you to do. But if the moral cutoff is low enough, then you’re now acting immorally for not taking those steps.
Obviously there’s a difference in effort; switching to local fonts is a one-time cost while giving up toast lasts forever. It just seems like the scale is too small to be worth considering.
EDIT: Also it’s tough to estimate the marginal emissions per request. This study found that in Finland, mobile data usage grew from ~nothing in 2011 to a million terabytes in 2017 without the network providers using any more electricity.
I dislike this argument as well, because it’s negligible for one thing, but more importantly (to me) because the whole idea of “carbon footprint” was invented by the fossil fuel industry to shift blame away from themselves and onto individuals. Of course, conserving as a general policy is a good idea, but if we as web professionals are going to say we care about carbon emissions, we should have the courage to speak to the political reality of the situation instead of pretending that we’re saving the planet with brutalist design.
100kg/CO₂ per year is not negligible, considering the annual per capita budget for the 1.5⁰C target is about 1500kg/CO₂ pa (which fortunately excludes breathing, as it’s typically CO₂ that’s recently been captured by plants) But I won’t disagree that emissions calculations for digital infrastructure all seem terribly flawed.
Fair point! It still seems negligible to me, because I think of it as being spread across (at least) 10k people, so only about 10 grams a person. But maybe that’s the wrong model. Regardless, I’m now skeptical that 100kg/yr is too high an estimate.
You can attribute the 100kg/CO₂ per year to the visitors, or to the designer who decided to include the web font. It’s all just bookkeeping decisions, and unfortunately our industry’s bookkeeping about carbon emissions is terrible at the moment. Instead of summing the impact of small decisions up to a larger whole, we take ballpark estimates about the industry as a whole, and divide them over small decisions.
And then - veering off topic - we have the flawed tendency to focus on waste, when efficiency is not really a useful metric for impact reduction. Video codecs belong to the most efficient forms of digital communication our species has developed. But I’m willing to bet that the energy usage of video (conferencing, streaming or on-demand) dwarfs that of most other digital communication technology.
Custom web fonts, good. Not hosting them first-party, bad.
I don’t want to send data to Google and Adobe. Here’s the µBLock Origin rule to block third-party fonts: *$font,third-party. The only times this gives me trouble are stone age websites still using icon fonts in 2023–to which there are rendering, performance, size, accessibility, and semantic reasons to just use SVGs here.
Thanks for the ublock rule, I’ve also disabled fonts through the Firefox setting “Allow pages to choose their own fonts, instead of your selections above” in Font configuration.
That’s certainly a route to go–especially to save data. I like the typography options custom fonts can provide, I just don’t like the privacy implications of using these big services.
I understand this sounds harsh, but many designers design more for their own ego and portfolio rather than the end-user.
It is harsh, and it’s not fair. How can anyone claim to understand the true motivations of a group of people from all walks of life, who number in the many thousands, if not millions?
This is an unhelpful analogy. How often is a specific design directly attributed to a dictatorial designer only interested in inflating their own ego and portfolio?
If you don’t like how a designer designs stuff - don’t hire them.
If you want to know if they care more about their ego than their customers - ask them.
People ascribe evils like inaccessible design to specific people or rather a specific class of people rather than the actual cause, which is huge websites following each other in a fashion-led dance in pursuit of intangibles like “engagement”.
That depends, there is some reserved range for custom characters, and if you disable custom fonts in Firefox, it will still use web fonts for that range.
However this isn’t followed by everyone, so it breaks for example Microsoft’s icon font used in web Outlook etc. I still rather just learn which Georgian letter corresponds to which function than change my preferred browser setting, though.
I agree that with system fonts, few if any users will say, “I hate your font and it prevents me from doing what I want.” So I understand the argument that custom fonts are just frivolous waste.
However fonts are an important tool to affect your users’ subconscious emotional state / attitude toward your content. For example, some fonts nudge people toward a mental state of whimsy, while other fonts nudge users to feel like they’re cosying up with a book, and other fonts feel academic or technical.
Few users are aware that fonts have an effect on their state of mind, but that doesn’t mean the effect isn’t important.
As a person living in rural Michigan and online through a rural WISP. Yes. Please.
I think Web Fonts is just part of the problem that modern web developers no longer know what its like to be on a modem, or low speed internet connection. Loading modern websites, with endless 3rd party fetches for JS or Fonts just slows everything down. Its TERRIBLE when your upstream is ~2Mbyte/s. I literally stall just loading websites some times because of how many outgoing connections my browser is suddenly making.
The problem is exacerbated on any extremely modern site when loading things fast, eg Facebook, Tiktok, etc.
Not even getting into the privacy mess that web fonts/js (mostly living on Google domains) bring.
In the past I’ve used custom web fonts on my search engine but ended up removing them (or rather moving them to a different theme). The default font on all of the browsers I tested (~10 different browsers, 5+ different rendering engine) was already quite good, using the default fonts gave the page a more native look and feel in my opinion, and the performance gain was well worth it. Also, some users may disable fonts (for example, by setting browser.display.use_document_fonts to 0 in the Firefox about:config page), or increase/decrease the font size, so there is no guarantee the user will see the font as the developer sees it.
In terms of performance, to put it in perspective here are the two themes for my search engine with and without the fonts:
In the worst case scenario, assuming no caching and that the browser only supports older font formats, the total transfer size including the fonts is ~925 KB, compared to ~59 KB without fonts.
The problem with default fonts is that monospace is unlikely to pair correctly with the body font. The problem with system fonts is that you cannot pair monospace and a body font. I am using custom fonts mostly for this issue. And I tweak my monospace font to really match the metrics of the body font.
Browsers artificially shrink monospace fonts, if that’s what you’re referring to. For some reason, specifying monospace, monospace instead of just monospace suppresses this behavior.
I disagree. The web is a place for art and graphic design as much as anything else. Websites are allowed to be pretty.
Anecdotal at best. Misleading at worst.
You are not all users. I, for one, do not enjoy using websites that don’t look nice.
Again, anecdotal (though it does seem plausible).
I find myself agreeing with all the other points brought up in the article (system fonts are usually good enough, consistency across platforms isn’t essential, performance). I don’t have any extra fonts used on my website (except for where Katex needs to be used) and I think it’s fine (in most cases. I’ve seen the default font render badly on some devices and it was a little sad).
I still disagree about “websites are tools and nothing else”. I don’t want my website to be a tool. I want it to be art. I’ve poured in time and effort and money and my soul into what I’ve made. I do consider it art. I consider it a statement. And if I have to make a 35kb request to add in a specific typeface, then I’ll do it to make it reach my vision.
That was obviously not the real question though: the point is, do web fonts help users in any way, compared to widely available system fonts? My guess is that the difference is small enough to be hard to even detect.
As a user, they make me happy and I tend to be more engaged with the content (when used effectively), so yes I find them helpful. I don’t want to live in a world without variety or freedom of expression. As long as there are ways to turn them off, surely everyone can be happy.
We live in a world full of colour. I don’t like this idea of the hypothetical ‘user’ who ‘just wants to get things done’ and has no appreciation for the small pleasures in life. I don’t have anything against anyone who feels that way of course (it’s completely valid). Just this generalisation of ‘the user’.
It really depends on the metrics measured.
Does the font help the user fill out the form and submit it? No, not really.
Does the font help engender a brand feeling of trust across platforms and mediums? Probably yes.
It’s impossible not to detect my own instinctive, positive reaction to a nice web design, and typography is a big part of that. I am quite certain I’m not alone in that feeling. That enjoyment is “helpful” enough for me to feel strongly that web fonts are here to stay, and that’s a good thing. There’s also plenty of UX data about what typography communicates to users, even if those findings aren’t normally presented in terms of “helping.”
A poorly chosen font can be hard to read in a certain context, but that’s a far cry from “all custom web fonts are bad for usability” and I haven’t seen any evidence to back up that claim. So given there are obvious positives I think the question is really what harm they actually do.
I’d wager typography is not limited to fonts.
Now obviously there’s a difference between a good web font and a crappy system font. But are all system fonts crappy? I haven’t checked, but don’t we already have a wide enough selection of good fonts widely installed on user’s systems already? Isn’t the difference between those good fonts and and (presumably) even better web fonts less noticeable? Surely we’re past the age of Arial and Times New Roman by now?
See this related submission: https://lobste.rs/s/tdiloe/modern_font_stacks
It’s basically grouping “typeface styles” across different systems’ installed fonts.
This is big, thank you.
I mean, I guess it won’t be as good as the best web font someone would chose for a given application, but if anything is “close enough”, that could be it.
Obviously fonts are a subset of typography (didn’t mean to imply they are the same), but they are absolutely central to it. And I didn’t say that system fonts are all crappy. My argument doesn’t rely on that premise, and anyway, I like system fonts! I think that designing within constraints can foster creativity! I just don’t think we should impose those constraints on everyone. At least not without a lot more evidence of actual harm than I’ve seen presented.
And although we are definitely past the New Roman Times ;) I don’t think that means that a striking use of a good font is any less effective on the web.
Sometimes I feel like I live in a totally different plane of existence as minimal-web enthusiasts. I want my tools to look good! A couple extra HTTP requests to download pretty fonts is definitely worth it. All of the caching done in your browser and in CDNs is conveniently ignored here.
The author is saying that default fonts do look good
The author is also arguing against going out of your way to make web apps look good.
Like in most of such articles, the author could use a couple of “it depends” in there.
I agree with you on aesthetic grounds. However, the caching situation has changed to protect user privacy. The performance calculus therefore changes too. Every first visit to a website requires CDN-hosted fonts to be downloaded regardless of whether some other site the user’s visited used the same font at the same URL. From 2010 to 2020, everyone experienced only occasional FOUT or FOIT from Google-hosted fonts. Now it’s a constant problem. There are mitigation strategies. Or, as the author rudely commands, one can go back to “web-safe” fonts (i.e. ones you think your users have installed in their OS). I think it’s a strategy worth considering for body copy on text-heavy websites, especially if most of your sessions are first-time visitors.
Edit: Meant to post at the top level rather than as a reply to you
“Stop using custom web fonts” and “stop using fonts with proprietary licenses” are two completely different arguments. It’s frustrating and weird to see them conflated.
If you don’t like custom fonts, turn them off in your browser. There’s nothing wrong with shipping a stylesheet that refers to a suggested font, as long as the pages are still legible in a different one.
What I want is a more robust settings system for webfonts in browsers. Firefox, for example, allows me to set an all-or-nothing approach for all font families on all sites, but instead, what i tend to find is:
And so on. The closest I can get to this is at least an on-demand toggle button with https://github.com/M-Reimer/togglefonts, but it’s not as nuanced as I’d like. I’m almost thinking of something like uMatrix’s UI here, but for alllowlisting webfonts.
Like most things about customizing browsers, the interface for doing it is dogshit, and it’s somehow completely undocumented on mozilla.org, but userContent.css should let you do all that: https://davidwalsh.name/firefox-user-stylesheet. Having to restart the browser to apply it is super cringe, but that’s browsers for you.
LibreWolf at least you can close the tab and open a new one to the page to see changes. That’s definitely better than closing the entire browser.
Doesn’t the Stylus extension do what you need? I’ve only needed userContent.css to style pages that aren’t accessible to extensions because they’re internal (like the Readability page) or protected (mozilla.org).
In theory, yes. However, this extension replaced an older extension which got sold to scammers! So as a rule I don’t install 3rd-party extensions unless I’m desperate, because Mozilla doesn’t do like … the most basic level of quality control, and doesn’t provide a way to install from a trusted, audited source.
I’m using the Enforce Browser Fonts extension, which is a on-demand toggle button, but it remembers when you enable webfonts for a given site and will disable them again when you navigate to a different site (including switching tabs) and re-enable them when you go back to that site.
It’s not quite as nuanced as enabling or disabling individual fonts within a site, but it definitely lets me browse the web mostly with my chosen fonts except for the places where custom fonts are important.
Well now this seems excellent, if perhaps (seemingly?) not actively maintained anymore. I’ll give this a go, thanks!
and don’t complain if it looks like crap if your reasoning isn’t related to accessibility in some way. Design is inclusive of accessibility, not of folks expecting a Spartan web experience.
This doesn’t work out that well in practice in a lot of cases; fancier sites that use custom fonts often (usually?) don’t test them without the font loaded, and the fallback tends not to be “metric compatible” (i.e. the font will have different sizing and placing for the glyphs in addition to different shaping).
The end result being that parts of the design are unintentionally reliant on the font being loaded and may degrade with the fallback; elements may be carefully styled or sized to avoid wrapping, or an unknown assumption about the correlation between font size and character size, etc.
I kind of enjoy this effect though, as or correlates quite well with web applications I don’t particularly like anyway.
Especially, I like making Jira, MS Teams, and Outlook Web look extra crap when I’m screen sharing in a meeting.
And yet the person who wrote this used something other than the browser’s default layout for their page.
And put a bunch of links to tools they used to build the page. And a “Donate” link. And a bunch of other things that are not the pure, brutalist content-and-content-alone that is the logical conclusion of the post.
So: “Fuck your brand!” I don’t care about your wiki or your donation page or the software you used or any of that other stuff, so I’m going to come barging in and yell obscenities at you unless you do things my way. I am, after all, the user, and therefore I trump all of your preferences. “Period.”
Right?
This kind of post reeks of entitled arrogance, of demanding that everything be done your way, no exceptions..
But maybe, just maybe, my little corner of the web is mine, thank you very much, and I’ll do with it as I please. Some of our greatest booms in web literacy and and web technology literacy have come from places like Geocities and Neopets and Myspace that just let people experiment and make their own pages that might look nice or might look bad or might be goofy or cringy or a thousand other adjectives but it’s MY page, look what I can make it do! and that’s an unbelievable hook and even one instance of it is more empowering of users than any million bland homogenized utilitarian pages the author of this post might ever produce.
Fair enough. I was leaning more towards web applications / big brand “marketing” websites, but I think it could certainly apply to personal sites as well.
Well, more as in the “user’s way”. As it should be. By having all your custom fonts/assets you’re essentially telling me it has to be your way - no exceptions. Goes both ways.
I will say that there is certainly more power in the “readers” corner (extensions to disable, blockers etc) but it doesn’t mean one shouldn’t be a little considerate…
No, as a web author all I can do is suggest. It’s up to your user agent, taking into account your configured preferences, to decide what to actually show you.
And you’re still not getting my point: I’m a user, and I don’t like your site. That means, by your stated values, it’s time for you to get busy making changes to your site to tailor it to my preferences. So why are you here arguing with me, instead of working on making your site be what I want it to be?
This post is, probably unintentionally, like a middle-finger to the arts of typography and graphic design. I look forward to a sequel about how we should save precious bytes by going back to 8-bit color palettes, because 256 colors should be enough for anyone. We can do without lower case letters too, they’re not essential for getting a message across.
More constructively: there is no reason you have to use commercial fonts on a website. By now there are a lot of high-quality free ones, and Google Fonts hosts most of them and makes them dead easy to use. Yeah, 75% of the fonts on Google Fonts are crap, but that’s down from 90% a few years ago and it’s easy to scroll past them. Kudos to Google for investing in commissioning a lot of well-designed fonts from skilled designers.
As a tangent: Please be aware that it’s illegal in the EU to link to Google Fonts on a website without explicit inclusion in the privacy policy (given Google can track people with these convenient fonts). I recommend taking your time to download the fonts and host them yourself, which probably makes things faster as well given you can serve everything in one go.
If selfhosting fonts is too much of a hassle, https://fonts.bunny.net/ is a drop-in replacement for Google Fonts. (not an ad)
Why would it be a hassle? It’s as simple as self-hosting images.
Indeed, enabled fonts are one way that a browser can be fingerprinted, and associated with a individual user.
“Font fingerprinting is a technique used to track online activity by analyzing the unique characteristics of a user’s system fonts. By measuring the dimensions of text or individual Unicode glyphs, enumerating fonts and finding rendering differences, this method can create a unique fingerprint that is difficult to spoof or alter.”
https://browserleaks.com/ https://www.bamsoftware.com/papers/fontfp.pdf
Exactly!
I don’t like these kinds of sustainability arguments in general and want to explore why. It comes down to the implications of moralizing tiny-scale changes.
Take switching to local fonts. It’s hard to get numbers, but one person estimated it at 100kg of CO₂/year, under the assumption of 10k visitors a month. That seems like a lot, but it’s actually negligible. By comparison, the average person emits 300kg/year just by breathing. By carbon offset prices, that 100kg costs about 3 USD to offset. So you’re basically calling people hypocrites for not doing 3 dollars worth of sustainability.
(I know offsets are a controversial and terrible metric, but it’s for a sense of scale, to convey how little 100kg/year actually is.)
So the degree of improvement is actually really, really small. But any improvement is worthwhile, right? But the same argument applies to everything else in our lives, because there’s lots of other ways to cut down on your emissions. Like turning your desktop off every night. Or washing clothes by hand. Or not toasting your bread. Inevitably there are going to be some things that seem silly to you to do. But if the moral cutoff is low enough, then you’re now acting immorally for not taking those steps.
Obviously there’s a difference in effort; switching to local fonts is a one-time cost while giving up toast lasts forever. It just seems like the scale is too small to be worth considering.
EDIT: Also it’s tough to estimate the marginal emissions per request. This study found that in Finland, mobile data usage grew from ~nothing in 2011 to a million terabytes in 2017 without the network providers using any more electricity.
I dislike this argument as well, because it’s negligible for one thing, but more importantly (to me) because the whole idea of “carbon footprint” was invented by the fossil fuel industry to shift blame away from themselves and onto individuals. Of course, conserving as a general policy is a good idea, but if we as web professionals are going to say we care about carbon emissions, we should have the courage to speak to the political reality of the situation instead of pretending that we’re saving the planet with brutalist design.
100kg/CO₂ per year is not negligible, considering the annual per capita budget for the 1.5⁰C target is about 1500kg/CO₂ pa (which fortunately excludes breathing, as it’s typically CO₂ that’s recently been captured by plants) But I won’t disagree that emissions calculations for digital infrastructure all seem terribly flawed.
Fair point! It still seems negligible to me, because I think of it as being spread across (at least) 10k people, so only about 10 grams a person. But maybe that’s the wrong model. Regardless, I’m now skeptical that 100kg/yr is too high an estimate.
You can attribute the 100kg/CO₂ per year to the visitors, or to the designer who decided to include the web font. It’s all just bookkeeping decisions, and unfortunately our industry’s bookkeeping about carbon emissions is terrible at the moment. Instead of summing the impact of small decisions up to a larger whole, we take ballpark estimates about the industry as a whole, and divide them over small decisions.
And then - veering off topic - we have the flawed tendency to focus on waste, when efficiency is not really a useful metric for impact reduction. Video codecs belong to the most efficient forms of digital communication our species has developed. But I’m willing to bet that the energy usage of video (conferencing, streaming or on-demand) dwarfs that of most other digital communication technology.
I’m ok with system fonts but I draw the line at straight double quotes.
Custom web fonts, good. Not hosting them first-party, bad.
I don’t want to send data to Google and Adobe. Here’s the µBLock Origin rule to block third-party fonts:
*$font,third-party. The only times this gives me trouble are stone age websites still using icon fonts in 2023–to which there are rendering, performance, size, accessibility, and semantic reasons to just use SVGs here.Thanks for the ublock rule, I’ve also disabled fonts through the Firefox setting “Allow pages to choose their own fonts, instead of your selections above” in Font configuration.
That’s certainly a route to go–especially to save data. I like the typography options custom fonts can provide, I just don’t like the privacy implications of using these big services.
Are frilly fonts overused on the web now that the tech makes them easy to implement? Yes.
Are they all bad? No.
Somebody missed the point on what good typography is for.
It is harsh, and it’s not fair. How can anyone claim to understand the true motivations of a group of people from all walks of life, who number in the many thousands, if not millions?
Ye shall know them by their fruits.
This is an unhelpful analogy. How often is a specific design directly attributed to a dictatorial designer only interested in inflating their own ego and portfolio?
If you don’t like how a designer designs stuff - don’t hire them.
If you want to know if they care more about their ego than their customers - ask them.
People ascribe evils like inaccessible design to specific people or rather a specific class of people rather than the actual cause, which is huge websites following each other in a fashion-led dance in pursuit of intangibles like “engagement”.
Meh. Turn them off and get over it?
That breaks sites that use icon fonts (another abomination).
That depends, there is some reserved range for custom characters, and if you disable custom fonts in Firefox, it will still use web fonts for that range.
However this isn’t followed by everyone, so it breaks for example Microsoft’s icon font used in web Outlook etc. I still rather just learn which Georgian letter corresponds to which function than change my preferred browser setting, though.
I agree that with system fonts, few if any users will say, “I hate your font and it prevents me from doing what I want.” So I understand the argument that custom fonts are just frivolous waste.
However fonts are an important tool to affect your users’ subconscious emotional state / attitude toward your content. For example, some fonts nudge people toward a mental state of whimsy, while other fonts nudge users to feel like they’re cosying up with a book, and other fonts feel academic or technical.
Few users are aware that fonts have an effect on their state of mind, but that doesn’t mean the effect isn’t important.
As a person living in rural Michigan and online through a rural WISP. Yes. Please.
I think Web Fonts is just part of the problem that modern web developers no longer know what its like to be on a modem, or low speed internet connection. Loading modern websites, with endless 3rd party fetches for JS or Fonts just slows everything down. Its TERRIBLE when your upstream is ~2Mbyte/s. I literally stall just loading websites some times because of how many outgoing connections my browser is suddenly making.
The problem is exacerbated on any extremely modern site when loading things fast, eg Facebook, Tiktok, etc.
Not even getting into the privacy mess that web fonts/js (mostly living on Google domains) bring.
Personal recommendations:
For people who want to use system fonts with different looks, here’s a useful site: https://github.com/system-fonts/modern-font-stacks.
In the past I’ve used custom web fonts on my search engine but ended up removing them (or rather moving them to a different theme). The default font on all of the browsers I tested (~10 different browsers, 5+ different rendering engine) was already quite good, using the default fonts gave the page a more native look and feel in my opinion, and the performance gain was well worth it. Also, some users may disable fonts (for example, by setting
browser.display.use_document_fontsto0in the Firefoxabout:configpage), or increase/decrease the font size, so there is no guarantee the user will see the font as the developer sees it.In terms of performance, to put it in perspective here are the two themes for my search engine with and without the fonts:
In the worst case scenario, assuming no caching and that the browser only supports older font formats, the total transfer size including the fonts is ~925 KB, compared to ~59 KB without fonts.
The problem with default fonts is that monospace is unlikely to pair correctly with the body font. The problem with system fonts is that you cannot pair monospace and a body font. I am using custom fonts mostly for this issue. And I tweak my monospace font to really match the metrics of the body font.
Browsers artificially shrink monospace fonts, if that’s what you’re referring to. For some reason, specifying
monospace, monospaceinstead of justmonospacesuppresses this behavior.Shan’t!