The CSS em unit is great, but there are things that always annoyed me, probably because I don't understand them completely.
Fonts don't render equally right at every size, and especially bad at inexact values. That is why, if you want to give using em exact pixel values to fonts, you have to do things like (assuming you didn't change the 16px font size of the body):
font-size: 0.875em; /* 14px */
font-size: 1.25em; /* 18px */
Maybe you just wanted to increase the size a little, but then realised that 0.9em = 14.4px, and then you got scared your font may look blurry! In any case, if you give a paragraph a font-size of 1.25em (18px), and then, change the body size from 16px to 14px, then the paragraph would be 17.5px. Blurry again!
Assuming we are working on common 1x ration screens like desktop ones, how would, for example, a 11.5px font render? I've printed them on a test HTML file and they seem to look exactly like a 12px font.
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?
I made a comparison between the renderings on 3 mayor browsers. Here it is:
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.