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
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
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.
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.
First, i don't understand the idea of line-height
inside p
element, because the standard margin between 2 lines in a paragraph is always there by browsers default feature.The way you try to achieve it, it will only go on adding space in between two line
To give a solution,unless you go for media-query
there is no standard way because line-height
would work with the size
of font, so bigger the size of font, bigger the line-height....this is important to understand because you have set font-size
in relation to view port dimension => font-size: 1.4rem;
Read here how line-height
works : CSS - Line height property, how it works (simple)
EDIT
Editing after you commented,see the thing is, that if you give line-height
in your p
, it would add go on adding that to all lines inside p
...ifyou don't wanna go with media-queries and browser uniformity is your main concern, then you can do something like this :
p{
line-height: 1.2;
padding-top: 1% /*this will ensure that p has space from above */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With