How to correctly measure the distance from a font to a font/block during layout? Is there a pattern?

Question

css

Hello. A question. Are there clear rules by which the layout can measure the exact distance from the font to the font / block? When working with fonts, you constantly have to adjust the difference in distances by eye, and, frankly, this is frankly annoying, it takes a lot of time. In Photoshop / Avocode, font sizes and line heights are prescribed, they have always been taught to subtract the first from the second, divide by two, and that seems to be the difference that needs to be taken into account, but in practice it still gives an error.
Example.

The avocode shows padding-top: 55px.
font-size: 26px;
line-height: 46px;
In theory, the padding should be calculated like this: 55 - (46-26) / 2 = 45px.
This results in padding-top: 42px if adjusted to fit the layout.
Is there a more accurate way to measure distances?

Answer 1

I am a designer, not a typesetter, but I am aware of the circus with gypsies in the indentation of fonts. Unfortunately, wrapping text in a frame differs not only between a graphical editor and a browser, but also between different graphical editors...
Oh, what a pain in the butt :( Personally, I measure from the baseline. And I recommend that all layout designers do the same. I have a certain grid in my layout (I used to use a regular grid, now I use horizontal rulers) + a pixel grid - you turn them on in the layout (if, of course, they are laid there ...) and you can calculate the distances by eye.

Answer 2

In Photoshop / Avocode, font sizes and line heights are prescribed, they always taught to subtract the first from the second, divide by two, and that's the difference that needs to be taken into account, but in practice it still gives an error.

Yes, there will be an error, because the actual height of the letters is not equal to font-size, it is smaller. And font-size is the size of the skittle area, that is, including the margin for all sorts of extensions ( shoulders ). Actual letter height varies from font to font, but on average across a hospital, capital and small letters can roughly be taken as 70% and 50% of font-size, respectively. If you want absolute accuracy, you can use special tools to find out these values ​​for a particular font.
But in general, it’s time for these calculations to sink into oblivion, because FS (with its inconvenient text management for a layout designer) is leaving the web design scene. In new applications like Figma and Sketch, there is no such problem, where the height of the text container is equal to line-height, so there is no need to calculate anything - how much indentation there is, we do so much.
And on my own, I strongly advise you to understand typography well. On the one hand, your pedantry and desire to understand the nuances are commendable, but on the other, large gaps in theory are felt.