02.19.12

Blog Design 101

I’ve always secretly wanted to be a better designer. Last year, I resolved to focus on that goal by designing my own blog. I read as much as I could on the subject (I highly recommend Design for Hackers as a place to get started) and obsessively inspected the CSS of websites I admired. Once I was ready to start designing the blog, I posted my early iterations on Forrst, where you can see my progress and all of the specific feedback that helped me learn to design. This post shares what I’ve learned in the last few months and condenses the material to a few key tips. Hopefully this will be a good starting point for anyone interested in using a blog as a first design project.

1. Figure out your primary objective

Before starting to design, think about what your objective is. Are you trying to acquire more Twitter followers in your field? Or build SEO for an affiliate marketing based business? Or create an online portfolio/resume to market yourself to clients/employers? Who is your audience? These questions will drive your typography, colors and other design choices. Keep your audience and objective at the front of your mind, and optimize for them.

My primary objective with my blog is to increase my Twitter following to boost my ego improve my marketing reach for current and future products. So I link to my profile liberally in my content, have a link in the footer, and a call to action at the end of every article. The call to action uses a background color (light green) that contrasts with the page background and a complementary color (orange) for the link, which draws your eye to it. Every page should have a call to action that fits with the objective of the page.

2. Optimize your body typography for readability

Pick a font and font size that are highly readable and cross platform. Helvetica Neue/Helvetica/Arial, Lucida Grande/Segoe UI/Tahoma, and Georgia are all pretty good font combinations to start with for your body copy - they’re very easy to read and one of the fonts in each set will be installed on most machines. Make sure to specify fallback fonts and a font type (i.e sans-serif) - if you just say font-family: Helvetica, things might look great on your Mac, but toss it up on Linux or Windows and you’re looking at Times New Roman. Gross.

Keep your font-size large. Just because Facebook uses an 11px font for body copy doesn’t mean you should. A blog post is a lot longer than a Facebook status, and most people will strain to read small font sizes for a long period of time. I recommend 14-16px. If you don’t believe me and think you can get away with 13px, read this great Smashing Magazine article: "16 Pixels for Body Copy. Anything Less is a Costly Mistake."

If you want to experiment with fonts beyond the ones I’ve mentioned, check out TypeKit or Google Web Fonts (I use TypeKit). If you don’t know a lot about typography, stick with this as your default:

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
}

3. Don’t screw up leading and measure

These are just fancy typography words for line-height and width. You might be able to pass yourself off as a fancy designer if you start to work these words into your everyday speech, but more importantly, if you understand how to apply them properly, I’ll be able to read your blog post without hurting my eyes or fixing your CSS for you in Chrome Dev Tools.

Leading (pronounced like the toxic element, set with line-height in CSS) should generally be set to 1.4-1.5 for body copy and 1.2-1.5 for headers. One of the most commonly (and tragically) ignored typography rules on the web today is the universal guideline for choosing a comfortable measure: 45-75 characters per line, with an ideal length of 66. You can set this in CSS by setting your column width to 33em, or play around with the width in pixels and check a few of your content lines on lettercount.com to see where you stack up.

If you set leading too small or measure too big, your eyes and brain have to do extra work when they get to the end of the line to find the beginning of the next line. Obeying the guidelines above will ensure a smoother, less effortful read for your audience. If you remember anything from this article, please remember to keep your measure under 75 characters. I will be happier when I read your blog.

4. Use headers to establish a hierarchy

If you blur the page so the text is unreadable, you should still be able to see the basic hierarchy of the page. If not, your headers need some work. Headers should generally contrast the body on font, size, weight, and color and be separated well with whitespace. For this blog, notice how the headers are a different font (Myriad Pro), bold, and brighter. Also notice that the <h2> margin is offset more above than below to make it more clearly associated with the section below. The header heights were calculated by multiplying the body font size (16px) by 1.33 repeatedly (21px and 28px), which establishes a sense of scale. Practically, all of these changes help a reader who is skimming the article easily get the gist of the content and decide if they want to read further.

A common design pattern that this blog mostly follows is to establish vertical rhythm with a baseline. This means that if you drew lines at 24px intervals throughout the website, the text would stay within the bounds of those lines at even intervals. Everything below the title of the blog post has a line-height of 24px and a top and bottom margin that adds up to 24px. The details of baselines are discussed more in depth at A List Apart and 24 Ways.

For usability, there are two key principles to link styling: (1) the user should know that an element is clickable without having to think, and (2) the user should receive feedback when they mouse over a link that it is clickable. Blue text and underlining are the two universally understood indicators of links. You should use at least one of these. As a corollary, you should never, ever, under any circumstances use underlining or a blue highlight color on anything that’s not a link. Unless you’re using a typewriter, book titles and emphasized text are set with italics, not underline.

I personally prefer setting border-bottom: 1px on links to underlining (it’s a bit more subtle), and you can also play around with dotted and dashed border styles. If you want to use the same or a very similar color to the body copy, besides underlining the text, you should use a bolder font weight to make the link stand out.

On hover, use one of the following effects:

  • Change the color. A CSS3 transition lasting 0.2s is a nice touch here.
  • Change the underline style. Underline it if it wasn’t already or change the border style or width.
  • Change the background color. This can be used in conjunction with changing the color.

6. Use a grid to visually align page elements

Elements on the page should be aligned with a grid. Set a few column widths, and make sure that the text, images, and boxes all touch the same set of imaginary lines. On this blog, notice that the right edge of the date lines up with the right edge of my profile image, while the left edge of the header text, body copy, and call to action text all align along the left edge.

Further reading

This article only touches the simplest and most important aspects of design. By following these simple rules, you’ll be well on your way to a good looking blog design. If you want to learn design in greater depth, the following resources have been the most helpful for me:

Technical Note

This blog is written in Jekyll, a static HTML generating tool that allows you to write your blog posts as version controlled files with Markdown. My code is hosted open source on GitHub, and I host the site with GitHub Pages. I highly recommend this approach for anyone technical minded designing their own blog - if you’re designing from scratch, you don’t need themes, and this way you don’t have to wrestle with learning a theming engine and editing your posts in one of the many terrible WYSYWIG editors providing by the popular blogging services. I also recommend using Disqus for beautiful, simple blog comments.

If you read this far, you should probably follow me on Twitter.

blog comments powered by Disqus