5 ms·
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 usabilit
by codeptualize 4y ago
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.
- timw4mail 4y agoUmm...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.
- codeptualize 4y agoUmm...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. MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/... Demo: https://font-display.glitch.me/ https://font-display.glitch.me/ More info, pro/cons: https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/ https://www.smashingmagazine.com/2021/05/reduce-font-loading... And there is even more on the way: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/size-adjust https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/... As to the "better or not", read my previous comment(s).