How to count indents in typography on the web?

Question

HTML

How, after all, should a designer focus on indentation when working with typography?
Always adhered to the approach in which the indent is considered from the baseline of the font. But when I moved to another company, frontend developers here ask to present the text in the form of a rectangle, the height of which is equal to: leading - font size + height of the text line from the top descender to the bottom descender. Is this approach more professional, or is it not so important when making layout?

Answer 1

Both examples in the screenshot in the question are incorrect. Indents must be counted from one baseline to another baseline. We smoke https://material.io/design/typography/understandin...
To do this, we place a baseline grid - a regular grid (square or lowercase) - and put all the texts into it - so that the baselines are strictly on the horizontal guides of the grid.
The program will do the rest (I recommend Figma). The text box may well not fit into the baseline grid, the main thing is the text itself, optically. Coders will already start from the perimeters of textboxes.

Answer 2

Like for "bdirector") The second approach is more correct, but fooling around longer. If you stick to the first method, then your blocks will be 30-40 pixels. more than necessary for the layout, due to not taking into account line-height and due to different rendering of elements in different browsers. I judge this from the point of view of layout designers, although it is more difficult to typeset like this, because you need to calculate the indents manually. But if there is text on several lines and line-height is important, then this second method is correct, since this property is worth considering.