Post image for Tips for laying out text on a blog

Tips for laying out text on a blog

on September 20, 2011

Here’s some of my coverage of SocialDevCamp Chicago 2011, where I was reporting for Dice. For more coverage and job news, check out Dice News.

If you’re a blogger you probably think a lot about what you write.

But do you spend any time thinking about the stuff around your type? The space around your text. How much space you create between lines, letters, words, paragraphs, and bullet points communicates something to the reader about importance and order.

At SocialDevCamp in Chicago, I spoke with David Kadavy (@Kadavy) author of “Design for Hackers” in which he discusses the importance of white space, specifically with type.

“There are so many subtle things going on in what you’re communicating,” said Kadavy, “It’s an overlooked detail, those little bits of white space.”

There’s white space in everything: writing, design, oration, music, dance, comedy. The moves, pen strokes, and words are just as important as the dead space between them. They give those elements meaning.

Our brains intuitively connect the dots

According to the Gestalt effect, our holistic brains see things that are much more than the sum of its parts. Black blotches that don’t have connecting lines can form images that we can see.

Understanding that people’s brains work that way, you can manipulate more and have some really successful designs, even when you’re just working with type. There are a few different laws or principles behind gestalt theory that are important to understand as you’re writing and grouping text-based content.

  1. Similarity – If things look similar we see them as one unit together. For example, bullet points belong together.
  2. Proximity – if things are close together we think they’re connected in some way. A bullet list has proximity issues, but can be broken by spaces.
  3. Closure – We can connect things and close them together. For example, dotted lines that start to form a circle or square, even if it’s not completed, we mentally perceive that as a circle or square.

How do I start laying out the text on my blog?

If you’re not a designer, and don’t know where to begin, Kadavy suggests to concentrate on lining things up and creating geometric relationships. Next step is to look how tight your text is.

Here are a few basic rules of thumb, Kadavy offered up, when spacing out text.

(Note: An “em” is a unit of measurement that is defined as the width of the capital letter “M” in the given typeface.)

  • Body copy – 1.3 to 1.5em
  • Lists – 1.1 to 1.25em
  • Separating body copy  – .75 to 1em
  • Separating bullet points – .5 to .8em

We’re attracted to darker things, and the white space we create can make things lighter and darker, Kadavy explained.

If you group text together too much it becomes darker to the eye, therefore drawing more attention to it, which you may or may not want to do.

Photos courtesy of Robert Martinez. Photo at end of video courtesy of Tom Tran.

Previous post:

Next post: