Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Calculate line-height with font in rem-value

Tags:

html

css

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

like image 485
jan199674 Avatar asked Jan 27 '14 11:01

jan199674


2 Answers

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.

like image 84
Hashem Qolami Avatar answered Oct 18 '22 20:10

Hashem Qolami


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 */
}
like image 35
NoobEditor Avatar answered Oct 18 '22 21:10

NoobEditor