Notice: This entry was published 5 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.

roboto-300

Roboto

source-sans-pro-300

Source Sans Pro

open-sans-300

Open Sans

lato-300

Lato

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.

source-sans-pro-300 source sans pro 400

Source Sans Pro, font weight 300 vs 400

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.

source-sans-pro-300 source sans pro 18px

Source Sans Pro, font size 14px vs 18px

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?

source-sans-pro-300 source sans pro 400 18px

Source Sans Pro, 14px and 300 vs 18px and 400

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!

Comments

  1. YES TO THIS. If I can’t read a website, I’m not going to read it or spend my time squinting and doing other stuff to read it. Just, NO. I don’t have time to do all that. I know we all have our preferences, but legibility is not a preference for me. If I can’t read it, then I’m leaving and going to a website where I can read. Along with the font weight/size, I also consider the line-height. I cannot read something when the texts/sentences are all bunched up together. I need spacing to help me read. And then I also consider paragraph breaks. If I’m reading on my Paperwhite or in a book, I can read things that have no space between paragraphs. But on a website? Especially fanfics? Nope. Cannot do it.
    Tara recently posted…My Favourite Things: February 2015My Profile

    1. I like to think that people don’t do this intentionally. It’s not something that you think of right away. Easy to assume that if it works on your browser, it must work for everyone. 8D

      But yeah, I hope this post helps someone!

  2. You’ve said a mouthful, and I do agree to this! Sometimes, I’m unaware that my website isn’t compatible with others, until someone tells me. I do my best to make my website compatible with other browsers and such. I honestly like the skinny texts, but I do agree that sometimes it’s a bit hard to read on someone’s blog. Especially, when the person using a light color font as the main blogging text. That right there irks me. It’s hard to read as is, but to add a lighter color to it? Oh no.

    Since college started again, I’ve been lacking in the html/php department. When I was in my first semester and I wanted to change my layout, I almost forgot how to code! I still make an effort to at least code a little here and there, so that it won’t happen again.
    Jamie recently posted…My Favorite Things – FebruaryMy Profile

    1. For sure! Lower contrast text doesn’t help the case at all. For the record, your blog looks just fine on Windows. :) Not every font is problematic, just some. But it’s always better to be on the safe side.

      That’s completely understandable! I stopped coding for a while in college, so I was out of the loop too for a bit. It’s overwhelming trying to catch up nowadays, but I’m sure you’ll get there. :D

  3. This is sometimes really hard to consider, if you aren’t naturally a techy person. I know my title font does something weird to the letter “T” on my work computer, but everything else is perfectly legible. It’s really odd and I’m not entire sure what the problem is. Good advice.
    Brittany Pines recently posted…What Do Celebrities Owe Us, and Why?My Profile

  4. Back then, I found typography and font to be the least of my worries, but now I do realize that even text plays a huge part in making your design aesthetically pleasing.

    I’m going to keep going back to this entry for reference! Thanks for the tips.

    1. I feel like it was simpler back then when you only had web-safe fonts to choose from. Of course, I like having more options now, but it also means more things to consider.

      I’m glad you like this post bb! <3

  5. The thing I like about Mac is that it makes many fonts look more readable despite of it looking so thin on Windows. I’ve seen so many nice fonts on Google, but the only problem was that the weight was too thin so I just avoided them. But it’s good to know now that increasing the font weight actually help, yaaaay! One thing I’m glad about in today’s web designing is that people STOPPED using 6px fonts or something small as their main body text or any contrasting colors (black background, white font) that is an eye killer. Typography is important, because if it’s so hard to deal with, people won’t even bother!

    1. My desktop monitor is on the large side (1920 x 1080) so your blog looks a but small to me at this resolution, but otherwise it’s readable. :D

  6. Good post! I’m a Mac user and work with fonts a lot, but I personally despise too tiny fonts and too light font colours myself. I use embedded fonts, and rather light font weight because I like it that way, but when I check them with Browser stack they, in my opinion, look good on Windows (apart from IE8 that can’t display anything correctly so I’ve stopped caring about it).
    I think the main problem on blogs is usually that the font size is too small or too light in colour, not that it’s too skinny.
    Susanne recently posted…Irish music sessionsMy Profile

    1. Haha with IE8, so long as you can read the site, I’m good. Everyone please use Chrome! DX

      It probably boils down to opinion, but for me, skinny fonts render so terribly on Windows. It’s not worth it. :(

  7. thank you for this post. bless this post. also, probably do a post filled with recommended fonts for blogs! I’m always so annoyed when I stumble upon a blog with ridiculous fonts for titles and body text – ugh, don’t even mention those who use crazy script fonts that don’t fit the atmosphere. sigh.

    I personally like thin fonts, like the Roboto Thin for example but using it for body text, I don’t think it’s a good plan. I’m not a font expert and honestly, I never read that article from smashing magazine but I always think 400 is the best default weight for body text, especially if it’s something like roboto or lato. do people even use helvetica neue? it’s such a hyped font and i know my teacher loves it so so much he always suggest it for anything – UI, magazine, etc. (given that he’s also an Apple freak pfft)

    Luckily, whenever I view my blog on my macbook and my desktop, they never face this kind of trouble haha.
    Alice recently posted…Green Robot, Clean SlateMy Profile

    1. Hmm, I wouldn’t know what to recommend besides what’s already on Google Fonts! XD There are some nice fonts that I like from Font Squirrel and Fontspace, but those take extra steps to implement. I shall think about it. :)

      Helvetica Neue is what Apple uses on iOS and on Macbooks, and I see plenty of sites using it too. It’s a very pretty font to me, but only when I’m using my Macbook Air. XD It’s not native on my Win7 so I think it uses a fallback font.

      1. everyone likes the simplicity of using google font, no doubt about that. i always recommend google font to my friends too when we did a web design project……

        …where everyone asked me for help /(-__-)\

        yea, i think helvetica neue is mostly used on UI. correct me if i’m wrong. i like how the neue looks on mac though but for windows os community, it’s not a hyped thing and you need to download it manually as an extra.

        ah! you’re running win7? i thought you’re using win8! :))

  8. I loved this read. I’m a Mac user, and I find that depending on what browser I use on my Macbook, it automatically adjusts to make a page more legible. However, when I make any updates to my blog’s look and feel I try to make an effort to see what it looks like on multiple devices just to make. I think typography is important, and even more, the reader experience like you said is twice as important! Anyways, sorry to run on and on, but I’ve just found your blog and I might be here for a while to read some of your older entries. :)
    Shayne recently posted…Thanks ♥My Profile

    1. Ahaha, I hope you enjoyed my entries! XD

      There’s definitely a balance you have to consider when catering to your audience while still accomplishing your design vision. It’s a topic that pops up every now and then with designers coming up with great mockups only to be limited by browsers guidelines, unreasonable file sizes, etc.

  9. Very good point! I know I get my layouts created for me, but I still like to mess around with font size so it’s perfectly legible for not only me but others too. I have bad eyes..so I wear glasses but it still helps to have a good font and such.
    Michelle recently posted…Some Days OpenMy Profile

Comments on this entry are now closed. Send me an email or a tweet me at @sweetraiscake if you'd like to keep the discussion going. I love mentions!