CODEWITHSUNDEEP
htmlcss
jan199674
jan199674

Reputation: 753

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

Upvotes: 11

Views: 32185

Answers (3)

Hashem Qolami
Hashem Qolami

Reputation: 99484

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>

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.

Upvotes: 15

NoobEditor
NoobEditor

Reputation: 15891

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

Upvotes: 0

Moorthy GK
Moorthy GK

Reputation: 1301

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;

Upvotes: -1

Related Questions