There are three aspects to creating a reading experience on your blog that your readers will love. That’s it, three.
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!
[optin-monster-shortcode id=”dmmnavdaetatlpcmllnt”]
This is part of the Blog Design Essentials series. Be sure to catch the rest of the posts in this series to take your blog design to the next level!
Also, be sure you sign up for my Insiders list below to get the latest resources and advice for making this stuff easier for you.
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.
Pro Tip: Never use more than 3 different fonts in your blog design.Click To Tweet1. 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 Open Sans and I use it for both headlines and paragraph font (which I’ll talk about next). Although they are the same font, you’ll notice that the headlines are always either bolder or darker making them feel more important. This is the first part of establishing a visual heirarchy.
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 Open Sans 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!
Currently the font I use for quotes is called Playfair Display and seems to work beautifully.
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.Click To Tweet
This fits right into 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.
Pro Tip: Make sure your lines of text are no more than 75 characters per line. So about half the length of a tweet.Click To TweetTo 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, I decided that the optimum size for me was a size 24 font with 34px for line-height for good line rhythm.
If you incorporate all of these principles, you will undoubtedly have created a stunning reading experience that people will always return to.
If you want a dead-simple and super fast way to give your blog a stunning makeover, I recommend starting with a theme fromStudio Press [aff link]. Their themes are what I use to build all my web properties.
Where have you seen these principles executed or not executed well? You can leave a comment by clicking here.
Superbly executed! Very helpful!
Thank you for your insight.
You’re very welcome!
Hi Dustin,
It’s not often I come across a Blog post that is so beautifully crafted and full of valuable information.
What I especially loved is your simple, (jargon free) style of explaining how to choose the appropriate font family, font size, line spacing and white space in a blog post, such that the combination, delivers a stunning experience to a reader.
Important blog post creation information, delivered simply. To the point and so beautifully laid out (i.e. easy on the eye).
Great job. Thank you for posting this.
There is however one little issue I’d like to bring up. Although you and I may have differing opinions (I’d love to hear your take though).
Serif fonts look great in printed material, newspapers, magazines and so on.
Display devices, especially low resolution (tablets and mobile phones for instance) not so good.
Yet you’ve offered a few Serif font family names for use on display devices, why?
Have a great weekend Dustin. You’ve definitely got a fan in me.
Warmly,
Ivan Bayross
Hi Ivan! Thanks for the compliments– much appreciated.
Regarding your point, I think it’s a fair point. However, with the current state of screen resolutions, I don’t believe this is an issue. Serif fonts render beautifully on retina (or higher) displays and this is the way technology is moving, very quickly. Even on lower (72dpi) devices, the serif fonts aren’t too bad.
Hi Dustin,
Wow! thanks for replying. Well I completely agree that when Sans Serif fonts are viewed on an iPhone (or any Apple device) with Retina level (or higher) resolution they do look very nice.
In my neck of the woods the number of iPhone users is about 13% the rest are on smartphones running Android or some flavor of Android. In this area of the world the iPhone and Apple devices (which are excellent) are prohibitively priced.
Hence, maybe there is one more attribute that one needs to watch when choosing the best font family to render content across multiple display devices. What display devices are in use by your target market.
That said, Open Sans, is a beautiful, crisp, clear, font that renders well across all display devices. If you check the font on any page on Google’s site it should come up as Open Sans.
Have a great week end. Take a break, make a cup of fragrant coffee, sit on the porch swing for a while and let the world drift by.
Warmly,
Ivan Bayross
What an excellent article. As a wordpress designer, I’m always looking for ways to improve my client’s sites and the information about characters per line is new to me, but man… it makes such good sense. Thank you for sharing. I’m definitely looking forward to reading more from this series!
Glad to hear it Mony! 😀
Thanks Dustin for sharing your wealth of information and experience. I am very keen on your design tips and looking into fonts at the moment. I agree its making a very different impact when you put some effort into creating the right look and not just thinking about content.
Glad you liked it Doris! Let me know if you need a hand or have any questions. 😀
This article is spot on when talking about readability of your blog posts. It doesn’t matter how good the content is, if the visitor cannot read it, then its worthless.
I agree again with you only only using 3 fonts on your site. This go to the readability of the site as well, and gives it a much cleaner look.
I personally use Google Fonts on all my sites. They have over 700 plus font families to choose from and they are free. I even go one step further and install the Google Fonts plugin on my sites, as this makes it so easy to pick what fonts I want for which headlines.
As you mentioned, whitespace is also important to the readers experience. I certainly use a lot on my site as well. Again this helps with the readability of the post.
Keep rockin on Dustin.
Thanks a lot Rob! I typically try to stick with Google Web Fonts also. Though I avoid the plugin and just use the @import method or add it into the header manually. Any time I can avoid a plugin, I do. Mo plugins, mo problems. lol
Great tips. I just found them in time before starting my site redesign. Thanks
Awesome Sacha! Glad you found it! 😀
Great information for someone new to blogging. Glad to have my own view on “white space” validated. Cluttered blogs make me nervous, and I flee. LOL!
Haha! I’m the same way Teri!
Wow! I see you walk your talk.
One word: Thanks.
You’re welcome Dr. ‘Malik!
I am a relatively new blogger and this advice could be very influential into what I do in the future with my site. I will continue to fine tune my page using these tips.
Awesome Matt! Be sure to check out the rest of this Blog Design Essentials series.
Am a beginner, trying to even get a comfortable idea to blog on is a challenge but I hope by the time I get through the ‘blog design essentials I will have a good idea.
It’s come just at the right time,
Thanks.
So good to hear Catherine! If you have any questions, don’t hesitate to drop me a line. 😀
Love this! Thank you for the tips and tricks!
Thank you for all your information! I am new to the blogging world and need all the help I can get. ; )
My pleasure Brooke! What’s been your greatest challenge in blogging so far?
Excellent tips Dustin!
The calculator was so helpful and am off to change my fonts now!!
Awesome Malhar! Let me know what size you decide on!
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
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
Awesome Steph! You’ll probably want to check out the entire series– Blog Design Essentials.
Great post Dustin. I always look forward to these and learn so much form your ideas. Thanks.
Thank you Mark-John!
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!!
Thanks Ben! I’m, above all else, obsessed with readability.
Any chance of a follow up post on how to change fonts and sizing for those of us that missed the hangout?
I will get to it– just been swamped after the Resurgence Conference.
This is so great!
This was really good, but I honestly do not even know how to change the font…haha?
I’ll be writing a follow up post soon on how to implement the use of different fonts.
Sounds like a good follow on!
That follow up post just turned into a follow up event. 😀
wait a second…did you suggest using comic sans MS for web design :O
Haha! Not a chance! I should have wrote,
*Note: Never, under any circumstances, use Comic Sans. If you do, a unicorn will die.