I’m newbie in CSS and hardest pard (for me) that how to use line-height perfectly. How can I convert from px to em in line-height or how to combine them. Hope anyone give me some advices?
Hi,
It all depends on what you are trying to do exactly as in most cases you don’t have to do anything special as such.
Line-height is the space between lines of text and you just set them to suit the design and the size of the text. I usually just set a “unitless” line-height on the body of 1.4 and that will cascade down into the page as required. A unitless line-height (as opposed to em or px) passes a scaling factor down to the children and thus maintains the 1.4 relationship for all sizes of text in the document (there may be browser variances but in most cases is fine).
If you set a px line-height then you would usually base it on the size of the font and then add extra so that you have room around the text. e.g. if you have 14px high text you might want a 20px line-height.
If you are using em then you would usually use something between 1.3em and 1.5em for good readability.
Generally between 1.3 or 1.5 times the font size is a fair guess at a reasonable line height.
That mean I should set body line-height 1.4, dude? And how can I calculate line-height value?
If you set the body to line-height:1.4 (body{line-height:1.4}) then the value for the line-height will be 1.4 x whatever the default font-size is. Assuming a default of 16px (not guaranteed in the slightest as users may over-ride this) then the line height would be 1.4 x 16 = 22.4px which would most likely be rounded down to 24px.
The bigger question is why you want to know this value? What problem are you trying to overcome?
You don’t specifically need to know the value. You either set line-height at the value you want and then you know what it is exactly, or you use a multiplier (1.4), or percentage value (140% ( which is equivalent to 1.4em)) and based on the font-size of the element concerned.
If you have an example of where you are having a problem I might be able to give a more relevant answer to your problem.
I always go back and forth depending on my site. Sometimes I like a px line height then the space of the p and the h1 are the same. If you use unitless line height them the h1 would have a larger space above and below it usually.
Thanks for information because i watch some videos and don’t know how they can’t calculate line-height. I hope i can use as well with your advice 