Skip to content

Guest Post: Evie Kiels on Text Readability

April 2, 2012

Please welcome Evie Kiels to the blog! I’m so glad to have her here today, and I have to say, I like what she had to share. 😀

Hi there! Evie Kiels here. S.L. said, in a manner of speaking, that I could write about whateeeeever I wanted, so today, I’m writing about text readability!

*crickets*

This might be of interest to those of you who have blogs or who self-publish online writing.

*more crickets*

Oookay, moving right along.

What is Text Readability

When I say text readability, I mean how easy it is for your eye and brain to observe the little black squiggles (letters) on a screen and make sense of those observations. This blog post only addresses text readability for computer screens (as opposed to paper).

tl;wr (too long; won’t read)

If you don’t want to read anything I have to say, but want a nice body font in a nice size with nice line spacing, here are the specs:

Typeface: Georgia, or another serif web font (such as Times New Roman)
Font size for web: 16px (don’t be afraid to go larger)
Text Alignment: Left
Background Color: Solid White (or something very close)
Text Color: Black (or something very dark)

Musings on Pretty Text

There are a couple of different ways to view the aesthetic purpose of text. The first is as art. There are some gorgeous representation of letters and text, and the point is often to present something aesthetic pleasing that is meaningful through color, letter, and shape. Another purpose is to be part of the design as a whole. Designers can put a lot of time and effort to choosing the right font, tweaking the space between words and letters in order to get a blob that is the perfect shape to fit in the design they are creating. These are both valid layout considerations, but they don’t necessarily yield text that is easy to read. I want people to be able to read text, so that’s what I’m talking about today.

Standard Web Fonts

There are standard fonts that every operating system (and browser) supports and supports well. The most common of these fonts are: Verdana, Arial, Georgia, Times New Roman (follow this link for a full list).

My font of choice, for both blogging and e-books, is Georgia.

As the web is evolving, using “browser safe” fonts is becoming less of a concern. Google is doing some really neat things with web fonts, which I’ll discuss at the end. That said, still of concern, is readability! Verdana, Arial, Georgia, and Times New Roman are easy to read. These fonts have good readability on computer screens. If you use one of these fonts you can be confident that the text appears correctly and is ideal for screen reading.

Font (serfis vs sans serif)

Broadly speaking, there are two types of letters: letters with serifs and letters without serifs. As such there are serif fonts, and sans serif fonts. Serifs are little embellishments at the ends of some of the lines that make up letters. It is thought that serif fonts are easier to read because the serifs help to guide the eye to the next letter. In defense of sans-serif, the text often has a cleaner, more professional and authoritative look (think text books).

Serif vs Sans-serif

But we’re not interested in being text-book professional, we’re interested in being fiction book, people being willing to read 5,000 word blog posts or short stories professional. Serif fonts are good.

Note: Smart people have conducted studies as to whether or not serif fonts really are more readable than sans-serif fonts and… the results are inconclusive! Ack! Obviously, I think serifs make text easier to read. If you don’t, that’s cool. Use your sans-serif font with pride! For more information on serifs, check out wikipedia’s most excellent article on serifs.

Font Size

Use a font size that’s at least 16px. In dead paper media (books, news papers) fonts are rather smallish. Sometimes, way too small. This makes economic sense because less money will be spent on paper if less paper is used; less paper is used when letters are small and more of them fit on a page. Happily, we are working in pixels where we can use any font size and there are no monetary repercussions. Embrace this! Embrace the large letter!

Okay, so how big should letters on screen be? At minimum, the font size on a screen should be 13px (or 10pt or 0.8em). But why go minimum? Why put the burden on your reader to fiddle with magnification? Go comfortable!

My font size of choice for blogs is 16 to 20px. The size isn’t so big that it will visually compete with a larger (but not too large) heading, but it’s big enough that it can comfortably be read on a computer monitor atop a desk. For ebooks, my font size of choice is 12 to 14px depending on other settings (e.g. paper size).

Color

Use a dark colored font on a light colored background. Text doesn’t have to be black, it can be a very dark gray. Often this makes the overall design of a blog more pleasant by allowing the text to visually recede just the tiniest bit… in other words, it softens thing. Similarly, a background doesn’t have to be white, it can be a light cream/blue/green/yellow.

“But Evie!” you say, “White text on black background is so badass!” Yes, yes, very badass. Unfortunately, not that easy to read. What happens is the light colored text “glows”, and this causes eyestrain. I’m also going to put forth my own opinion that it’s not very professional.

There are times when you might want to have light text on black background for effect. For example, you’ve got a dark gritty hacker vampire fiction and you want the color to reinforce the feel of the story environment. Fine. Or maybe your brand as a blogger or author is to be edgy, dark, gritty, a shining beacon in the dark abyss. Well, that’s fine too. It’s okay to use color to reinforce that message, as long as you do it with intent.

Background Patterns

Backgrounds that have patterns, even subtle patterns, make text much more difficult to read. The background of text should always been a solid color.

