Horizontal and Vertical Grid alignment of Design and Type

without using tables

[SuzyUK]

There's been a few articles written about designing to a grid system. With tabular layout the horizontal grid was probably achieved by default as colspans or nested tables would split the page into columns.

I'm really taken with using the line-height system of vertical symmetry, I've always been a proponent of using vertical whitespace to make the page flow and easier to read. So it makes sense that creating a background image with the required line-height spaced rules on it and then vertically aligning all elements to a rule/baseline makes the page visually not only easier to read but makes the text flow/align with the other elements (images, menu boxes etc..) making the page just flow better in general

e.g.

Heading 
------------------------------ 
** whitespace ** 
------------------------------ 
line of text ¦image top ¦ 
------------------------------ 
line of text ¦image mid ¦ 
------------------------------ 
line of text ¦image base¦ 
------------------------------ 
** whitespace ** 
------------------------------ 
. 
-----------Heading------------ 
. 
------------------------------

That's only a rough attempt at explaining by ASCII ;)

but the idea is that given the normal text and leading you get a baseline measurement say 18px between lines then you size your top/bottom margins and your headings font-size so that the elements align with these lines.

When starting to plan a site this would be a useful measurement as using CSS you can then size menus, images, divs to fit in the Grid.

needless to say making a new 'ruler' graphic as a background graphic is not always useful especially as the site progresses as it may have it's own background image requirements, so I was pleased to see a JS tool/bookmarklet named "Syncotype" which can be used for troubleshooting, or working on a live site - I wonder if this could somehow be incorporated into the Web Dev Toolbar for a really useful troubleshooting any JS gurus up for the challenge?

What's your thoughts would you or do you use such Grid system? and if so any tips on how you achieve it..

edit reason: (I so can't do ASCII on these boards ;)

[edited by: SuzyUK at 12:57 pm (utc) on Aug. 8, 2007]

[vincevincevince]

I like your method, and I do use grid systems. My personal approach differs in that the design is done as far from a browser as possible, then measured, and then implemented with pixel precision in CSS - I never do design or layout 'in CSS' - only implementation of design or layout.

[Robin_reala]

Hey, that's a really neat bookmarklet. Thanks! I've distributed this out to the designers here.