Place line-height of same font-size size

Question

When I apply the size of a font through the font-size, I always wonder if I should use line-height also. For the font and line have the same size. Yeah, let’s face it, it gets boring to hit margin and padding if the line-height does not agree.

I refer more to specific fonts, those that are not Windows standards. Where I use the font-face.

You do something similar?

Answer 1

Although browsers tend to have a behavior considered standard, the specification of line-height says that the parameter normal recommended is to 1.0 to 1.2, that is, it can vary from browser to browser significantly.

In other words, it is always good to determine the line-height so that the presentation of your pages is consistent.

What you can take into account is that when you specify the source using the compound syntax font, can simplify using only one bar, not needing a directive line-height separately explicit:

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 high, and the line-height equals a 1.5 spacing, ie will result in 18px. Already the <h1> is 26px high, and 30px line-height, as well as the <h2> will have 20px both height and distance between one line and another. Thus, there is no need for directive line-height separate in either case.

Interestingly, the line-height is one of the properties that accepts a numerical value without unit, just as we did with the font above. To specify a spacing 2, just use this way:

p  { line-height: 2 }

So the line will be twice the height of the source.

Further reading:
Why it is recommended to use the "em" unit instead of "px" for fonts?