It was this art­icle on A List Apart that first got me star­ted on the idea of using a hori­zontal grid on my latest Word­Press theme (the very one that you’re look­ing at right now). The best example of what align­ing your type to a baseline grid means, can be seen here. Note how all the text falls within the lines, no mat­ter the siz­ing or images. It took quite a few months of work to try and get it to look the same in all browsers using the very min­imum of CSS hacks, but is now 99% done (more in the next post on how IE6 and IE7 deal with text-boxes differently).

The very first part is set­ting up a CSS reset. I’m using a reset that has been slightly cus­tom­ised from one I found a few years back. The more import­ant changes were to do with how <table> is treated, as I found quite a few con­flicts with WP-eCommerce (more on how heav­ily I have had to hack up that piece of junk in another post).

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}

:focus {
outline:0;
}

body {
background:white;
}

ol, ul {
list-style:none;
}

table {
border-collapse:separate;
border-spacing:0;
}

caption, th, td {
text-align:left;
font-weight:normal;
}

blockquote:before, blockquote:after, q:before, q:after {
content:"";
}

blockquote, q {
quotes:"""";
}

Make sure that you call your reset.css file before your style.css file in your header. The next part is to decide your line-height and font-size. For the best legib­il­ity I have gone with a line height of 18 pixels, and a stand­ard font size of 12 pixels (you’ll find that this is a quite com­mon siz­ing). This — as well as choos­ing Hel­vetica for the typeface and a slightly off-white for the back­ground and a dark grey for the text — leads us to the below:

html, body {
font-family:helvetica, arial, sans-serif;
font-size:12px;
line-height:18px;
font-weight:normal;
color:#444;
text-align:left;
background:#FDFDFD;
}

a, a:link, a:visited {
color:#222;
font-weight:bold;
text-decoration:none;
}

a:active, a:hover {
color:#34B0F8;
text-decoration:none;
} 

h1,h2,h3, h4 {
color:#222;
font-weight:bold;
line-height:18px;
}

h1 {
font-size:24px;
line-height:36px;
}

h2 {
font-size:18px;
}		

h3 {
font-size:12px;
margin-bottom:18px;
}

h4 {
font-size:11px;
}

p {
padding-bottom:18px;
}

br	{
line-height: 18px;
}

ul {
list-style-position:outside;
}

em {
font-style:italic;
}

strong {
font-weight:bold;
}

This is what will form the basis for our hori­zontal baseline. We will delve deeper into this in Part 2, which will cover how to deal with images, as well as the basic lay­out of the site.