: 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.

@Hamaas979

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 }"

webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.1/

Vote Up Vote Down

@Jennifer810

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.

Vote Up Vote Down

@Shelley591

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.

Vote Up Vote Down