Designing with White Space: Tips for Laying Out Text on your Blog

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, for example. How much space you create between lines, letters, words, paragraphs and bullet points — all of these things communicate something to your readers about importance and order.

At SocialDevCamp in Chicago, I spoke with David Kadavy (@Kadavy) author of Design for Hackers, a book 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 and 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 see.

Understanding that the brain work this way, you can manipulate more and have some really successful designs, even when you’re just working with type. There are a few different principles behind this 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. For example, bullet points belong together.
  2. Proximity – If things are close together, we think they’re connected. 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 not completed, we mentally complete the image.

Where to Begin

If you’re not a designer, Kadavy suggests concentrating on lining things up and creating geometric relationships. The next step is to look at how tight your text is. Here are a few basic rules of thumb:

(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.5 em
  • Lists – 1.1 to 1.25 em
  • Separating body copy  – .75 to 1 em
  • Separating bullet points – .5 to .8 em

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.

Post a Comment

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>