CODEWITHSUNDEEP
css
Jourkey
Jourkey

Reputation: 34996

CSS Line-Height Guide

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!

Upvotes: 7

Views: 9357

Answers (5)

ez1z
ez1z

Reputation: 1

Normal line-height value is normal. You can edit that with numbers like 1.6 2 etc

Upvotes: 0

Tim Goodman
Tim Goodman

Reputation: 23986

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.

Upvotes: 10

vancy-pants
vancy-pants

Reputation: 1358

W3 schools recommends (here) a line height of 1.6, though I've seen that between 1.2 and 1.45 is good as well

Upvotes: 0

Tim Goodman
Tim Goodman

Reputation: 23986

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.

Upvotes: 8

Svante Svenson
Svante Svenson

Reputation: 12478

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

Upvotes: 0

Related Questions