WEB STANDARDS CREATIVITY

Adding gutters, margins,
and padding
You may have noticed there are no gutters in my initial
grid design.
Gutters are the gaps in between columns. They are there
so text or images from different columns don’t run into
each other. In grid system design, sometimes (depending
on what theory you read), gutters are separate from the
columns. This creates practical problems for us when
designing grid systems on the Web because of the way we
build the columns.
Generally, but not always, the columns we create, using
Web Standards, are divs, which are given widths and
positioned and styled using CSS. So, ideally, we don’t want
to be creating separate columns for the gutters. We
therefore deal with gutters as part of columns (see Figure
6-10), and they are implemented using padding, or by
creating margins, for the elements positioned within the
columns or sometimes the column divs themselves.
Figure 6-10. The gutters in this example are part of the
columns, rather than sitting in between them.
I always choose to add padding to the elements within
the columns. This may mean I end up creating more work
for myself when I write the style sheets. I could simply
add a margin. But doing it this way ensures that when I
want to butt elements up against each other, I can. This
also avoids box model problems with Internet Explorer,
but as that was not a supported browser in this design, I
didn’t have to worry about that too much.
So, I have my columns—all six of them. Now I can start to
add horizontal elements, such as the footer and masthead.
But before I do that, I need to address an important
typography measurement.
For the build of this project, there was a requirement for
the user to be able to choose either a fixed or flexible layout.
In the fixed layout, the columns would be
determined by pixel measurements and therefore fixed.
In the flexible layout, percentages would be used for the
columns and ems would be used for the typography.
An em is a typographic measurement equal to the width of
the size of the typeface. So, if a typeface is set at 12px, then
1em (width) is 12px. The problem we have when using em
as a unit of measurement is that most browsers’ internal
style sheets render 1em as approximately 16px. This in
itself is fine, but it makes using multiples and divisions a little
more difficult than it needs to be (unless, of course,
you’re great at your 16 times table). To get around this, I
reduce the default of 16px to 10px (see Figure 6-11). I do
this by adding a declaration to the body tag in the CSS file:
body {
font-size: 62.5%;
}
Richard Rutter wrote a great article called “How to
size text in ems” in 2004, detailing this technique
(http://clagnut.com/blog/348/).
Figure 6-11. The 10px gutter now becomes 1em, as I’ve defined
the font size of the body to be 62.5%.
chapter 6 Grid Design for the Web
139