It’s okay to have a patterned background on your blog as long as there’s another solid background behind your text (see http://tutsplus.com/ for an example of this. Note the pattern behind the headings–harder to read, right?).

Again: Don’t use a patterned background behind text. Consider this rule sacred.

Text Alignment

Left-Align your text. Text Alignment refers to how the lines of text orient themselves to one another. Left-alignment means that the lines all line up and form a straight line on the left. Center-alignment means all the text line up in the center, and right-aligned means all the lines line up on the right hand side. If you’re writing in English, use left alignment.

Text Alignment

The written English language is written and read left to right, top to bottom, and as such, left aligned text is easiest to read. Left aligned is good because it allows the eye to return to the same starting point on each line–in other words, the reader doesn’t have to search for the start of the line. With a centered or right aligned font, the reader has to search for the start of every line of text. (That’s not good.)

I’ll say again, if you’re writing in English, left-align the body content. Consider this rule sacred.

To Justify or Not to Justify

Justified text means that the ends of the text lines don’t have ragged edges.

Text Justification

Justified text tends to look more professional, and it can often be found in newspapers, books, text books, journal articles, etc… Unfortunately, it’s harder to read. The ragged edges of non-justified text help your eye keep its place on the page by using line width as a cue as to where you just read, and that cue is taken away in justified text.

The blog posts in S.L.’s blog are not justified. An example of justified text can be found in one of my free ebooks, Three of Swords (links to pdf).

So, to justify or not to justify? I leave that up to you. I don’t think that the gain in readability of non-justified text is greater than the gain in professional look in justified text. So, I decide on a case-by-case basis. If you want maximum text readability, go with non-justified text.

Line Width

In general, lines that are wide enough to display 10 words are good. Line width is a judgment call. If you think the line is too wide, it probably is.

Note: the line width feeling too wide or too narrow is determined by the size and amount of characters/words in a line, not the actual physical width of the line.

Headings

Headings follow different rules. They’re often short and less than a line wide, and therefore, it’s okay to get creative and funky here. Headings should appear visually distinct from body text. Ideally, larger. Perhaps in a different font.

Google Fonts!

For online fonts, this is seriously the coolest thing ever. Google is building a massive collection of fonts you can use online. If you have a wordpress blog there is a plugin called WP Google Fonts that makes this super easy. WP Tuts Plus has an excellent video tutorial on how to incorporate google fonts into your wordpress blog.

That’s it!

Wow! Thanks for reading to the end! I hope this slightly nerdy foray into typography has been useful for you. If you have any questions or just want to say “hey!” leave a comment or feel free to contact me via my website.

Just thought I’d chime in a minute with my thoughts, too. 😀

My preferance in ebooks for font is Minion Pro in 11pt. That’s what we use for ebooks and print books over at Storm Moon Press, and we prefer it. In order to make the readability easier, we space the lines a little more than the default of the program, which makes it easier on the eye. If we didn’t use Minion Pro, I’d probably have us use Georgia (it’s the font I write everything in on my word processor).

I am not a fan of ragged right in professional, published texts. I like justified text in books and ebooks. Ragged right is fine for informal things like blogs, but proper publishing should always use justified text. Whenever I buy a book and it’s in ragged right, I make a note that I probably won’t be buying books from that publisher again. It just looks sloppy and detracts from the reading experience for me.

For websites and blogs, I agree that it should be BLACK text on WHITE background. OMG, the number of sites I will NEVER visit again because of horrific crimes against the human eyeball. 😦 Text size, for me, on websites should be something larger than 12px, but because I can ultimately control the size of text my browser displays, I don’t worry about text size too much when it comes to websites.

Over all, though, I highly agree with Evie. 😀 Take heed and follow her gospel! Stop making our eyes ache with bad choices of color, font, size, and backgrounds. 😉

Thank you, Evie, for visiting! I loved the post!

Advertisements
3 Comments leave one →
  1. Carole-Ann permalink
    April 2, 2012 2:59 pm

    OMG – THANK YOU for this!! Having worked in the newspaper industry for 15 years, I know how important the font/size of the print is!!

    AND it’s SOoooo different between reading a newspaper, a book or an E-book (or even a blog)!!

    I follow a blog that has grey (yes, grey, NOT white) on a black background, and I find it so difficult to read!! I’m very happy with black on white, and even though it’s common/normal – you can’t beat it!!

    I usually use Verdana in my Word documents – so easy to read; or Times New Roman as a default – either are good!! But, thank you for an interesting and enlightening blog!!
    Hugs
    Carole-Ann

  2. April 3, 2012 1:13 pm

    Thanks Carole-Ann, so glad you liked it! 😀

  3. April 4, 2012 2:40 am

    Great article, Evie 🙂

    I prefer sans-serif over serif because it looks less… busy
    I mostly use either Arial or Verdana on the net, but most my writing programs have AvantGarde as default. It’s the a. I know it sounds petty and ridiculous, but that a is much easier to read for me. (though I try hard to remember to change that into Arial/Times New Roman when sending the files to someone else)

    I never use justified, because it drives me nuts to have viarable white space in between words. It ruins my reading experience.

    As for background: I have sensitive eyes, so white is good, but something off-white is better for me (especially at night). And I so agree on colour horrors. Black backgrounds with almost fluorescent colours are just not working. I can’t remember the name of the site, but there is an online gadget that turns every site you read into black on white (I only installed it on my laptop and keep forgetting to note the url)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

  • Categories

  • Nuts & Bolts

  • %d bloggers like this: