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

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.