Round up line-height

Question

It seems that chrome round down the value of the computed line-height.

For instance:

line-height:1.33 with font-size:11px will have computed line-height:14px.

Whereas the exact value is 14.66 so I would expect the line-height to equal 15px

Do you know if there is any way to force the browser to round up the computed value instead of round down?

Answer 1

Chrome truncates the decimals to an integer pixel value. Other browsers (FF) will round to the nearest integer pixel value. They will all use the decimal value for calculating child values though.

You could try using translateZ to force the element with the text in it to be graphics accelerated, this "may" allow sub-pixel rendering for the text. If it does work it will likely only work in Chrome.

#elm {
    transform: translateZ(0);
}

Answer 2

You can specify a specific line-height in whatever units, e.g. line-height: 2.2rem; which can avoid the rounding problem if you calculate your rem size so that it works out to an even number in all browsers, e.g. if you set the default:

html {
  font-size: 62.5%; /* 10px = 1rem */
}

Then any time you set your line height to a value, e.g. line-height: 2.2rem; it would end up being exactly 22px. This would be the same in all browsers.