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))

Answer 2

The basic spacing below and above a character (glyph) is defined by the font designer. For example, in Arial, there is space below and above an ordinary uppercase letter like “H” even when text is set solid (line-height: 1). When line-height is larger than 1, there is additional spacing below and above. Even for line-height smaller than 1 (i.e., with “negative leading”), there can be some spacing. And any padding that you set adds to that.

If you know the exact text that appears in the content (and it will never change) and if you rely on the specific font to be always available (which is very probable, but not certain, for the Arial font), then you can run some experiments and iterate until you find a suitable line-height value. In this specific case, line-height: 0.82 would remove the spacing above common capital letters A–Z (but any diacritic marks on them, as in É or Å, will be cut off) and would reduce the spacing below the baseline (but if letters have descenders as in “j” or “þ”, they will then be partly cut off).

Pixel-perfectness may still be disturbed by font rendering differences (like anti-aliasing or not) across browsers.