The Serif Test - Is Your Website Fundamentally Broken?

Yes, I am using serif fonts on an LCD. Try it for a week sometime. You might experience something interesting!

I've decided to give serif fonts, specifically Liberation Serif and Source Serif Pro, another try on LCD screens. I don't know what it is but for some odd reason I find it easier to read and the serifs don't really look like "noise" to me. It could be because I use 16px font size. In any case, I just like to force websites to use the fonts of my choice. Websites were initially supposed to be hyper-text documents. Today they're supposed to be interactive hyper-text documents. This is fine, except for when they become totally useless when I change something so simple as a font. All these websites claim to be "responsive"...I disagree. If your website is rendered like it got rained on...and becomes unusable...just because I forced a font of my choice on it. Something needs to be fixed.

The sites that are noticeably affected are ones that assume fonts have certain symbols, that a certain font will be loaded, or even have certain geometries! Here are a sample of a few.

The most notable annoyances are the Digital Ocean graphs and the Cloud 9 memory and CPU meters. You can't use either. At least I can hover over links to see where they lead to, even if their symbol is messed up.

This can be a really easy or really annoying issue to deal with for designers (not that I am one, just another software developer wearing the designer hat).

Blah blah we all know the rest.

A lot of websites use pixels as their choice of measurement for fonts. If you're using pixels, stop. They are an "absolute" measure that doesn't respond well to change. The same goes for all your elements. If any of your CSS contains "px" you need to go back and change it to something more suitable - sometimes that means percents (%), small-m (em), or even root-small-m (rem, not supported by IE8-...but who cares when you're developing for a futuristic interactive web application). The website will respond to change more easily.

The truth is though, after I looked around purposely at websites that could have issues, I was impressed to find hardly any. Some worked flawlessly. A lot had one tiny issue where their "X" buttons were no longer X's. The small stuff can add up though and breaks the aesthetics of the websites I visit, unfortunately.


Popular Posts