2

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 aisleone.net site has been hacked to launch drive-by malware. Alan G.

Improve this question
1
  • 1
    ..and the next question would be, why are there any designers when you can just crunch the numbers and be over with it?
    – Joonas
    Commented Oct 23, 2011 at 14:42

3 Answers 3

Reset to default
3

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.

Improve this answer
1
  • I am with you on this one
    – Luuk
    Commented Oct 24, 2011 at 14:49
1

Those styles are often part of a framework that utilizes a baseline grid. The idea is that all type on the page has a baseline that fits into the grid's "flow". How useful/aesthetic said frameworks are is debatable. Some folks love them. Some find the arbitrary.

There is no mathematical formula for this. It's really an issue of eyeing it all up and making adjustments based on your best judgement as a typesetter/designer. One could argue that the default spacing in browsers tends to lead to overly tight leading, though.

Improve this answer
0

I can't vote yet so will agree with what all of the above have said. There should be logic for your line-height/leading but the margins are most probably just for that grid/site etc. Go with what looks good in your design.

On a side note:

"line-height should never be applied using absolute units such as points or pixels. In the prior example, when text is resized in a browser, the font-size increases (to 18 pt for example) but the line-height may remain at 15 pt. So instead of the lines being spaced apart, they would actually overlap.

A better approach is to make use of a unique characteristic of the line-height property: it is the only css property for which non-zero numeric values are allowed without units. The preceding example could also be coded as:

p { font-size: 12pt; line-height: 1.25 }"

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.