H Tags Wont Sit On Baseline Grid

Question

Im trying to work with a baseline grid of font-size:12px & line height:18px.

Most things seems to line up ok, except the H tags. The h2 tag in particular ends up with the baseline guide running through the middle of it.

This is my first shot at trying to build a website based on this so im not sure if its meant to be like that as the margins for them still allow everything else to fall into place, but the headings don't appear as i expected.

Screen shot of the result:

CSS

/* reset.css */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1.5;background:white;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
:focus {outline:0;}

/* typography.css */
html {font-size:100.01%;}
body {font-size:75%;color:#444;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;background: url("../images/gridbg.gif") repeat scroll 0 0 #FFFFFF;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}

HTML

<h1>Welcome</h1>
<p>
Feel free to select a few different date/time combinations in order of preference.
This makes it easier for us to accomodate you when it is busy.
If your prefered slot is unavailable we will contact you to confirm whether you would like to use one of the alternatives you had previously specified. 
</p>
<p>
Feel free to select a few different date/time combinations in order of preference.
This makes it easier for us to accomodate you when it is busy.
If your prefered slot is unavailable we will contact you to confirm whether you would like to use one of the alternatives you had previously specified. 
</p>


<h2>Welcome</h2>
<p>
Feel free to select a few different date/time combinations in order of preference.
This makes it easier for us to accomodate you when it is busy.
If your prefered slot is unavailable we will contact you to confirm whether you would like to use one of the alternatives you had previously specified. 
</p>

<h3>Welcome</h3>
<p>
Feel free to select a few different date/time combinations in order of preference.
This makes it easier for us to accomodate you when it is busy.
If your prefered slot is unavailable we will contact you to confirm whether you would like to use one of the alternatives you had previously specified. 
</p>

Answer 1

The vertical interval of the baseline grid is 18px. The height of h1 is 3em, and 2em for h2. 3em means three times the font size, thus 3*12px=36px. Thus grids run through those tags.

The baseline grid does not mean every thing should fit in grids exactly, it means the main part of the page is fitted and separated evenly, for example the <p>s in your code .

If you feel the gap between a h tag and its following paragraph is too wide, you could add a bit margin-top and reduce margin-botom correspondingly of the h tag.