8

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

hello world - actual design

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:

hello world - on browser

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

hello world - on browser

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?

archvile
  • 169
  • 4
  • 8
  • 3
    Be aware, that extra space is for descenders in letters like `g`. –  Sep 02 '13 at 22:40
  • 1
    It's never going to be *pixel* perfect between different browsers, operating systems, text rendering engines, devices, etc. – thirtydot Sep 02 '13 at 23:20

2 Answers2

10

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

enter image description here

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

Krzysztof Kosiński
  • 4,225
  • 2
  • 18
  • 23
  • 1
    You're right. When I added a descender letter, it filled all the empty space I was talking about beneath the text. But what about the space above the letters? I already used capitalised letters in my example, so I assume text can't go higher than that. But there's still a space above the text. Am I missing something here? – archvile Sep 03 '13 at 01:12
  • The space above the letters may be related to the `line-height` property, which controls leading (e.g. the spacing between baselines in successive lines of text). Try setting `line-height: 1;` – Krzysztof Kosiński Sep 03 '13 at 02:19
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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390