Line-height percentage on a h1 tag behavior

Hello,

Given the following css

body {
line-height: 150%;

}

and this markup
<div style=“width: 100px;”>
<h1>A very very wrapping long h1 tag</h1>
</div>

I would in this case assume that the line-height between the lines in the wrapped text on the h1, would be 150% of what the browser would display without the line-height statement. But what happens instead is that the distance between the lines is decreased?

Why does this happen, and is there any way around this?

Without looking I suspect the H1 is applying its own in-built default values/semantics hence the difference.

try giving height in pixels instead of percentage. it wil show you effect


body {
line-height: 150px;
}

vineet

For the sake of argument, assume these values:

p {
  font-size: 16px;
  line-height: 150&#37;;  /* from your conditions */
  margin: 1em 0;

h1 {
  font-size: 36px;  /* norm is 2em, or 32px, but work with me */
  line-height: 150%;
  margin: .67em 0;   /* from Firefox's default stylesheet* */

And, this markup:

<p>some text above the heading</p>
<h1>heading's first line <br />
    second line of heading</h1>
<p>following line of text</p>

Top/bottom margins will collapse, so the <h1>'s 24px (36px font size × ⅔) margins will rule. The <p>'s half-leading (space) above and below the font blocks computes to 4px ((16 × 1.5 - 16) ÷ 2), and <h1>'s to 9px.

Now we can look at all the spacings.

From the bottom of the first <p>'s font block to to the top of the <h1>'s font block is 4px half-leading + 24px margin + 9px half-leading, 37px.

From the bottom of the <h1>'s first line font block, to the top of its second line font block is 9px + 9px, 18px.

The <h1> to <p> spacing is the same as the first <p> to <h1> spacing, 37px.

Does that describe what’s happening for you? If not, try to reword your problem statement.

cheers,

gary

  • See file:///[path to Firefox]/res/html.css

Hi,

To simplify :slight_smile:

You set the body to line-height:150% which means that it will be 150% of the current font-size for that element.

If the default for body is assumed to be 16px then the line-height is 24px.

The h1 then inherits the computed line height of 24px line-height (not 150%) hence the lines in the h1 are now closer together than they would have been had you not specified 150% in the body.

To maintain consistent scaling use unit-less line-height.

e.g.


body {
    [B]line-height: 1.5;[/B]
}

Now it will be 1.5 times whatever the current font-size for that element will be :slight_smile:

Ack! You are quite correct, Paul. I quite wrongly acted as if the 150% line-height were applied to the h1 itself rather than its computed value being inherited. I suppose, long ago, I decided that percentage values offered too much opportunity for error and stopped using them. :slight_smile:

I would like to point out to the OP that in order to maintain a well defined typographical scale*, it is necessary to specify line-height and vertical margin for each and every font-size used. For example, here’s the scale I use for my site:

 
  font-size: 1.75em;
  line-height: 1.4286;
  margin: .7143em 0 0;
  
  font-size: 1.5em;
  line-height: 1.6667;
  margin: .8133em 0 0;
  
  font-size: 1.25em;
  line-height: 2;
  margin: 1em 0 0;
   
  font-size: 1em;
  line-height: 1.25em;
  margin: 1.25em 0 0;
   
  font-size: .875em;
  line-height: 1.4286em;
  margin: 1.4286em 0 0;
  
  font-size: .75em;
  line-height: 1.667;
  margin: 1.667em 0 0;

This provides for the height of every line of text to be some multiple of the base height for text. The varying margins protect the spacing for the block containers. IOW, if the base font-size is 16px, each line-height computes to 20 or 40px, and all top margins compute to 20px. This makes the baseline for every line of text line up across columns, and the column itself has a regular scale.

N.B. I noticed I had made an arithmetic error of the 1.5em font-size, which I have now corrected. It’s a Good Thing™ I tried to answer, even if I got it wrong. :smiley:

cheers,

gary

  • See Bringhurst, Elements of Typographic Style

Gary, is there a reason why you’ve specified line-height values with a unit on some selectors and values without unit in others?

Hi Paul thanks for informative reply,

When trying to set 1.5 instead of 150% it didn’t have any effect, what did however seem to work better was to set using the *-selector

  • {
    line-height: 150%;
    }

Then you did it wrong :slight_smile: Try again - It will set the line-height to 1.5 times of the font-size for that element.

Can you show an example where it’s not working and I’ll take a look to see what’s going on?

what did however seem to work better was to set using the *-selector

  • {
    line-height: 150%;
    }

As a rule of thumb never use the universal selector to target all elements. It’s inefficient and can over-ride inheritance if you are not careful with it.

Sloppiness. As I’ve used line-height on any and all elements that have a font-size declared, the scalar is equivalent to the em value.

cheers,

gary

Hello Paul,

you are absolutely correct, it was my mistake, i tried it briefly in firefox using firebug to alter from 150% to 1.5 and i probably missed or added an extra semicolon, but indeed it works quite nicely using 1.5.

Thanks a lot for the help.