Calculate line-height with font in rem-value
css, html
Solution
Well, in my opinion, all these (`<number> | <length> em | <percentage>`) relative measures might be appropriate for `line-height` property.
`<number>` The used value is this unitless `<number>` multiplied by the element's font size. The computed value is the same as the specified `<number>`. In most cases this is the preferred way to set line-height with no unexpected results in case of inheritance.
`<length>` The specified `<length>` is used in the calculation of the line box height.
`<percentage>` Relative to the font size of the element itself. The computed value is this percentage multiplied by the element's computed font size. Percentage and em values may have unexpected results.
- MDN reference
The difference between `number` and `percentage` or `em`:
According to MDN doc, this unitless number multiplied by element's own `font-size` (Also for each children of the current element).
While using `percentage` or `em` for a parent element, causes the children to obey from their parent's computed `line-height`.
Check this demo to see the issue in action.
Putting all together
In this case, all these values have the same effect:
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.3; /* = 1.3 * computed font-size */
line-height: 130%; /* = 1.3 * computed font-size */
line-height: 1.3em; /* = 1.3 * computed font-size */
}
But to if you want to calculate the line-height value in `rem` unit, you can use the following:
html {
font-size: 62.5%; /* ~10px = 16px(default) * 0.625 */
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.3; /* as fallback */
/* value = (10px * 1.4 * 1.3) / 10px = 1.82rem
| | |
<html> | | --> line-height multiplier (same as <number>)
font-size <-- |
in px --> Current element's font-size ratio
*/
line-height: 1.82rem;
}
span { background-color: gold; } /* for demo */
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consectetur quis omnis repellat voluptates necessitatibus repellendus
sapiente nesciunt vero dolorem voluptate mollitia ex a quo consequuntur
quia quasi aperiam quibusdam maiores.</span></p>
FYI: The default value of `font-size` of `<html>` is `16px` in most web browsers, however it doesn't make any changes into our calculations.
JSBin Demo.
Problem
How can i calculate the most suitable line-height for font-size set with rem? For example: ``` html { font-size: 62.5%; } p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-size: 1.4rem; line-height: 1.3; /* how do i calculate this value? */ } ``` The reason i asked the question is that im a puzzled how to understand the relationship between font-size in body (for easy rem calculation), actual rem font-size and the "non-value" in line-height which as far as i understand in a STATIC layout represents font-size like: `font-size: 20px;` and `line-height: 2.0;` - will add height of font-size as line-height In a fluid layout - when using rem in font-size - will the "non-value" line-height: 2.0; use height of font calculated in rem as line-height or still rely on the pixel-based value (which in the example is fallback for older browsers)? I think i should have put this is my original question - i'll edit now