CODEWITHSUNDEEP
css
user2884331
user2884331

Reputation: 11

CSS Font declaration using Percentages and Fractions?

body {
    font: 90%/1.6 baskerville, palatino, 'palatino linotype', georgia,serif;
}

I'm trying to grasp the concept of what "90%/1.6" is doing in this declaration. I understand that the 90% is requesting to show 90% of the viewport, but not sure how the 1.6 is affecting this and why it's needed.

Any help greatly appreciated.

Upvotes: 1

Views: 118

Answers (1)

David
David

Reputation: 1050

Answer

As @DarrenKopp commented:

font: 90%/1.6

is shorthand for:

font-size: 90%
line-height: 1.6

Which means that:

The font-size is 90% of that of the parent element of ‘body’ (i.e. the ‘html’ element).

The line-height is this font-size multiplied by 1.6

Documentation and further explanation

This is documented in the CSS 2.1 Specification, section 15.8, Shorthand font property:

[ [ <'font-style'> || <'font-variant'> || <'font-weight'>]? **<'font-size'>** [ **/ <'line-height'>**]? <'font-family'>] | caption | icon | menu | message-box | small-caption | status-bar | inherit

The most pertinent example in that section is:

p { font: normal small-caps 120%/120% fantasy }

which explains font-size:

…the 'font-size' (120% of the parent's font), the 'line-height' (120% times the font size…)

Consulting the section on line-height reveals that this can be expressed as: 

normal | <number>| <length> | <percentage> | inherit

And explains number as:

The used value of the property is this number multiplied by the element's font size

Upvotes: 1

Related Questions