I'm having trouble setting up a baseline grid for my webpage. When I adjust the font scale, the text no longer aligns with the grid.
What am I doing incorrectly? Could this issue be related to the font scaling?
You can view the Fiddle here: http://jsfiddle.net/3stut/
And here is the code snippet:
HTML
<body>
<h1>Your Name</h1>
<h2>Your Name</h2>
<h3>Your Name</h3>
<h4>Your Name</h4>
<h5>Your Name</h5>
<h6>Your Name</h6>
<p>Paragraph</p>
</body>
CSS
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, dfn, th, var {
font-style: normal;
font-weight: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}
h1,h2,h3,h4,h5,h6,hgroup,ul,ol,dd,p,figure,pre,table,fieldset,hr,.header,.media,.island{
margin-bottom:1.5rem;
}
html {
font:1em/1.5 Cambria, Georgia, "Times New Roman", Times, serif;
background: url(http://media.smashingmagazine.com/wp-content/uploads/technical-type/img/css/grid.png) center -6px repeat-y #fff;
color: #333;
width: 940px;
padding: 0 10px;
margin: 0 auto;
}
body {
width: 460px;
margin: 0 auto;
padding-top: 72px;
}
h1 {font-size:48px;}
h2 {font-size:30px;}
h3 {font-size:24px;}
h4 {font-size:21px;}
h5 {font-size:18px;}
h6 {font-size:16px;}