How to deal with line-height while coding a pixel perfect design

Question

Here is a screenshot of the example design I made up:

There is a 10px space between the bottom of the letters and the red line. I'm trying to replicate 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 it doesn't. Here is a screenshot of it in action in Chrome:

Because of the line height, there's extra space between the text and the border. Here's an inspected screenshot on Chrome:

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

padding-bottom: 1px;

A solution to this might be adding a line-height property with amount of the text's exact height in the design file. But then, it'll mess up if the text includes multiple lines.

What is the best approach here to accomplish the pixel perfect design conversion?

Answer 1

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

The height of HTML text always includes both the ascender area and the descender area, even in cases when there are no letters with a descender or an ascender. Therefore the real 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 text in pixels, change the text so that it contains a letter with a descender (e.g. Hellp, Worly") and measure the space between the bottoms of descenders and the red line.

Alternatively, if you are trying to recreate a picture and can't change the text, measure the ratio text height / point size of the used font using a drawing application (e.g. Inkscape), then calculate the distance as follows:

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