The joy of accidentally weird-looking websites

In the past couple of weeks, my browsing experience has felt a little different than usual. I noticed more and more weird-looking websites, with surprising choices of fonts and sometimes unorthodox decisions when it comes to typography. Only recently did I realise that it was my Safari extension, StopTheFonts, which I had set to block all third-party web fonts, that made most of these sites look strange, as if they didn’t render properly.

A few times, I opened those websites in a private tab, where the extension is disabled, just to check what I was supposed to be looking at. Then I can see how worthwhile my time and effort spent on this web font really was and how the website could improve by loading it. Most of the time, the complete version of the site, the one displaying the web fonts (most of which come from Google Fonts), looked better indeed. Or should I say slightly better?

In a lot of cases, the full version wasn’t really worth the call for web fonts, and I ended up embracing these simpler looks for websites. Most websites are not works of art anyway. I also realised that websites that are truly serious about typography would host their fonts on the same domain: those are not blocked by the extensions (maybe I will change that setting too). All those using Google Fonts? Sorry, not going to bother. Most of the time, the improvements in appearance were obvious, sure, but not really game-changers. Or maybe it was actually a lot better with the external fonts, but I figured it didn’t really matter to me?

When I use Safari’s reader mode, or when I read an article via my RSS reader of choice, I don’t see web fonts. I might as well not see them when I visit the original site too. When I visit these sites without activating the reader mode, I certainly would like to see them as they were designed to be. But now, I think I like it even better. I don’t have to waste a few precious milliseconds loading an external font, and can see the site in its raw form.

I also enjoy how a few of those websites became kind of funny with their system fallback fonts. My favourites are websites where the title fonts become comically too big, or when unusual fonts make their appearance. For instance, I saw a site the other day displaying something like Apple Chancery in big letters, instead of what I imagine would be a fancy sans-serif font. I like that my font-blocking extension makes those sites look a bit silly, a bit naked.

The only real issue with this web browsing experience — which can easily be fine-tuned to let individual websites load their fonts — is for pictograms. An awkward design is manageable, but when symbols used in navigation and menus become dull squares, it becomes a problem. I didn’t know that many of the arrows, hamburger menus, and close buttons are actually part of fonts. By blocking web fonts, I make it very hard for the browser to display what is intended. When the website is well made, I get a word instead of the pictogram, but they often end up being displayed on top of each other, or without enough contrast with the background.

I also couldn’t figure out what is happening on Pika blogs, where the typography I end up with has this weird spacing between words. I noticed it on Barry Hess’s blog first, and then on Jason McFadden’s, realising it was not by choice and understanding it had to do with my font blocker. I don’t know why the text appears like that — I think it shouldn’t — but it does. When I manually remove the third-party font from the CSS using the inspector tool, the site uses Times New Roman and everything looks fine, but not when the extension does it.¹

Obviously, there is a message here for web designers: maybe have a look at your website without web fonts to make sure it doesn’t look too weird and too “out of brand.” At least define one good fallback system font, and make sure the fallback font weight and font size are as close as possible to the initial intent. Or don’t. It’s cool. Let it be weird. I actually quite like it.