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 follow

Answer 1

The font-size property is used as a parameter when the browser draws characters, so it affects the size of glyphs. But when glyphs are rasterized to bitmaps, the effect of, say, increasing font-size by 0.5px may vanish. Browsers may perform rasterization in different ways. Moreover, they may or may not use subpixel rendering, and in different ways.

If line-height has been set to 1em and font-size is increased from 11.5px to 12px, then the height of the line box may remain the same or be increased by one pixel, depending on the rounding applied by a browser.

Answer 2

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