Notice: This entry was published 4 years ago and may no longer reflect my views today.
Something I’m seeing more and more lately is illegible text on blogs. I know skinny fonts are in vogue nowadays, but when developing or customizing your themes, please keep in mind that different machines (even different browsers on the same machine) render fonts differently. Windows in general tend to render fonts thinner than other counterparts, so what might look good on a Mac could be completely unreadable on Windows. Here’s a helpful article on font rendering by Smashing Magazine: A Closer Look at Font Rendering.
Text legibility is a basic accessibility point that some bloggers are already failing because they might not be aware of this issue. If you don’t encounter varying machines much, it’s easy to overlook cross-compatibility. But not everyone has the same computer or browser as you, and you could be alienating a good chunk of your visitors by not considering their experience on your site.
I’ve taken a few screenshots on Windows to illustrate my point. These are just paragraphs from Google Fonts that I altered with the Chrome inspector. All samples below have a font size of 14px, a line height of 150%, and a font weight of 300.
None of them look particularly good. One might argue that they’re not that bad, but imagine an entire blog with this kind of typography. You won’t enjoy reading it for long. In my own experience, my eyes get very strained and I have to leave.
How do you address this? The simplest answer is to increase the font weight.
With the same font size and line height, you can see that the screenshot on the right is much more legible than the one on the left. It will look thicker on a Mac, but part of web design is considering other systems and sacrificing certain design elements to optimize the browsing experience for everyone. Welcome to theme development 101!
Another simple solution is to increase the font size.
Keeping the font’s weight to 300 but making it larger increases legibility. The copy is still quite thin but much easier to read.
And hey, why not both?
Mmm easy to read text.
“But Raisa, my blog looks good to me. I don’t wanna change anything,” you might say. And that’s totally your design decision, but please consider your visitors if your goal is to grow your blog. There’s that old adage that content is king, so it could be argued that you should’t get too caught up on design. However, you can’t relay that content efficiently if it’s hard to read, and retaining visitors is important for blog growth. If anything, do it for us with terrible eyesight. ʘ‿ʘ
So take a look at your blog’s typography today, and make some changes if you must. Happy blogging!