Line height and containing box height calculation
Please can you provide more information how default line height (and its containing box height) is being calculated?
This will be very helpful for me to be able to create plugin which can automatically create pixel perfect html.
I assume font metrics are used for it. For example:
Helvetica Neue Regular:
Em Size = 1000
Win Ascent = Typo Ascent = HHead Ascent = 952
Win Descent = Typo Descent = HHead Descent = ( - ) 213
Typo Line Gap = HHead Line Gap = 28
Line Height Coefficient = (952 + 213 + 28) / 1000 = 1.193
Using this coefficient I get following Line heights (last two columns are obtained from Adobe XD using Point Text):
| Font size | Coefficient | Line Height | Line Height Rounded | XD Line Height | XD Container Height |
| 1 | 1.193 | 1.193 | 1 | 1 | 2 |
| 2 | 1.193 | 2.386 | 2 | 2 | 3 |
| 3 | 1.193 | 3.579 | 4 | 4 | 4 |
| 4 | 1.193 | 4.772 | 5 | 5 | 5 |
| 5 | 1.193 | 5.965 | 6 | 6 | 6 |
| 6 | 1.193 | 7.158 | 7 | 7 | 7 |
| 7 | 1.193 | 8.351 | 8 | 8 | 8 |
| 8 | 1.193 | 9.544 | 10 | 10 | 10 |
| 9 | 1.193 | 10.737 | 11 | 11 | 11 |
| 10 | 1.193 | 11.93 | 12 | 12 | 12 |
| 11 | 1.193 | 13.123 | 13 | 12 | 12 |
| 12 | 1.193 | 14.316 | 14 | 14 | 14 |
| 13 | 1.193 | 15.509 | 16 | 15 | 15 |
| 14 | 1.193 | 16.702 | 17 | 16 | 16 |
| 15 | 1.193 | 17.895 | 18 | 17 | 17 |
| 16 | 1.193 | 19.088 | 19 | 18 | 18 |
| 17 | 1.193 | 20.281 | 20 | 20 | 20 |
| 18 | 1.193 | 21.474 | 21 | 22 | 21 |
| 19 | 1.193 | 22.667 | 23 | 23 | 22 |
| 20 | 1.193 | 23.86 | 24 | 24 | 23 |
| 21 | 1.193 | 25.053 | 25 | 25 | 24 |
| 22 | 1.193 | 26.246 | 26 | 27 | 26 |
| 23 | 1.193 | 27.439 | 27 | 28 | 27 |
| 24 | 1.193 | 28.632 | 29 | 29 | 28 |
| 25 | 1.193 | 29.825 | 30 | 30 | 29 |
| 26 | 1.193 | 31.018 | 31 | 32 | 31 |
| 27 | 1.193 | 32.211 | 32 | 33 | 32 |
| 28 | 1.193 | 33.404 | 33 | 34 | 33 |
| 29 | 1.193 | 34.597 | 35 | 35 | 34 |
| 30 | 1.193 | 35.79 | 36 | 36 | 35 |
| 100 | 1.193 | 119.3 | 119 | 119 | 116 |
| 1000 | 1.193 | 1193 | 1193 | 1193 | 1165 |
As you can see there are discrepancies highlighted in bold.
1. My line height calculations are different very slightly on few places. Is it result of incorrectly calculated coefficient or is it rounding issue?
2. Containing box size is smaller than line height (I and others will assume it will be about the size of line height), why is it so? Number 1165 for 1000pt font size indicate Ascent + Descent is used for its calculation but even when I used coefficient 1.165 to calculate containing box there ware few differences...
It will be very helpful if you can provide formula or guide how those two are being calculated.
Thank you,
Julius
AdChoices