With some of the “under the hood” work out of the way, I’m starting to roll out some visual design changes to The Hobby Blogger.
There was no way the default full-page format I’ve been using was going to work. Not only is it difficult to read, but I also need somewhere to put widgets (like email an subscription box), and maybe even some advertising.
So in this post, we’ll improve readability by tweaking fonts and font sizes of the post content, and we’ll also limit the width of the post content area by adding a sidebar.
Choosing a font
Despite what many say about the readability of serif (like New Times Roman) versus sans-serif (Arial, Helvetica) fonts, there really is no compelling evidence for using one font type over the other on your blog. I choose Arial because I like its clean look. I also feel that sans-serif fonts tend to be associated with technical and how-to sites, whereas serif fonts are more appropriate for news-related content.
Font size and line height
More important than the kind of font is it’s size. A recent guest-post on ProBlogger had some good references that said 16 pixels (px) is the best font size. The post also recommends that the space between each line should be 130-160% of the font size. This site now uses a 16px font size and a line height of 23px, about 144% of the font size.
Keep in mind that some fonts look bigger or smaller than one another at a given size. See how different New Times Roman and Arial look at 16px?
If lines of text are too long, the eyes have trouble moving from one line to the next. Lines that are too short, though, will tire the eyes out by making them jump back and forth too quickly.
The ProBlogger post suggests lines contain 45-75 characters, including spaces. I couldn’t even get close to that using The Hobby Blogger’s original full-width content layout, no matter how big my font was. So I went into Genesis’ Theme Settings to easily change to a Content-Sidebar layout.
Given my current Arial font at 16px, and my theme’s default content width of 630px, my lines have a max of 90 characters. I’m quite a bit over the 75-character limit, but I don’t want to make my font any bigger. I might have to play with changing the width of the content area to further reduce the number of characters in each line.
The WordPress editor has a format dropdown menu that allows you change the look of your headings to match their relative importance. The top-level “Heading 1” format is usually a large bold font that is much larger than the body text, while the lowest level “Heading 6” is the smallest and least prominent of the headings.
These headings are also known as H1 to H6 tags, and the actual formatting of these heading tags is controlled by your theme. The H1, H2, and H3 tags are the most relevant when search engines rank web pages.
Because my Genesis theme’s heading tags were quite large by default, I was using H3 and H4 tags for my headings and subheadings. When I realized the effect headings had on search engine results, I changed the font sizes for my headings and edited my posts to use H2 and H3 tags.
More readable and now more space
Sweet. Now THB is easier to read, which will hopefully encourage visitors to stick around and read more posts. And adding a side bar to constrain my content line width not only helped make my content more readable, but it also gave me a place to add elements like email subscription widgets and advertising banners.
How do you make your blog more readable? Share your ideas in the comments.