Web Design: Line Height

---

Line Height CSS1 Property

"A CONTINUING WORK IN PROGRESS"

Last update 8-24-14

The line-height property specifies the line height (or line spacing). Its the space between lines of text. Negative values are not allowed.

*GO TO BOTTOM OF PAGE TO SEE ACTUAL HTML RESULTS ON THIS SITE

REFERENCES:
Defined: http://www.w3schools.com
Live Test Examples: http://www.w3schools.com
Line Height Calculator: http://www.pearsonified.com/typography/

VALUES:
line-height: normal|number|length|initial|inherit;

normal:  A normal line height. This is default
number: A number multiplied with current font size
length: A fixed line height in px, pt, cm, etc.
%:         A line height in percent of the current font size
initial:    Sets this property to its default value.
inherit:   Inherits this property from its parent element.

CSS EXAMPLE:
Examples to specify the space between the lines in two paragraphs using pixel, number or percent values:

p.small
     {line-height: 10px;}
     {line-height: 0.5;}
     {line-height: 90%;}

p.big 

     {line-height: 30px;}

     {line-height: 2;}

     {line-height: 200%;}

MY RESULTS:
1=100%, slightly less than normal
normal=120%
150% (adds a bit more space to normal)
2= 200% (slightly more than 25 px) big space
3=double spaced
4=large space

GOLDEN RATIO: (copied content)
The CSS property 'line-height' actually accepts a pure numerical value, which will work out the line height based on the font size set. If you want to use the golden ratio (1.61803399), then you could set this as the line height in the body.

body {font: 100%/1.618 sans-serif;}
h1 {font-size: 24px; line-height: 39px;}

Formula: FS (24) * GR 1.61803399 = LH (38.832 or 39)

As an example, setting a H1's font-size to 24px would produce a line-height of 39px (rounded up from 38.832).

As it turns out, the golden ratio provides us with a guide—a formula—for proper typesetting. Because of this, we can now set our type with absolute certainty in any situation! Better still, we can use this information about typography to make more informed decisions about all the spatial aspects of our designs, such as:

*The amount of whitespace that appears after each paragraph
*Padding, margins, and other units of whitespace throughout the design
*Headline line-heights in a given width
*Any and all spatial properties that you wish to relate mathematically

The power of golden ratio typography cannot be understated. By choosing the line-height of your primary text as your new “baseline unit”, you are effectively tying all the dimensions of your layout together with the golden ratio.

MY HTML LINE HEIGHT COMPARISON CHART
-----------------------------------------------
THE CSS:
p.small_num1 {line-height: 1;}
p.small_100 {line-height: 100%;}
p.norm_110 {line-height: 110%;}
p.norm_120 {line-height: 120%;}
p.med_150 {line-height: 150%;}
p.big_25px {line-height: 25px;}
p.big_num2 {line-height: 2;}
p.big_200 {line-height: 200%;}
p.double_3 {line-height: 3;}
p.large_4 {line-height: 4;}

THE HTML
style="line-height: ;"

<p class="small_num1" >1 SMALL #1 <br>
1 This is a paragraph with a line-height.<br>
1 This is a paragraph with a line-height.<br>
1 This is a paragraph with a line-height.<br>
</p>
<p class="small_100">1 SMALL 100% <br>
% This is a paragraph with a line-height.<br>
% This is a paragraph with a line-height.<br>
% This is a paragraph with a line-height.<br>
</p>
<p>2 NORMAL DEFAULT <br>
default browser line height <br>
default browser line height <br>
default browser line height <br>
</p>
<p class="norm_110">2 NORMAL 110% <br>
% The default line height in most browsers is about 110% to 120%.<br>
% This is a paragraph with a standard line-height.<br>
% This is a paragraph with a standard line-height.<br>
</p>
<p class="norm_120">2 NORMAL 120% <br>
% The default line height in most browsers is about 110% to 120%.<br>
% This is a paragraph with a standard line-height.<br>
% This is a paragraph with a standard line-height.<br>
</p>
<p class="med_150">3 MED 150% <br>
% This is a paragraph with a line-height.<br>
% This is a paragraph with a line-height.<br>
% This is a paragraph with a line-height.<br>
</p>
<p class="big_25px">4 BIGGER 25px <br>
px This is a paragraph with a line-height.<br>
px This is a paragraph with a line-height.<br>
px This is a paragraph with a line-height.<br>
</p>
<p class="big_num2">4 BIGGER #2 <br>
# This is a paragraph with a line-height.<br>
# This is a paragraph with a line-height.<br>
# This is a paragraph with a line-height.<br>
</p>
<p class="big_200">4 BIGGER 200% <br>
% This is a paragraph with a line-height.<br>
% This is a paragraph with a line-height.<br>
% This is a paragraph with a line-height.<br>
</p>
<p class="double_3">5 DOUBLE SPACE #3 <br>
# This is a paragraph with a line-height.<br>
# This is a paragraph with a line-height.<br>
# This is a paragraph with a line-height.<br>
</p>
<p class="large_4">6 LARGE SPACE #4 <br>
# This is a paragraph with a line-height.<br>
# This is a paragraph with a line-height.<br>
# This is a paragraph with a line-height.<br>
</p>

THE RESULTS

1 SMALL #1
1 This is a paragraph with a line-height.
1 This is a paragraph with a line-height.
1 This is a paragraph with a line-height.

1 SMALL 100%
% This is a paragraph with a line-height.
% This is a paragraph with a line-height.
% This is a paragraph with a line-height.

2 NORMAL DEFAULT
default browser line height
default browser line height
default browser line height

2 NORMAL 110%
% The default line height in most browsers is about 110% to 120%.
% This is a paragraph with a standard line-height.
% This is a paragraph with a standard line-height.

2 NORMAL 120%
% The default line height in most browsers is about 110% to 120%.
% This is a paragraph with a standard line-height.
% This is a paragraph with a standard line-height.

3 MED 150%
% This is a paragraph with a line-height.
% This is a paragraph with a line-height.
% This is a paragraph with a line-height.

4 BIGGER 25px
px This is a paragraph with a line-height.
px This is a paragraph with a line-height.
px This is a paragraph with a line-height.

4 BIGGER #2
# This is a paragraph with a line-height.
# This is a paragraph with a line-height.
# This is a paragraph with a line-height.

4 BIGGER 200%
% This is a paragraph with a line-height.
% This is a paragraph with a line-height.
% This is a paragraph with a line-height.

5 DOUBLE SPACE #3
# This is a paragraph with a line-height.
# This is a paragraph with a line-height.
# This is a paragraph with a line-height.

6 LARGE SPACE #4
# This is a paragraph with a line-height.
# This is a paragraph with a line-height.
# This is a paragraph with a line-height.