Leading vs line-height

Asked

Viewed 224 times

3

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

inserir a descrição da imagem aqui

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:

inserir a descrição da imagem aqui

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:

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

css layout

  • Have you tested the spacing with paddings or margins? Usually the line-height applies to the element that contains text, in case the link.

  • @Guilhermelopes, I set all the same, is that the customer requires the "pixel Perfect", so I’m trying to hit the line-height

  • 1

    Have you ever looked at the css import part of Illustrator? Maybe you don’t even need to break your head to find line-height...

1 answer

2


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:

inserir a descrição da imagem aqui

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

Browser other questions tagged css layout

You are not signed in. Login or sign up in order to post.