CODEWITHSUNDEEP
cssxhtml
Jitendra Vyas
Jitendra Vyas

Reputation: 152875

Some questions about line-height

what is default line-height of browsers like font-size is 16px?

for which HTML elements i should define line-height and for which not?

What is the reason behind to give line-height to body { } ?

Will line-height effect to single line text?

If I'm using font in em then should i also use use line-height in em?

What is co-relation between line-height and font-size?

Upvotes: 1

Views: 2183

Answers (3)

Már Örlygsson
Már Örlygsson

Reputation: 14606

In my experience, a common default line-height seems to be close to 1.2 (that would be ~19px leading for a 16px font (16*1.2)). In some browsers versions it's about 1.1 - but I can't remember ever seeing it outside that scope.

The line-height property is inherited from parent to child - so specifying a line-height on <body> will affect all elements on the page, except the ones that have their own line-height property set, and their descendants. (See example below)

Line height affects the height occupied by each character - so yes it also has an effect on single-line-of-text elements.

Line-height comes in three basic flavours:

  1. 'relative'/'unitless' (e.g. 1.2)
  2. 'fixed' (e.g. 14px)
  3. 'fixed-relative' (e.g. 1.2em)

Relative (unitless) values will apply proportionally equivalent line-height to all elements depending on their font-size. Meanwhile, fixed values (px) don't change with the font-size.

For explanation of the 'fixed-relative' variant (the 'em'-values) refer to Eric Meyer's blog post "Unitless Line-Heights".

Each flavour has it's place in the world. :-)

Here's a short example of all three:

body {
  font-size: 12px;
  line-height: 1.5;
}
small {
  font-size: 10px;
}
div {
  line-height: 21px;
}
p {
  line-height: 2em;
}

...

<body>
  one
  <small>two</small>
  <div>
    three
    <small>four</small>
  </div>
  <p>
    five
    <small>six</small>
  </p>
</body>

Each word in the example above would have the following line-heights (translated into px)

  • 'one' == 18px (1.5 times the 12px font-size of body)
  • 'two' == 15px (1.5 times the 10px font-size of small)
  • 'three' == 21px (fixed px value)
  • 'four' == 21px (inherits a fixed px value from div)
  • 'five' == 24px (2 times the 12px font-size of p (inherited from body))
  • 'six' == 24px (inherits a (fixed) pre-calculated value from p)

Upvotes: 1

Robusto
Robusto

Reputation: 31913

Line-height is, quite simply, the height of a line of text, but it also applies to elements whose display style is inline.

It is equivalent to leading in print typography. Typically, you want a little space between lines of text, and often you will see sites applying an overall line-height of 1.4 or 1.2. A value of 1.4 means they want the line height to be 140% of the text height. If the line-height is set to (or left at) 1, then weird things can happen. When you see an italic word displacing an entire line (making it look uneven) that's what's happened.

Upvotes: 0

Robert Harvey
Robert Harvey

Reputation: 180908

Typically, the default line height is about 1.1em (which is relative to the font size being used by the element.

You should set a default line-height in your CSS, and then only modify the line-height in your page when it needs to differ from this.

When you have a requirement that text in the tag have a specified line-height

Don't understand this question

Only if you need to.

If you are using em's to specify line height, the height will be proportional relative to the font size.

Upvotes: 0

Related Questions