studio•aplus presents

em-based typographic grid

by Aleksandar Vacić

← go to Typography demo

This is basic building block – 1.5em square:


All your widths, heights, margins and paddings should be an integer multiple of this block.

30-column grid

How wide is this (59 blocks) depends on the font you use and the base font-size you setup in BODY. In this setup, it's about 960px.


Use this grid to see where does your em-grid fit into browser window sizes. These days, you'll be shooting for 1024x768, which means that your grid should end somewhere between 960–990px.

6-column grid

Each column is 9-blocks wide (13.5em), with 1-block space in between (59 blocks total).


3-column grid

Each column is 18-blocks wide (27em), with 2-block space in between (58 blocks total).


3-column grid, uneven

Consists of 15em, 45em and 18em columns with 3ems on either side (58 blocks total).


I can continue more with this, but it's not really needed. If you check the source code, you'll see strange looking class names like g-c18-w2. Do you really want to build a website using such names?

Use regular names – like top, main, footer – and just calculate widths you need using the base grid unit.

© Copyright 2008, Aleksandar Vacić (studio•aplus)
Licensed under Creative Commons Attribution 3.0 Unported license