I must override the body style of my page:
body{
font-size:14px;
line-height:20px;
}
override:
body{
font-size:
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;
}
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:
http://demosthenes.info/blog/606/Molten-Leading-Exploring-The-CSS-Relationship-Between-Font-Size-Line-Height-and-Margin
Values
normal
Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly
1.2
, depending on the element'sfont-family
....
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Values
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 https://developer.mozilla.org/en-US/docs/CSS/line-height for more details. Using a unitless number is stated as the preferred way of setting line-height.