Is decimal precision when specifying a font-size respected by all browsers?

17,781

Solution 1

Decimals are not rounded consistently in all browsers. The best post I could find is here: Browser Rounding

This contains a table that shows the following:

Internet Explorer 7 truncate to 2 decimal places
Internet Explorer 8 truncate to 2 decimal places
Internet Explorer 9 truncate to 2 decimal places
Internet Explorer 10    truncate to 2 decimal places
Internet Explorer 11    truncate to 2 decimal places
Firefox 3.0 truncate to 3 decimal places
Firefox 3.5 truncate to 3 decimal places
Firefox 31  truncate to 3 decimal places
Chrome 20   round to 15 decimal places
Chrome 21   round to 15 decimal places
Chrome 37   round to 13 decimal places
Safari 6 (OSX Lion) round to 15 decimal places
Safari 6.1 (OSX Mountain Lion)  round to 15 decimal places
Safari 7 (OSX Mavericks)    round to 15 decimal places
Mobile Safari 7 (iOS7)  round to 15 decimal places
Mobile Safari 8 (iOS8)  round to 15 decimal places
Chrome 36 (Jelly Bean) [Nexus5] round to 15 decimal places
Chrome 30 (KitKat) [S5] round to 15 decimal places
Android Browser 4 (Jelly Bean) [Nexus7,Nexus4,S4,S3]    round to 15 decimal places
Android Browser 4 (Ice Cream Sandwich) [Nexus,KindleFire2]  round to 15 decimal places
Android Browser 4 (Gingerbread) [S2]    truncate to 3 decimal places
Opera 12    truncate to 2 decimal places
Opera Next 24   round to 13 decimal places

Solution 2

All latest versions of browsers allow for sub-pixel rendering*. See the research and the table of differences between browser versions.

Older browsers mostly round the pixels down. Most notable exception is IE8 and IE9 which round to the nearest integer (IE7 does also round down, IE10 and up use sub-pixel rendering).

* If you define the size in percentages, the value in pixels might be different as when you directly define it in pixels.

Share:
17,781
Jonny
Author by

Jonny

Updated on June 05, 2022

Comments

  • Jonny
    Jonny about 2 years

    If I use the following CSS:

    p {
        font-size: 20.5px;
    }
    

    Will all browsers draw that as 20.5px, or will some round the value?

  • Lode
    Lode about 9 years
    The data you copied applies to rendering after defining it as percentages. Not when defining in px directly.
  • Matthew Simon Cavalletto
    Matthew Simon Cavalletto almost 8 years
    The page you reference does not refer to font sizes.
  • Matthew Simon Cavalletto
    Matthew Simon Cavalletto almost 8 years
    The page you reference does not refer to font sizes.
  • Hanii Puppy
    Hanii Puppy over 7 years
    Sub-pixel rendering has nothing to do with font size. It's the ability to use the individual (usually red, green, and blue) sub-pixels and that up a pixel on your monitor to better render text.