Disabling web fonts is one of the best things I've done for my browsing experience. The amount of hacks and workarounds people employ to prevent the text of their site jumping around is almost comical.
I'm sure the designers here will have great explanations why my operating system fonts don't fit their brand and how it's crucial that the curly bit on the r has the exact shape and how the size of the period is a critical part of the web page layout but I'm happy to just put all that crap aside. Sometimes a website looks janky as hell because nobody bothered testing if the fallback fonts had even remotely the same shape, but that's mostly on overdesigned advertisements I don't really care about anyway.
The only downside is that some websites use web fonts as a replacement for iconography, putting random words alll over the place when you disable web fonts. I wish I could just whitelist icon fonts while still disabling designer cruft.
>The only downside is that some websites use web fonts as a replacement for iconography, putting random words alll over the place when you disable web fonts. I wish I could just whitelist icon fonts while still disabling designer cruft.
Yeah, I browse with a lot of NoScript and other blockers, and icon fonts often turn into little square boxes of "cant' display" or wierd characters. If the designers had actually put something on it that said what the icon meant, eg "share on twitter" or "about us" well, that would have been pretty useful.
It strongly implies a lack of testing, using semantic markup, and not complying with accessibility standards ... which makes for a poorer experience for many people, and a loss of machine-readability (isn't SEO important anymore?)
With the right ARIA labels, accessibility shouldn't be too much of a problem.
I've found out that uBlock Origin has a setting that can block web fonts by default. This also allows me to unblock them on broken websites, so that's better than using the web font browser setting at least.
If you take individual stylistic elements you can easily argue they don't make a difference, but all these little details combined is what makes the difference.
Fonts and typography are hugely important, especially in minimalistic styles.
I think there is also a misunderstanding in this article that aesthetics don't serve purpose. Aesthetics have impact on how things are perceived, meaning it actually has impact on the user experience https://www.nngroup.com/articles/aesthetic-usability-effect/
Sometime I'd like to see trustworthy double-blind study that really shows that for user perception of these websites the special custom font matters (compared to similar common font and including slower loading of page).
The aesthetic–usability effect has been studied in the types of experiments you describe. It is also pretty easy to find yourself if you do some simple usability tests.
There is a scale to it of course. It's not like aesthetics can fix unusable products, it's just one of the tools you can and should use. And this is just usability, ignoring the value of branding, identity, etc.
If "custom fonts are good or bad" is imo not something you can get a definitive answer on. The impact on perception of usability obviously depends heavily on the fonts that are loaded, how they are used, and the rest of the page. Making broad statements will probably miss the nuance of usability and user experience.
Loading time is also a bit of a strange thing to take as a downside. Loading fonts does not have to be blocking (see font-display css), also there is a difference between loading 2 font files or 17, fonts are usually cached, and we even have variable fonts these days reducing size significantly. In other words it depends on the situation.
As with most usability topics the real way to find out is to test your use case. In my experience a few kb's more or less is not going to have a significant impact in many situations, especially if they are loaded in a non blocking way.
By all means test your case, it's always a good idea to test, and you will likely find 10 issues more urgent and more important than a couple of fonts.
Umm...font loading is blocking. Not in a bytes transferred way, but in terms of user experience. Text disappearing for a font to load is not a good experience.
Unless the website is an art piece, portfolio, or something similar, where the typographic design actually matters, I'd say the system fonts are a better choice.
Umm...like I pointed out, it doesn't have to be as we now have "font-display" which provides multiple strategies for loading (or not loading) web fonts.
Can you clarify 'hugely important'? The cited article seems to be saying 'don't make bad design choices or sacrifice usability or accessibility in the name of (bad) design'. I don't see it saying anything about selling more widgets by changing the font.
No, the article tells you that aesthetics have impact on (perceived) usability, fonts are hugely important to aesthetics. Better usability is whats going to sell more widgets.
But in terms of sales the branding is probably even more important, brands are hugely important in selling products, and fonts/typography are a big part of that. I did not focus on that as the article made the aesthetics-do-not-serve-purpose claim, but for sales branding is as relevant if not more relevant.
So if you are selling things I think you can pretty easily justify nice fonts to make your brand and products more desirable.
It does matter what your brand is of course, if your USP is cheap no frills a system font might serve that well.
> Your end-users should always trump your design "guidelines". Period.
Agree with this point at least—there are some truly god awful brand design languages out there.
Low contrast ratios, confusing color palettes, hard to read fonts, etc are all incredibly user hostile. If you’ve ever used software with a red primary color and designers who don’t put in alternative affordances for indicating destructive actions then you’ll know that poor brand design causes massive headaches for end users.
> For the most part, I believe the answer to all those questions is: not really.
Thats nice, but I believe its very important. Fonts make a huge difference, especially for longer form content.
On my blog[1] I experimented with different fonts and font settings, and it took me a while to find settings that I felt were easy on the eyes, yet conveyed the look I wanted.
It needs to be fun to create content, and it needs to be fun to view it. Yes, I read the article despite the default system font, but I did notice it.
If you want to stand out, your content has to be great, and it should look either unique, or the looks should get out of the way. I would hope this is design 101.
Custom web fonts were never the issue - there are a lot of things (like hijacking scrolling) that actually break a users experience.
"Tell me you're a cookie-cutter angry programmer with no taste or understanding of design without telling me you're a cookie-cutter angry programmer with no taste or understanding of design."
I'm sure it matters on some sites. I decided it didn't matter on my site, so I turned virtually all of them off. Might as well save people the download, and on some pages the font size dwarfed the content size.
I like the compromise of naming the desired fonts in CSS so if the user happens to have them installed, they'll see them.
It depends greatly on the goal of the website. If the only goal is to convey some textual information, sure go with "sans-serif" or "serif" or "system-ui". But your website will look different on every OS.
If you want any form of design and consistency and do not want to use a web font, what are you left with? I think Arial and Times New Roman ship with every Windows and Mac release...Linux likely not?
I'm sure the designers here will have great explanations why my operating system fonts don't fit their brand and how it's crucial that the curly bit on the r has the exact shape and how the size of the period is a critical part of the web page layout but I'm happy to just put all that crap aside. Sometimes a website looks janky as hell because nobody bothered testing if the fallback fonts had even remotely the same shape, but that's mostly on overdesigned advertisements I don't really care about anyway.
The only downside is that some websites use web fonts as a replacement for iconography, putting random words alll over the place when you disable web fonts. I wish I could just whitelist icon fonts while still disabling designer cruft.