To clarify a little :)
If you change the font-size from 12px to 14px then the 1.4em will automatically increase the line-height to match the larger text.
e.g.
em (or percentage line-height:)
12px/1.4em = 12 x 1.4 = 16.8px line-height (probably rounded up to 17px)
14px/1.4em = 14 x 1.4 = 19.6px line-height (probably rounded up to 20px)
So you need do nothing extra to the line-height to maintain that relationship.
If we use unitless line height as mentioned by drhowarddrfine above then the same is exactly true for the body element.
unitless line-height:
12px/1.4 = 12 x 1.4 = 16.8px line-height (probably rounded up to 17px)
14px/1.4 = 14 x 1.4 = 19.6px line-height (probably rounded up to 20px)
There is absolutely no difference between the two methods as far as the body element is concerned.
The difference occurs on nested elements that have a different font-size. If for example you have a p element inside the body at a smaller font-size then the line-height will be treated as follows:
Unit values:
For em/%/px line-height on the body the value of the line height is calculated and gets a computed pixel value (20px for the 14px font-size as in the example. This value is called a computed value and it is this exact 20px that is passed down to all elements in the page regardless of their font-size. If you have 40px text the lines will be too small to hold the text unless you change the line-height.
Unitless line-heigt:
For unitless line-height on the other hand the value is a multiplier and this
multiplier is handed down to the childrenand not the exact computed pixel value. Therefore if an element inside the body has a 40px font-size then the line-height will be 1.4 times that font-size and so fit nicely.
This can be seen nicely in this small demo:
Unitless line-height:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { font: 24px/4 arial, sans-serif }
p { margin:0; }
div, p { border-bottom:1px solid red }
p { font-size:12px }
</style>
</head>
<body>
<div>I am 24px</div>
<div>I am 24px</div>
<div>I am 24px</div>
<div>I am 24px</div>
<p>I am 12px</p>
<p>I am 12px</p>
<p>I am 12px</p>
<p>I am 12px</p>
<p>I am 12px</p>
</body>
</html>
Line-height with a value:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { font: 24px/4em arial, sans-serif }
p { margin:0; }
div, p { border-bottom:1px solid red }
p { font-size:12px }
</style>
</head>
<body>
<div>I am 24px</div>
<div>I am 24px</div>
<div>I am 24px</div>
<div>I am 24px</div>
<p>I am 12px</p>
<p>I am 12px</p>
<p>I am 12px</p>
<p>I am 12px</p>
<p>I am 12px</p>
</body>
</html>
The difference is considerable.
