Table of indent values from letters to the top and bottom of the line
I bring to your attention a table of values of indentation from letters to the top and bottom of the line, for the standard value of line-height.
This table is needed to pinpoint the padding or margin of the framing or nearby elements.
Here is a legend picture to make it clear what it is about:
Over time, the most popular combinations are remembered and you do not need to look at the value every time.
A simple example:
Includes values for fonts ranging in size from 8px to 50px:
The table is here.
PS Yes, I know that now there is a Pixel Perfect.
This table is needed to pinpoint the padding or margin of the framing or nearby elements.
Here is a legend picture to make it clear what it is about:
Over time, the most popular combinations are remembered and you do not need to look at the value every time.
A simple example:
- The title is in 24px Tahoma font. We look at the table, the distance from the top of the small letter to the top of the line is 11px.
- Next, using a ruler, measure the value from the top of the small letter to the upper border of the block - 33px.
- We find the difference in values, we get 22px. So the top padding of the block is 22px.
- Or, if we have set the font size to 75% for the body, then the upper padding will be 22/12 = 1.833em.
Includes values for fonts ranging in size from 8px to 50px:
- Arial
- Tahoma
- Verdana
- Arial narrow
- Trebuchet MS
- Georgia
- Times new roman
The table is here.
PS Yes, I know that now there is a Pixel Perfect.