Leading vs line-height

Question

I have the following problem in converting a layout, I have a list of names that has the following property (in the image below):

I found some formulas like this Line-height = Font-size + Leading/2, but when determining line-height in css, the distance is not as it is in the layout drawn in my case, in Illustrator.

Here’s an image I found useful in understanding:

Another question would be where to apply line-height, in the case of a list of names, I would apply in ul, li or a?

Differences:

Answer 1

In your last doubt I believe the differences in the application of line-height will depend a lot on the rest of your layout. See this example:

ul#lista1{
  line-height: 40px;
}
ul#lista2 li{
  line-height: 40px;
}

<ul id="lista1">
  <li><a>Nomes</a></li>
  <li><a>Nomes</a></li>
  <li><a>Nomes</a></li>
</ul>
<hr>
<ul id="lista2">
  <li><a>Nomes</a></li>
  <li><a>Nomes</a></li>
  <li><a>Nomes</a></li>
</ul>

You can see that there are no differences with your application. And this repeats even when there is line break.

Already, when to the<a>I believe that it is not necessary to apply in it, if it is in the above model, inside the li. If you are away, we could already consider this assignment.

When I want to center a text vertically, (when using line-height), I assign it a value equal to the height of the parent element.

Another formula I found is, when we don’t know the size of the element, we use this:

That’s right! Multiply the font-size by the gold number, the Phi.

In some tests it worked perfectly:

ul,li{
  margin: 5px 0;
  padding: 0;
}
ul#lista1{
  line-height: 40px;
}
ul#lista2 li{
  font-size: 20px;
  line-height: 32.36px;
  background: gold
}

<ul id="lista1">
  <li>Nomes </li>
  <li>Nomes</li>
  <li>Nomes</li>
</ul>
<hr>
<ul id="lista2">
  <li>Nomes</li>
  <li>Nomes</li>
  <li>Nomes</li>
  <li>Nomes</li>
</ul>

In the case of the second list, li received a line-height: 32.36px (20 * 1,618, approximately). And it was perfectly centralized. But this is a very specific case, used for good milking, I added because I found it very interesting.

Margins may also be used and paddings, but as opted for a reset...

Commonly, CSS uses what is known as half-leading to set text lines. This is determined by working the difference between the line-height and the font-size, dividing by 2, and then placing the calculated amount of space above and below each line of text. So if you have a font-size 16px and a line-height of 24px, the half-leading perfect would be 4px. Here is the process:

24px − 16px = 8px

8px ÷ 2 = 4px

The above example is a broad view of its formula.

That fiddle shows the use of the unit em. Which I explain a little here.

But again, this is all very relative, and I just hope it helped. And I agree with Gilherme Lopes, take a look at Illustrator’s css exports, can really help you.

Source