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?
Set Font Size With Em The default text size in browsers is 16px. So, the default size of 1em is 16px.
Although you can use decimal places in CSS like 100.0% in reality it best to keep to real numbers for percentages and only upto one decimal place with standard linear integer values. Your 2.9… probably would be read as 3. Furthermore you have to remember many elements use padding, margins and borders.
You should set the font-size in the body tag to 100% . That way, people who visited your site will see the text at the right size for what they have set in their browser. For instance, people with low vision may set the text size larger. If your font-size is set to 100% , they should see it exactly as desired.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With