How do float font-size values on CSS render among browsers?
<p>The CSS <code>em</code> unit is great, but there are things that always annoyed me, probably because I don't understand them completely.</p>
<p>Fonts don't render equally right at every size, and especially bad at inexact values. That is why, if you want to give using <code>em</code> exact pixel values to fonts, you have to do things like (assuming you didn't change the 16px font size of the body):</p>
<pre><code>font-size: 0.875em; /* 14px */
font-size: 1.25em; /* 18px */
</code></pre>
<p>Maybe you just wanted to increase the size a little, but then realised that <code>0.9em</code> = <code>14.4px</code>, and then you got scared your font may look blurry! In any case, if you give a paragraph a <code>font-size</code> of <code>1.25em</code> (<code>18px</code>), and then, change the body size from 16px to 14px, then the paragraph would be <code>17.5px</code>. Blurry again!</p>
<p>Assuming we are working on common 1x ration screens like desktop ones, how would, for example, a <code>11.5px</code> font render? I've printed them on a test HTML file and they seem to look exactly like a <code>12px</code> font.</p>
<p><strong>Is this the recommended behaviour among all browsers? And what about sizes like padding and margin that may be determined by font-size when using ems? Do they get rounded up as well?</strong></p>
<p>I made a comparison between the renderings on 3 mayor browsers. Here it is:</p>
<p><a href="https://i.stack.imgur.com/viuBV.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/viuBV.gif" alt="enter image description here" /></a></p>
<p>I scaled it up (200%) a little, so that it is easier to see the details. At the top, you can see how the same text renders at 14px (left) and 14.4px (right). Below, I overlayed them on photoshop using Difference blendmode to see if there is any difference at all. As you can see, Chrome rounds the font-size, and renders it at the same size, meanwhile, the height of the box, is different.  Firefox has same height but the font renders slightly different on the x axis, while the height of the font seems equal. IE result is kind of a mix. In any case, I'm really surprised because the 14.4px font doesn't seem to be blured at all.</p>