CSS - line-height

css
css-font

http://www.sitepoint.com/3-things-almost-one-knows-css/ - done reading (valuable)
http://www.slideshare.net/maxdesign/line-height - done reading (valuable)

Always specify line-height as a unitless number; that way, descendent elements that specify a different font-size will inherit that number rather than a fixed line height. — http://www.sitepoint.com/3-things-almost-one-knows-css/

Let’s say the page has a default font-size of 12pt, but it also contains a heading with a font-size of 24pt. If you set the line-height of the body to 2em (or 200%), then you’ll get a line height of exactly 24pt (twice the body’s font-size) everwhere in the document—even in that heading. The heading will therefore be single-spaced, not double-spaced!

Setting line-height to 2 instead tells the browser to preserve the font-size/line-height ratio even when the font size changes. The line height for the body will be 24pt, but for the heading’s 24pt font, the line height will automaticlly increase to 48pt.

What is the purpose of line-height?

CSS line-height property controls the space between two lines within the same paragraph.

What are the acceptable values for line-height?

Line-height can be specified with five different types of unit.

  1. Line-height can be specified as normal
  2. Line-height can be specified as inherit
  3. Line-height can be specified as a percentage value
  4. Line-height can be specified using a length value such as 20px, or 2em
  5. Line-height can also be specified using a unit-less number value (a unit-less value) such as 1.2. If the line-height property for an element was defined as just a number x, without a unit, the computed value for line-height for the element will be x times the font-size. For example, if the element has its font-size defined as 12px, and its line-height was defined as 2, its computed value for line-height is 24px.

How to keep vertical rhythm in CSS?

To keep a vertical rhythm in CSS, you want the spacing between elements and the line-spacing (leading) to equal the size of the baseline grid. For example, lets say that you are using a 15px baseline grid, meaning that there are 15px between each baseline, the line-spacing would be 15px and the space between each paragraph would also be 15px. For example:

body {
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    line-height: 15px;
}

p {
    margin-bottom: 15px;
}

The above code talks more specifically about spacing between paragraphs than spacing between lines (line-height). In this particular example, the font-size is 12px and the line-height is 15px, which means that there is very little spacing between lines. That is one usability problem, but the focus of the above code was more on the 15px which is specified for both line-height and margin-bottom.

Can line-height be specified without a unit?

Yes. Line-height can be specified without a unit. If the line-height property for an element was defined as just a number x, without a unit, the computed value for line-height for the element will be x times the font-size. For example, if the element has its font-size defined as 12px, and its line-height was defined as 2, its computed value for line-height is 24px.

What happens if the line-height property for an element is defined without a unit?

If the line-height property for an element was defined as just a number x, without a unit, the computed value for line-height for the element will be x times the font-size. For example, if the element has its font-size defined as 12px, and its line-height was defined as 2, its computed value for line-height is 24px.

What happen if the line-height property for an element is defined using em?

By definition, em is the font-size. So, when line-height is defined using the em unit, it is the same as without the unit.

What happen if the line-height property for an element is defined using percentage?

I am not sure on this.

What happen if the line-height property for an element is defined using pixel unit?

This should be the computed value, but I am not sure. Read more below for detail.

How to define line-height such that it is WCAG compliant?

To be compliant with WCAG, line-height should be set to 1.5:

line-height: 1.5

What is the computed value for line-height if it is declared without a unit?

If the line-height property for an element was defined as just a number x, without a unit, the computed value for line-height for the element will be x times the font-size. For example, if the element has its font-size defined as 12px, and its line-height was defined as 2, its computed value for line-height is 24px.

Does the browser re-compute the line-height of an element if we change the font-size for the child element?

No. The computed value of line-height is inherited from the parent element, and is not recalculated when we change the font-size for the child element. Continue with our assumption that the font-size for the parent is defined as 12px, and the parent has line-height defined as 2, the parent's computed value for line-height is 24px. If we change the font-size for the child element, without explicitly redefining line-height for the child element, its line-height will be 24px.

