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.
Author by
Jonny
Updated on June 05, 2022Comments
-
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 about 9 yearsThe data you copied applies to rendering after defining it as percentages. Not when defining in
px
directly. -
Matthew Simon Cavalletto almost 8 yearsThe page you reference does not refer to font sizes.
-
Matthew Simon Cavalletto almost 8 yearsThe page you reference does not refer to font sizes.
-
Hanii Puppy over 7 yearsSub-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.