How to work with line height while coding perfect pixel design

Question

Here is a screenshot of the sample design I made:

Between the bottom of the letters and the red line is a 10px space. I am trying to reproduce this with the following code:

font: normal 40px arial; border-bottom: 3px solid red; padding-bottom: 10px; 

Technically, this code should give me exactly what I want. But this is not so. Here is a screenshot of this in action in Chrome:

Due to the height of the line between the text and the border, there is additional space. Here's a screenshot taken in Chrome:

When I take my time and measure the space under the letters caused by the height of the line, I see this 9px empty area. So, to get 10px of space between the text and the border, I need to change my code to:

 padding-bottom: 1px; 

The solution to this could be to add the line-height property with the amount of exact text height in the design file. But then it will ruin if the text contains several lines.

What is the best approach to achieve perfect pixel design conversion?

Answer 1

In HTML, there is no way to specify the interval between the base text base and the border. To understand this, see this picture:

The height of the HTML text always includes both the header area and the handle area, even in cases where there are no letters with a top or bottom. Therefore, the actual distance between the bottom of the text and the border in your example is not 10px.

To get the correct distance from the bottom of the text in pixels, change the text so that it contains the letter with the descender (for example, Hellp, Worly) and measures the space between the lower descriptors and the red line.

Alternatively, if you are trying to recreate an image and cannot change the text, measure the text height / point size ratio of the font used with a paint application (such as Inkscape), and then calculate the distance as follows:

css distance = baseline distance - (point size * (1 - ratio))

Answer 2

The main spacing below and above a character (glyph) is determined by the font designer. For example, in Arial space exists below and above the normal upper case letters, such as "H", even if the text is set to continuous ( line-height: 1 ). When line-height greater than 1, there are additional intervals lower and higher. Even for line-height less than 1 (i.e., with a "negative lead"), there may be some interval. And any add that you install adds to that.

If you know the exact text that appears in the content (and it never changes), and if you rely on a specific font that is always available (which is very likely, but not necessary, for the Arial font), then you can run some experiments and iterate until you find the appropriate line-height value. In this particular case, line-height: 0.82 will remove the spacing over the capital letters AZ (but any diacritical marks on them, like in É or Å, will be cut off) and reduce the interval below the baseline (but if the letters have descenders like in "j" or "þ", then they will be partially cut off).

Pixel optimization may still be affected by differences in font rendering (e.g., anti-aliasing or not) in browsers.