Your framework

Home page

Web text
Don’t irritate
Your grid

Here’s how a grid can keep your Web page in shape.

F YOU DON’T restrain your text, it spreads to the full width of the browser window. On a big monitor, short paragraphs become single lines. One line of 12-point text can run to 80 characters or more. That’s a lot. It’s about double what the average reader is comfortable with. You can avoid all this by defining a column.

Think hard copy
With luck, somebody will want to print out one or two of your Web pages. How do they fit a printer? The A4 paper size is 21 centimetres (8.26 inches) across. That means you can’t go much wider than 520 pixels unless your pages are shrunk to fit as they’re printed. Let’s start with the 520.

HE WEB DOESN’T give you much control to start with. Don’t leave your line length to chance. A column of a fixed width is one of the few things you can decide. People seem to like a narrow column on the left, a wider text column on the right, and an empty column, called a gutter, between them.

Here’s how this page divides the 520 pixels. (Different arrangements may well suit you better.) Between the measure of 120 pixels and 390 is a gap. That’s the 10-pixel gutter.

Navigation column
It shows your readers where they are on your Website, and where they can go.

It’s 120 pixels wide, and divided from the text column by a ten-pixel gutter.

You can also use it for some illustrations and captions.

Text column
This page has a text column that is 390 pixels wide. It gives you plenty of room for the message you want to give the world. (There’s no need to fill every corner of the screen. White space looks good.) This is where you put your text, most of your illustrations and the captions that go with them.

EVERAL PARTS make up a Web page. They all have to go somewhere. Your readers like them neatly arranged, and much the same on one page as the next. The pictures should be no broader than the grid. If you need the full 520-pixel width, you can extend the pictures into the navigation column.

The header can have various bits of identification in it, and perhaps your headline as well. It belongs at the top of the page, at least until you start accepting advertisements. (The standard advertising banner is 468 by 60 pixels, and doesn’t fit many useful frameworks.)

At the bottom of your page goes the footer, with a date, and perhaps where to reach you. Your readers should also know where you stand on copyright.

Once you’ve got a layout grid, you can start working on the text itself.

YPOGRAPHY IS the arrangement of text. People don’t like it in one big lump. We divide it into paragraphs and chapters, sentences and sections. Good typography attracts your readers to your message. Bad drives them away.

These are your limits, more or less. They are a proper setting for your ingenuity and invention. Work within them.