font-size:12px&line height:18pxのベースライングリッドで作業しようとしています。
Hタグを除いて、ほとんどのものは問題なく並んでいるようです。特にh2タグは、ベースラインガイドがその中央を通過することになります。
これは、これに基づいてWebサイトを構築しようとした最初のショットです。そのため、余白によって他のすべてが適切に配置されるため、そのようなものかどうかはわかりませんが、見出しが期待どおりに表示されません。
結果のスクリーンショット:
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>