CSS Line Building Guide

Question

I remember reading a style guide explaining what the correct line height for each element should be. I can not find it on google.

I would appreciate it if someone could connect me with such a guide or perhaps explain it in return.

Thanks!

Edit: AVOID, please let me clarify. I am not asking about how to use CSS to set line heights, but what are the recommended line heights for different elements. e.g. headings, paragraph text, etc.

Thanks!

Answer 1

Perhaps these links are more like what you are looking for. I have not found the final rule, but at least there are some things to consider.

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

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

This recommendation is mostly consistent with both of them: http://www.wpdesigner.com/2007/06/21/web-typography-line-spacing/

The basic rules are (1) wider lines of text that require large line heights, and (2) a larger font-based line height is required if the height of the lowercase letters is a high percentage of the height of the letters in upper case.

The best approach is probably just his eyeball and an attempt to avoid the impenetrable walls of the text.

Answer 2

The information here is pretty simple but useful.

Summarizing:

The default value of line-height:normal gives line-height:1.2 , 120% of the font size. If you are going to change it, it is usually best to use a number without units, for example lineheight:1.5 (150% font size), because then the line height for the element will be calculated from this font of the size element, even if the line height was inherited from an element with different font size.

If you say line-height:10em , it is calculated from the font in the element where the line height was specified., Which may be incorrect if this line height is inherited by an element with a different font size.

Likewise, a certain number of pixels, such as line-height:10px , can be erroneous if it is inherited by elements with different font sizes.

Answer 3

Usually this is 120% (of the font size).

Answer 4

W3 schools recommend ( here ) a line height of 1.6, although I have seen that between 1.2 and 1.45 is also good