How to convert line-hight unit to unitless?

HTML & CSS
1

I’ve read article about “Line-height” in CSS and “Leading” in Photshop and I known how to convert leading to line-height. But in this article it just says about unit (px, em,…), for example:

If your font size in your PSD file is 10px and your leading is set to 20px. Then you should put 20px for line-height in your style guides.

I want to know how to convert to unitless to use in line-height. Thank in advance.

2

With CSS you can declare a unitless line height, for example:

p { line-height: 1.5; }

Will display paragraph text with a line height of 1.5 times the inherited font size. So if your font size is 16px (or equivilent) the the line height will calculate to 24px.

3

Hi @bluedreamer

If line-hight is 10px, how can I convert to unitless.

4

You can set line height to use any valid unit as well 10px, 0.7em, 8pt etc…

If you want to set it as unitless but equivalent of 10px you will have to work out the maths against your font size. So

if your font-size is 10px you can set line height to 1
if your font-size is 20px your line height will be 0.5

5

As bluedreamer said a unitless line-height is based on the font-size of the parent element concerned so that you maintain a relationship between the parent and the font-size. It is a scaling factor that is also passed down to children so a child with a smaller font-size gets a smaller line-height (unlike line-heights with units which pass down an actual computed px line-height to the children so a child with a small font-size will still get the larger line-height of the parent).

You would rarely set a line-height of 10px anyway as that would be smaller than the font-size in most cases and indeed on the web you really don’t want text smaller than 10px anyway (unless its a special effect that doesn’t need to be read).

6

Thank for useful information. I’ll try and ask you again if I have problems.

7

As you said, I just need to apply line-height to the parent. I’m using Bootstrap 3, so my body tag like this:

body {
    background-color: #FFFFFF;
    color: #333333;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
}

That mean I don’t need to add new line-height value for the child elements, is it right?

8

Yes that means that children will get a line-height of 1.4287 times whatever their font-size is. (I would use 1.4 or 1.43 and avoid long decimal numbers as browsers round up or down to the nearest pixel anyway.)

9

Thank you for useful information. I’ll remove line-height of child elements. You’re the best :slight_smile:

10

But sometime you should add line-height to child elements base on layout.

11

Obviously if you want to change the default that you set then you can change it as required. Your design may call for small text with a large line-height so change it to suit the design but generally you would want the ratio of text to line-height to be consistent.

I generally also set the line-height of heading tags (h1- h6) to make sure UA defaults don’t get in the way.

There is never a “one size fits all” approach as situations differ.:slight_smile:

12

I agree with you. I just set font-size for heading tags. Thank you again,