📜 ⬆️ ⬇️

Table of the values ​​of indents from letters to the top and bottom of the line

I bring to your attention a table of values ​​of indents from letters to the top and bottom of the line, for the standard value of line-height.
This table is needed to accurately determine the padding or margin of the framing or nearby elements.

Here is a picture legend to make it clear:
legend


Over time, the most popular combinations are remembered and you do not need to watch the value every time.
')
A simple example:

example
  1. The title is typed in Tahoma, 24px in size. We look at the table, the distance from the top of the small letter to the top of the line is 11px.
  2. Further, with the help of a ruler, we measure the value from the top of a small letter, to the upper border of the block - 33px.
  3. Find the difference of values, we get 22px. So, the top padding block is 22px.
  4. Or, if for the body we have a font size of 75%, then the top padding will be equal to 22/12 = 1.833em.

Includes values ​​for fonts ranging in size from 8px to 50px:

Table here

PS Yes, I know that now there is a Pixel Perfect.

Source: https://habr.com/ru/post/40060/


All Articles