If the font-size of a child element is different from the parent element, do we need to declare the line-height on the child element?

Yes and no. We only need to re-declare the line-height of the child element if we notice undesired line-height issue.

The computed value of line-height is inherited from the parent element, and is not recalculated when we change the font-size for the child element. Continue with our assumption that the font-size for the parent is defined as 12px, and the parent has line-height defined as 2, the parent's computed value for line-height is 24px. If we change the font-size for the child element, without explicitly redefining line-height for the child element, its line-height will be 24px.

If we notice undesired line-height issue, we just have to declare the line-height for the child element.

Why should we always declare line-height whenever we declare font-size?

The computed value of line-height is inherited from the parent element, and is not recalculated when we change the font-size for the child element. Continue with our assumption that the font-size for the parent is defined as 12px, and the parent has line-height defined as 2, the parent's computed value for line-height is 24px. If we change the font-size for the child element, without explicitly redefining line-height for the child element, its line-height will be 24px.

Does line-height have anything to do with margin or padding?

No. CSS line-height has nothing to do with margin or padding. The line-height property is only used when wrapping is necessary. It controls the spacing between lines within a paragraph. The top margin and bottom margin control the spacing between 2 paragraphs. Padding control the spacing between the first line of the paragraph and the border of the paragraph.

What is leading?

Back in the good old days, type was set by hand using printing presses. Printed material was created by setting out letters in rows. Each letter was created on an individual block. Leading or lead strips were added between the lines of letters when additional vertical space was required. In CSS, line-height is used to control the vertical space between lines. However, the terms leading and half-leading are still used in association with CSS line-height.

So how do you apply line-height?

By default, browsers use between 1.0 - 1.2 line-height. This is referred to as an initial value. You can override this default line-height using CSS line-height property:

p {
    line-height: 140%;
}

body {
    line-height: 1.5;
}

What are the 4 types of boxes pertaining to line-height?

  1. Containing boxes: The paragraph is referred to as a containing box.
  2. Inline boxes: Inside the paragraph are a series of inline boxes. Inline boxes do not form new block of content. The content is distributed in line. The em element, and the span element are inline boxes. Other boxes without specified markup are referred to as anonymous inline boxes.
  3. Line boxes: Inline boxes sit side-by-side within the containing box, forming a line box (especially when the text is wrapped).
  4. Content area: The content area is the invisible box that surrounds the text. Its height is determined by the font-size.

See http://www.slideshare.net/maxdesign/line-height

How does the browsers apply line-height to inline boxes?

  1. Find the difference between the font-size and line-height. This will determine the leading. For example, if the font-size was declared as 12px, and the line-height was declared as 2 (without unit), the computed line-height is 24px, and the leading is computed: computed line-height - font size. So the computed leading in this case is 24px - 12px = 12px.
  2. Divide the leading in half to create a half-leading value.
  3. Apply this half-leading value to the top and bottom of the content area.

Can line boxes be smaller than the content area?

Yes. Line boxes can sometimes be smaller than the content area. For example, if the line-height is smaller than the font-size. In this case, the inline box will honor the line-height (the height of the inline box will be equal to the computed value for line-height). The content area will then pokes out the top and bottom of the line box. The half-leading collapses together to form the inline box height.

How do browsers determine the height of line boxes?

The height of line boxes are determined by the tallest inline box. The tallest inline box could be an anonymous inline box. It could be an inline box with increased line-height. It could be an inline box with a larger font-size. It could be an element or some text with supperscript or subscript. It could also be an image.

Can the superscript and subscript elements force the line box to be taller than normal?

Yes. The superscript and subscript elements can sometimes force the line box to be taller than normal. You can fix this by setting these elements' line-height to 0 which will remove all half-leading from the element.

How to deal with IE6 when it incorrectly remove the top half-leading when an inline image is present?

IE6 incorrectly removes the top half-leading when an inline image is present. This is a hard one to fix, but if needed, margin can be added to the top of the image to fake the half-leading using conditional comments.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License