Using a baseline grid is something we should all know especially if you have been involved in print or anything really relating closely to layout. Layout is exactly what Web Designers take care of all day long. Before we dive deeper into this topic, make sure to read the A List Apart article by: Wilson Miner before going any further.

Setting Type on the Web to a Baseline Grid by: Wilson Miner, April 9, 2007
http://www.alistapart.com/articles/settingtypeontheweb

Still confused about grids? Read Mark Boulton's article on creating grids and discussing their origin. A great read for newbies coming to Web Design with no grid knowledge or layout experience.

Five simple steps to designing grid systems by: Mark Boulton – Preface
http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-preface

Making the Baseline foundation:

The first thing we have to do is set a line-height for our grid. We choose a standard base font size of 16 pixels (1em or 100%), and set the line-height to 24 pixels (1.5em or 16*1.5), which gives us a leading of 150%. It’s important to think about your line-heights up front. You want a ratio of font size to line-height that’s a good balance for readability and that’s easily divisible into smaller units.

For Example :
body { font: normal 100%/1.5 Georgia, "Times New Roman", Times, serif; }

Making the Vertical Baseline: