CSS Line-Height Guide

Question

I remember reading a style guide explaining what the proper line-height should be for each element. I can't find it on google.

I would appreciate it if anyone could link me to such a guide, or perhaps explain it in an answer.

Thanks!

Edit: SORRY, please let me clarify. I'm not asking about how to use CSS to set line-heights, but what the recommended line-heights are for various elements. eg headers, paragraph text, etc.

Thanks!

Answer 1

It's usually 120% (of the font size).

Answer 2

The info here is pretty basic, but useful.

To summarize:

The default line-height:normal gives line-height:1.2, 120% of the font size. If you're going to change it, it's still usually best to use a number with no units, e.g., lineheight:1.5 (150% the font size), because then the line-height for an element will be computed from that element's font size, even if the line height was inherited from an element with different font size.

If you instead say line-height:10em, it's computed from the font on the element where the line-height was specified . . . that may be wrong if this line-height is inherited by an element with a different font size.

Likewise a specific number of pixels such as line-height:10px could certainly be wrong if it's inherited by elements with different font size.

Answer 3

Two articles from A List Apart immediately come to mind:

• Setting Type on the Web to a Baseline Grid
• How to Size Text in CSS

Answer 4

Maybe these references are more like what you're looking for. I haven't found a definitive rule, but at least here are some things to consider.

This one suggests that it depends on your choice of font-family: http://www.webteacher.ws/2009/09/30/improve-readability-with-line-height/

This one suggests that it depends on the width of the lines: http://kingdesk.com/articles/optimal-line-height/

This reference essentially agrees with both of those: http://www.wpdesigner.com/2007/06/21/web-typography-line-spacing/

The main rules seem to be (1) wider lines of text require greater line-heights, and (2) greater line-height is required based on font if the height of lower-case letters is a high percentage of the height of upper-case letters.

The best approach is probably just to eyeball it, and try to avoid impenetrable walls of text.

Answer 5

I also need help with line height. I am setting up an html newsletter, but must keep it simple so my successor won't have to update the html directly. MailChimp comes with a basic menu which does not include line height.

I've got about 10 basic web-safe fonts to choose from for my body text. What font would you choose for good readability without specifying line height?

I once read that Times New Roman was the best choice for these conditions. Would you agree?

Have tried Trebuchet, and felt it was too vertically crowded.

Any help is appreciated!