# Calculate line-height with font in rem-value

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.

##### 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>

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 */
}

Please use to multiply your line height by 10 and use px for line height.

line-height: (1.3 * 10) + px;

at the same time u simply use line-height: 1.3rem;