CODEWITHSUNDEEP
css
grigno
grigno

Reputation: 3198

Line height default value if font size is 100%

I must override the body style of my page:

body{
    font-size:14px;
    line-height:20px;
}

override:

body{
    font-size:100%;
    line-height:?????;
}

What is the defualt value of line-height property if I specified font-size:100% ?

Is there a strict relation between this properties ?

Upvotes: 24

Views: 32097

Answers (6)

Nurul Islam
Nurul Islam

Reputation: 53

// default line-height will be 25px

body{
font-size:100%;
line-height:25px;
}

Upvotes: 0

Nabil Kadimi
Nabil Kadimi

Reputation: 10394

Values

normal

Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.

...

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Values

Upvotes: 6

Bernie
Bernie

Reputation: 1489

The default line height is roughly ~1.1em (see here).

You can change the relationship between the line-height and the font-size however, using for example:

body {
    font: 100%/1.618;
}

To take a more in depth look at the relationship between line-height and font-size, a good place to start would be:
http://demosthenes.info/blog/606/Molten-Leading-Exploring-The-CSS-Relationship-Between-Font-Size-Line-Height-and-Margin

Upvotes: 3

Arbel
Arbel

Reputation: 30999

You can use relative line-height

If your original sizes have been font-size:14px; and line-height:20px; and you want to keep the same proportions you can use 1 * (20/14) em so line-height:1.42em;

body{
    font-size:100%;
    line-height:1.42em;
}

Upvotes: 1

Willem Mulder
Willem Mulder

Reputation: 13994

Set a unitless value of 1, which will multiply the calculated font-size (i.e. how big the font turns out to be) with 1, making for a high-enough line-height.

You can also use 1.5 for a little more spacing.

So to finish your code it would be

body{
  font-size:100%;
  line-height: 1.5;
}

See the part on at https://developer.mozilla.org/en-US/docs/CSS/line-height for more details. Using a unitless number is stated as the preferred way of setting line-height.

Upvotes: 10

Daniel Imms
Daniel Imms

Reputation: 50189

The default line-height is normal, so use:

body {
    font-size: 100%;
    line-height: normal;
}

FYI, you can confirm this if you have Chrome by opening up a website, inspecting the <body> element and viewing the inherited computed styles.

Upvotes: 41

Related Questions