What does half a pixel mean in the font-size CSS property?

Question

I'm currently working on a website redesign and I'm receiving a list with the required changes from an agency.

The header menu of the site currently has the following styles:

line-height: 1em;
font-size: 11px;

In one of the documents I have received there's a change request that requires me to change those styles to:

line-height: 1.2em;
font-size: 11.5px;

I know that the EMs are OK with the decimal values but what does half a pixel mean in the font size? I have tried to change the font size using the inspector from 12 to 11.5 and to 11 and the change from 11 to 11.5 is visible but the one from 11.5 to 12 it moves just a little (I thins only the spacing changes a little, but it is set to 1em on all 3 examples). You can check the screen-shots below:

So what does that half a pixel mean in the context of a web-page? Is this cross-browser and what does that .5 pixel do to the font-size?

Answer 1

I think there is a difference. You forgot about the Zoom level of the page.

Example :

<p style="display: inline-block; font-size: 12px; border : 1px red solid;">
aAa
</p>
<p style="display: inline-block; font-size: 11.8px; border : 1px red solid;">
aAa
</p>
<p style="display: inline-block; font-size: 11.5px; border : 1px red solid;">
aAa
</p>
<p style="display: inline-block; font-size: 11.2px; border : 1px red solid;">
aAa
</p>
<p style="display: inline-block; font-size: 11px; border : 1px red solid;">
aAa
</p>

If we zoom to 500%, we can see there is a difference:

I think your browser has to round it because half pixels (real pixels) don't exist.

Zoom 100% :

Round(12 * 1.00) = 12

Round(11.5 * 1.00) = 12

Zoom 500% :

Round(12 * 5.00) = 60

Round(11.5 * 5.00) = 58