CSS Typography and Vertical Rhythm

Relative to font-size i.e. proportional line-height

About the Relative Vertical-Baseline Calculator

Set the base font size and line height

Select headings scale

Scales	Browser	Typographic
h1	2em	1.5em
h2	1.5em	1.334em
h3	1.167em	1.167em
h4	1em	1em

You can decide whether you the h1 heading’s bottom margin should match subheadings spacing

Choose whether you want symmetrical subheadings spacing, which is the way most do it, or asymmetrical spacing where there is less space between the heading and the text. With asymmetrical spacing the heading’s relationship to the text that it references makes more sense, and because of that it’s aesthetically more pleasing.

For most web design uses the subheadings should have a zero 0 top margin. If you have a more article oriented design where you have headings and subheadings


html, body {
margin:0;padding:0;border:0;outline:0;font-size:100%;
}


Zero out (i.e. Reset) main block-level elements, and set font size to 100% so that ems scale properly


body {
font:12px/1.334 sans-serif;
}


Contrary to the popular practice of setting the default body font size in percentages/ems we set the font size in pixels — hench the reason for setting font size in percentage above.
If the user sets their default font size to something other 16px in the brower’s preferences then the whole percentage thing falls apart. Say they’ve set their default font size to 14. If you then set the body font size to 75% then you’re actually setting the font size to 10.5 and not to 12 as you intend.





h1, h2, h3, h4 {
text-align:left;
line-height:1.0;
}


Set headings line height to 1.0* so that the baselines cascade properly (*The reason for using the decimal 1.0 instead of the integer 1 is because the CSS validator has been known to return errors when using integer unitless values)