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!
While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size. While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size.
Line height can be expressed in a variety of units, including points, pixels, ems, and rems. Thinking in percentages is perhaps the easiest way of understanding the relationship between font size and line height. Setting a line height of 150% in a design application multiplies our font size by 1.5.
Google runs a 1.5 line height for its body there, or 16px font size and a line-height of 24px.
The line-height property in CSS controls the space between lines of text. It is often set in a unitless value (e.g. line-height: 1.4; ) so that it is proportional to the font-size. It's a vital property for typographic control.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With