About the Relative Vertical-Baseline Calculator

Set the base font size and line height

Select headings scale

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)

This is Dreamweaver’s original default font stacks:

• Arial, Helvetica, sans-serif
• Times New Roman, Times, serif
• Courier New, Courier, monospace
• Georgia, Times New Roman, Times, serif
• Verdana, Arial, Helvetica, sans-serif
• Geneva, Arial, Helvetica, sans-serif

And yes, this is a riff on Mark Simonson’s The Scourge of Arial.