Breathe while you read

7 October 2009 · 4 comments

Space lines of text out well if you want people to read what you’ve written.

 

Dense text.

Dense text.

Virginia DeBolt has written what is possibly the single most important tip for making websites readable — after good writing and an appropriate font, of course — and that’s line-height:

The CSS line-height property determines the distance or spacing between the lines of text on the page. In the print world, this property is called leading. …

Generally, you don’t want the lines to be too close together or too far apart. You want enough space between the lines to create maximum readability, or the appearance of ease of reading. You want an open and inviting look rather than a “dense” look, which discourages reading.

[Via : Web Teacher — Improve readability with line-height.]

Open text.

Open text.

She shows some examples, and explains how to do line-height properly.

I must say, line-height is probably the thing that most affects me on websites. Dense text is highly likely to drive me away from even a well-written and well-presented site.

Dense text is tight and pressured and hard to read. Open text is relaxed and easy. It gives you room to ‘breathe’ while you read.

The only thing to watch out for is adding so much line-height that you can’t stay on track, but Virginia covers that too.

If you haven’t considered line-height before nip over to the tutorial and store the technique away in your coding toolbox.

4 comments

These Posts may interest you too:

  1. Save your eyes with Readability If you find yourself squinting at tiny text on a web page, try the Readability bookmarklet. ...
  2. Read today and gone tomorrow Reading comes easily to some of us. Some of us can not only comprehend the text we see, but we can see it in the first place. There are thousands,...
  3. Add line space in Gmail messages with a stylesheet in Mailplane I like more line spacing than Gmail gives me. Using a CSS file with Mailplane has solved my problem. ...
  4. People Refuse to Read Web Pages Rachel McAlpine’s latest newsletter on Writing for the Web appeared this week. QWiC: Quality Web Content, Issue #93, 26 May 2003 was particulary interesting. Even when the technology is perfect,...
  5. Control the Mac Command Line An ebook that explains the command line and Terminal for Mac users. Hooray! ...

Tell us what you think.
Note: there may be a delay before your comment appears. I now approve all comments from new visitors, in an attempt to keep spam at bay.

{ 3 comments… read them below or add one }

Pat Rosier 18 October 2009 at 15:58 42

I was thinking that the look of my blog was not reader-friendly when I read this. Changing the line-spacings was too technical for me, but changing the blog template to one with wider spaces wasn’t. Now it’s much easier to read, I think. peajayar@blogspot.com will find it.

Reply

Pat Rosier 18 October 2009 at 16:00 28

Oh dear. That’s peajayar.blogspot.com And I clicked submit before I said thank you for yet another useful tip.

Reply

Miraz 18 October 2009 at 16:07 07

I’m glad you could find a way to do it, Pat. I think understanding the idea of line-height is useful, so blog owners can do as you did and choose a better template.

Those who can create and implement stylesheets for themselves can then finetune things to more exactly suit their web pages.

Reply

Add your Comment

{ 1 trackback }

Previous post:

Next post: