Heres how a grid can keep your Web page in shape.
YOU DONT 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. Thats a lot.
Its about double what the average reader is
comfortable with. You can avoid all this by defining a
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
cant go much wider than 520 pixels unless your pages
are shrunk to fit as theyre printed. Lets start
with the 520.
WEB DOESNT give you much control to start with.
Dont 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,
Heres 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. Thats the 10-pixel
It shows your readers where they are on your Website, and
where they can go.
Its 120 pixels wide, and divided from the text column
by a ten-pixel gutter.
You can also use it for some illustrations and captions.
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. (Theres 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
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
doesnt 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 youve got a layout grid, you can start working on
the text itself.
IS the arrangement of text. People dont 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