Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Line-Height Guide

Tags:

css

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!

like image 343
Jourkey Avatar asked Feb 14 '10 20:02

Jourkey


People also ask

What is a good line height CSS?

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.

What is 150% line height?

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.

How many pixels is 1.5 line height?

Google runs a 1.5 line height for its body there, or 16px font size and a line-height of 24px.

What does line height 1.4 mean?

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.


1 Answers

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.

like image 176
Tim Goodman Avatar answered Nov 04 '22 00:11

Tim Goodman