Leading vs line-height

Question

Leading vs line-height

Navigation

#1 by (2 votes)

3

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

IfoundsomeformulaslikethisLine-height=Font-size+Leading/2,butwhendeterminingthelineheightincss,thedistancedoesnotstayasitisinthelayoutdrawninmycaseinIllustrator.

HereisanimageIfoundhelpfulinunderstanding:

Anotherquestionwouldbewheretoapplyline-height,incaseofalistofnames,wouldIapplyinul,li,ora?

Differences:

css layout

asked by anonymous 21.01.2016 / 18:23

1 answer

footer tag at the browser border How do I change the width of the columns in the Admin listing in Django?

score 2 · Accepted Answer

In your last question I believe the differences in the application of line-height will depend a lot on the rest of your layout. Here's an 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 may notice that there are no differences in relation to your application. And this repeats even when there is a line break.

Already, when <a> creates that application is not necessary in it, if it is in the model above, within li . If it is out, 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 are not aware of the element size, we use this:

That'sright!Multiplythefont-sizebythenumberofgold,thephi.

Insometestsitworkedperfectly:

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, the 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 readability, I added because I found it very interesting.

You can also use margins and paddings , but you have opted for a reset ...

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

24px − 16px = 8px

8px ÷ 2 = 4px

The above example is a broad view of your formula.

This fiddle shows the use of the font-size drive. To which I explain a little here .

But again, this is all very relative, I just hope it helped. And I agree with Gilherme Lopes, take a look at illustrator css exports, it might really help.

Font