When the normal 12 column 960 grid doesn’t cut it

Currently I’m working with a black design with white large typography and using the normal 12 column 960 grid makes it feel messy and cramped

The 960 grid has been the grid for me the last years, ever since I discovered its benefits. Especially the 12 column grid that allows me to have 3 or 4 even columns. The 16 column grid doesn’t do that. Until now I’ve never felt that it’s been limited or restrictive, au contraire, it’s been highly flexible and awesome!

Currently I’m working on a huge black design. It’s black with white large typography. We’re talking headlines in 50px and body text in 16px and I love it. At this size the beauty of the fonts really shows, especially the serifs in the headline font.

However, working with such large fonts and black background I realized that the grid I decided on didn’t cut it. It felt to tight, cramped and was difficult to read, and at first I didn’t know why.

A normal 12 column 960 grid

Notice how the white image placeholder almost eats into the headline? They are too fucking close. First I felt at a loss to know what to do. I did use the oh-so-magical 960 grid. Then why did it turn out like shit?

My colleague and friend Martin commented on the design and said “does it have to be so cramped?” At that moment I realized what was wrong, of course it doesn’t have to be so cramped! I can change the grid!

I experimented a bit. I still wanted the 12 column and I still wanted the full 960 pixels. I quickly realized that it was impossible if I doubled the gutter width. I continued to experiment with larger grid sizes like 970 and 980 but I always ended up with odd widths. I hate odd widths.

After some time I shrunk the width of the grid and got a grid of 920 pixels and a column and a gutter width of both 40 pixels.

The result has a much needed wider gutter between the columns. The page is easier to scan and feels a lot calmer. As I noted before, if you increase the typography you also need to increase the margins between the text and images. Otherwise it will just end up feeling cluttered. And it doesn’t really matter if you’re working on a black background or a white one, it’s just easier to notice on a black background.

Resources

Share your thoughts on this

Your email address will not be published.