I must override the body style of my page:
body{ font-size:14px; line-height:20px; } override:
body{ font-size:100%; line-height:?????; } What is the defualt value of line-height property if I specified font-size:100% ?
Is there a strict relation between this properties ?
5 Answers
The default line-height is normal, so use:
body { font-size: 100%; line-height: normal; } FYI, you can confirm this if you have Chrome by opening up a website, inspecting the <body> element and viewing the inherited computed styles.
Set a unitless value of 1, which will multiply the calculated font-size (i.e. how big the font turns out to be) with 1, making for a high-enough line-height.
You can also use 1.5 for a little more spacing.
So to finish your code it would be
body{ font-size:100%; line-height: 1.5; } See the part on at for more details. Using a unitless number is stated as the preferred way of setting line-height.
1Values
normalDepends on the user agent. Desktop browsers (including Firefox) use a default value of roughly
1.2, depending on the element'sfont-family....
The default line height is roughly ~1.1em (see here).
You can change the relationship between the line-height and the font-size however, using for example:
body { font: 100%/1.618; } To take a more in depth look at the relationship between line-height and font-size, a good place to start would be:
You can use relative line-height
If your original sizes have been font-size:14px; and line-height:20px; and you want to keep the same proportions you can use 1 * (20/14) em so line-height:1.42em;
body{ font-size:100%; line-height:1.42em; } 
