» Columns   » Typography   » Export   » Help

version 2.6b

© Rasmus Schultz [GPL3]


Line Height:


Style Sheet

HTML Template

Margin/Column Widths


If you're familiar with the grid, a bit of design and basic typography, using this script should be pretty easy - most of the functions are pretty self-explanatory.

If you're unfamiliar with grids in general, you could start by reading an excellent series of articles by web designer Mark Boulton.

For those who want a real understanding of the theory of grids in relation to design and typography, I strongly recommend this book.

Design a Grid

On the Columns tab, you can start your design in two ways:

  1. Fill in the number of columns, total width, gutters and margin widths, all specified in pixels - then press the design button.
  2. Recalculate the settings in various ways by clicking the row of buttons located next to each setting.

The grid preview on the Columns tab will display the widths of each area, in pixels. Below it, the widths of spanning columns is displayed. Click the arrows in the grid, to span/unspan multiple columns in your layout.


Use the Typography tab to adjust and calculate basic typographic settings for your design. The line height (in pixels) is also your vertical grid size - the line heights of your typography are specified in number of lines. The align setting can be used to tweak the vertical alignment of the text - adjusting this to align the baselines of your typefaces is a good idea.

Leading specifies the number of lines of space beneath a paragraph of text - sometimes you need an extra line of leading to properly align your headlines, so that they don't overlap with the following paragraph. The rest should be pretty straight forward and self explanatory.


Finally, on the Export tab, you can generate copy-and-paste ready CSS, and a sample XHTML template.

Use the scalable grid option, if you want a grid that can resize horizontally - all of the pixel widths will be recalculated and specified in percentages.

The CSS Reset option generates CSS to reset all standard typographic settings, margins, padding, alignment, table spacing, etc. - this is highly recommended, as browsers have different default settings, which may interfere with your typography. If you disable this option, your typography may not come out exactly the way you designed it.

Note that you can bookmark your design - the URL in your browser is updated dynamically, and contains all your grid and typography settings, making it easy to copy, save and share your designs.

Have fun!