Typography Tuesday: Let it Breathe

Samantha Warren, ON THE TOPIC OF Tips and Tricks

Jul22 8

White space (or negative space) used with typography enhances its legibility and makes it more inviting for the user to interact with it, so why not use more? A common mistake for many designers and developers is to fill the page with as much stuff as they can. If you walked into a room and everyone was talking at the same time, wouldn't it be difficult to pick who you wanted to talk to first? Less is more. The cleaner your body copy, the better it will make it for users to comprehend what they are reading.

Crowded vs. Breathing Room

Tips On Creating Websites With "Typography That Breathes:"

Add some padding around your columns. Usually have 10 pixels of padding? Why not make it 20, or even 30? Experiment.

Keep that line length (measure) at an optimal length. 45-75 characters is proven to be a nice digestible line length for columns.

Add some line-height to that text. A good rule of thumb is the line height should be 20 percent of the font size (10pt font= 12pt leading)

Always increase line-height when you increase the line length, and especially when you are using light text on a dark background.

Some Sites That Use White Space Well:

IA Japan

DFCKR

Mark Boulton Design

Check out this fantastic article on A List Apart for more on white space.

Rexibit Web Services said on 07/23 at 09:06 AM

Very nice article. You make some great points on whitespace. It is something that most designers forget. I saw a website last night that had an 8pt font size on a black background all jumbled up. It made me cringe.

Alex Giron said on 07/23 at 09:50 AM

Great points. Adding enough padding around columns is something I’ve been advocating for a long time, many forget to do so or don’t pay much attention to it. But it makes a huge impact on typography. I always keep at least 20px padding around columns, it has become almost a rule when I design.

Kev Wood said on 07/24 at 07:05 AM

nice. I like the points made about the white space. I am new in the industry as i have only left university i year ago, all the tips i can get are a great help.

jessabean said on 07/24 at 11:22 AM

White space is your friend! Thank you for the tips. I am a fan of increasing line-height to let type breathe.

lo said on 07/24 at 01:54 PM

Come on…
http://www.geocities.com/laurencruise/whitespace.jpg

Kev. said on 07/29 at 11:54 PM

Must, say I liked the article a lot. I will have to experiment with line height on my site.

Leon P said on 09/04 at 02:19 AM

Isn’t the default browser setting for line-height already 120%? Generally, it should be increased to a minimum of 140%, more for smaller font sizes. For example, <abbr title="A List Apart">ALA</abbr> uses 180% for its paragraphs, which are 11.5px verdana.

ifihadapenny said on 11/11 at 04:37 PM

Whatever happened to Typography Tuesday? Bring it back!

Next entry: Getting Rid of Jaggies on Your Photo Borders

Previous entry: Getting Moody: A Look at Inspiration and Style in Early Design Techniques

Viget Inspire