Essential Guide To Creating A Stunning Reading Experience

There are 3 aspects to creating a stunning reading experience for your blog that will give your content the presentation it deserves and your readers an experience they will love.

It’s one thing to create great content for your blog, it’s an entirely different thing to create a reading experience that keeps people coming back for more. Building a blog starts with great content, but if your readers are not given an enjoyable reading experience then you’re doing your content and your readers a disservice.

There are 3 factors that make up the reading experience on your blog. Typography, white space, and sizing. If all of these factors are working in harmony, your readers will love reading your content all the more. So let’s break it down bite-by-bite!

[This is part of the Blog Design Essentials Series. Check out the rest of the series here.]

Typography

Starting with the fonts you use, simplicity is key, but don’t be afraid to be unique. Your goal should be to have no more than 3 different fonts throughout your design. Each font should be assigned to one of three purposes. One font for Headlines, one font for Quotes, and one font for everything else.

1. Headline Font

This will be used ONLY for the headlines and sub-headings for you blog posts and pages. Find a font that is bold, easy to read, and eye-catching.

I actually use an all caps version of my paragraph font, Helvetica Neue. Which brings me to my next point…

2. Paragraph Font

Since your paragraph font will be the dominant font on your site, this is the most important of them all. Take careful consideration in choosing which font will be the dominant typeface throughout your blog.

If you were around for my new design unveiling then you saw how I totally botched this one! Live and learn– then teach what you learned so others can avoid the same mistakes!

The safest way to go is to select something that is commonly used– a web standard font. These include:

Serif fonts

• Georgia
• Palatino Linotype / Book Antiqua
• Times New Roman

Sans-serif fonts

• Arial
• Helvetica
• Comic Sans MS
• Impact / Charcoal
• Lucida Sans Unicode / Lucida Grande
• Tahoma / Geneva
• Trebuchet MS
• Verdana

Monospace fonts

• Courier
• Lucida Console / Monaco

Whichever one you choose, the goal is optimum readability. Since people will spend the majority of their time reading this font, it should be the easiest to read of all your fonts.

After my little font mishap, I decided to go with the designer favorite, Helvetica. However, I added a little spice to it by using a lesser known trick that calls out an even prettier Helvetica, Helvetica Neue. Most computers will render this prettier version, however some will instead revert to standard Helvetica.

3. Quote Font

I also like to incorporate a different font for quotes. I just think it helps make them stand out from the rest of the text, giving the reader a visual distinction between your words, and the words of someone you are quoting.

Personally, since I use a sans-serif font for everything else, I’ve decided that any quotes would use a serif font. My serif font of choice is Georgia. Not just because there is a song written after it, I simply just love the way it reads!

Finding the right font

If you’re not satisfied with the standard web safe fonts, I suggest using Google Web Fonts (like you see I have). There is a huge selection of great fonts and once you pick them out, there is instructions on how to implement them.

Use caution though, because not all of the fonts are cross-browser or cross-OS compatible (learned that the hard way). Be sure you test them on all browsers and both Windows and Mac machines.

White space

One of the biggest mistakes I see in web design is a lack of white space. Some people feel the need to fill the screen with as much as humanly possible or else their readers will miss something. This is a mistake. White space is breathing room for the eyes. It’s a key part of giving your readers a stunning reading experience.

This fits right in to my simplicity philosophy, which I hope to share soon. Until then, I’ll just say that the less crowded your content is, the more your readers will be able to focus on it. Give plenty of breathing room.

For example, I’ve given 40 pixels of space on the left and right of paragraph text. I’ve also allowed for that same amount before and after paragraphs. Plenty of breathing room.

Take a deep breath. Doesn’t that feel good?

Sizing

The last piece is to decide on font sizes and line spacing. Did you know that there is actually a such thing as ‘Optimal Characters Per Line‘? Well there is! Various studies have shown that the optimal characters per line is between 50 to 75.

To articulate this concept further, the Baymard Institute says it this way:

Too long – if a line of text is too long the visitor’s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text.

Too short – if a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress people, making them begin on the next line before finishing the current one (hence skipping potentially important words).

A post by Mikey Anderson really convinced me of this. If you don’t know who he is, he’s the guy responsible for the beautiful design of theResurgence.com and PastorMark.tv as well as many others. He’s a truly brilliant web designer and I hope to be half as cool as him some day. You can read his thoughts on optimal characters per line here.

To help you find the optimum characters per line, I’ve discovered this gem of a web app developed by Chris Pearson. He calls it the “Golden Ratio Calculator“. It is an essential tool in finding your perfect font size and line spacing.

With my font and white space determined, the calculator showed me that the optimum font size for me (since I wanted to hit 70 characters per line) was a size 18 font with 1.5em (or 27pixels) for line spacing.

If you incorporate all of these principles, you will undoubtedly have created a stunning reading experience that people will always return to. If you have any questions on implementation, you can ask via the comments below, or drop me a line using my contact page! I’m happy to help!

Where have you seen these principles executed or not executed well? You can leave a comment by clicking here.