September 30, 2013 at 7:37 am #151688
Is it right? what does 1.2 mean?September 30, 2013 at 8:00 am #151691
This reply has been reported for inappropriate content.
1.2 x of font size (height), so if font size is 14px with line height of 1.2 that one line of text will be approximately 17px tall. For good readability I would use no less than 1.5 line height.September 30, 2013 at 8:22 am #151693
To expand on what was correctly said above:
Unitless line-height (line-height:1.2) differs from line-height with units (line-height:1.2em etc) in that it is the “scaling factor of 1.2” that is passed down to children so a child will get 1.2 times the line-height of its own font-size.
On the other hand a line-height with a unit is converted by the browser into a fixed pixel value and it is this pixel-value that gets handed down to the child even if the child has a smaller line-height (unless you re-define line-height for the child of course).
As an example a parent with a font-size of 20px will get a line-height of 24px if line-height:1.2 was used. The same holds true if the parent was given a line-height of 1.2em. Both would get a line-height of 24px.
However, if a child of those parents has a font-size: of 10px then the line-height will be 12px and 24px respectively. 12px where the parent has a unit-less line-height and 24px where the parent’s line-height was stated with a unit.
It can therefore be seen that the difference can be considerable.
Unit-less line-heights can lead to layouts that perform better as the relationship is maintained with the font-size of the children.September 30, 2013 at 8:08 pm #151758
Thanks a lot
You must be logged in to reply to this topic.