I recently adjusted the font sizes to be more consistent across various elements:
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,
b, u, i, center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
}
Now I want to adjust the heading tags using percentage values for <h1> and <h2>. Here's what I have in mind:
h1 {font-size: 2em; margin: .67em 0;}
h2 {font-size: 180%; margin: .83em 0;}
h3 {font-size: 1.17em; margin: 1em 0;}
h4 {font-size: 1em; margin: 1.33em 0;}
h5 {font-size: .83em; line-height: 1.17em; margin: 1.67em 0;}
h6 {font-size: .67em; margin: 2.33em 0;}
h1, h2, h3, h4, h5, h6 {font-weight: bolder;}
I've set a percentage value for <h2>, but what about the other heading tags?