In webdesign how do you calculate the ideal bottom margin for headers?

I’ve seen a few css frameworks add margin-bottom to heading elements in addition to a large line-height. Example from here.

    h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
h5 { font-size: 17px; line-height: 24px; }
h6 { font-size: 14px; line-height: 21px; }

However, I read here** that line height should be font size + 2-5pt. Which looks pretty fine to me. So is the extra space needed. Are there any typographic rules for how much space there should be under headers?

** Edit note: Link removed. The site has been hacked to launch drive-by malware. Alan G.


Trying to generalize from settings done for one specific project is likely to lead you to all kinds of false conclusions. For that reason, you must look closely at that project to see WHY those settings might be there. I’m sure the designer has a reason for each one of those settings, but that doesn’t mean those reasons are valid for your next website design.

There are some general guidelines, though. A heading, if it is to look like a heading and not a floating, random bit of text, must be closer to the text it heads than to the material above it. I’m not going to post a screen shot, because you can find plenty of example in any magazine you care to pick up, any textbook and the question (a heading style) on this page.

How much space there is above or below a heading depends entirely on the needs of the design. Again, a selection of magazines will give you ample food for study.

Source : Link , Question Author : firefusion , Answer Author : Alan Gilbertson

Leave a Comment