create a stunning reading experience
1K SHARES

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 your blog posts and pages. Find a font that is bold, easy to read, and eye-catching.

The font I use throughout my site is called Lato and in the headlines you’ll notice it is the most bold version of the font.

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 2013 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.

As earlier stated though, my current design now uses Lato font throughout the site.

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.

Historically I’ve used a sans-serif font for all paragraph and headline text and for any quotes I would use a serif font. My go-to serif font of choice is usually 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 whitespace. 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. Whitespace is breathing room for the eyes. It’s a key part of giving your readers a stunning reading experience.

white-space

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 lots of space on the left and right of paragraph text. I’ve also allowed for a good 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.

golden-ratio-calculator

With my font and white space determined, the calculator showed me that the optimum font size for me (since I wanted to hit 65-70 characters per line) was a size 22 font with 1.5em (or 33 pixels) 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.

1K SHARES

Get On The Insider List

Get exclusive content via email, gain instant access to a growing library of downloadable resources, and first priority for the latest happenings!

Comments

  1. Ben Boykin says

    Oh man – this is all good stuff and even better to see it applied in design. One other little tidbit that I might add would be to consider the line-height used in order to provide a little breathing room above and below each line. In addition to everything you have referenced this is one of those things that with just enough tweaking can make all the difference in leading to an absolute stunning reading experience. If someone reads this comment and is scratching their head as to what ‘line-height’ means – just go look at the spacing that Dustin allocates above and below each line of text. Excellent example right there!

    Two thumbs up Dustin on your thoughts here!!

  2. says

    This was really helpful, I’m working on setting up my blog using bluehost and I’ll definitely refer back to this post! Thank you

  3. says

    Hi Dustin,

    these are some awesome tips, thanks a lot.
    I will check the Golden Ratio Calculator and play around with its values on my blog to see if I come up with something nice and pleasant looking.

    Cheers
    Torsten

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>