When I apply the size of a font through font-size , I always wonder if I should use line-height as well. For the font and line have the same size.
Well, let's face it, it's annoying to hit margin and padding if line-height does not agree.
I mean more specific fonts, non-standard Windows fonts. Where I use font-face .
Do you do something similar?
As much as browsers tend to behave as standard behavior, line-height says that the normal recommended parameter is from 1.0 to 1.2 , meaning it can vary from browser to browser significantly.
In other words, it's always good to determine line-height to make your pages appear consistent.
What you can take into account is that when you specify the source using the font composite syntax, you can simplify it by using only one slash, not requiring a separate explicit line-height x directive:
h1 { font: 26px/30px sans-serif }
h2 { font: 20px/20px sans-serif }
p { font: 12px/1.5 sans-serif }
In this case, we specify that the source of <p> is 12px tall, and line-height is equivalent to a 1.5 spacing, ie, it will result in 18px. Since <h1> is 26px in height, and 30px in line-height , just as <h2> will have 20px both height and distance between one line and another. Thus, there is no need for the line-height directive to be separated in any case.
It is interesting to note that line-height is one of the properties that accepts a non-unit numeric value, just as we did with font above. To specify a 2 spacing, just use this:
p { line-height: 2 }
So the line will be twice the height of the font.
Further reading: Why it is recommended to use the drive "em" instead of "px" to fonts?