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?
Font size specifications may come in points or pixels where: 1 pixel (px) is usually assumed to be 1/96th of an inch. 1 point (pt) is assumed to be 1/72nd of an inch. Therefore 16px = 12pt.
The term CSS pixel is synonymous with the CSS unit of absolute length px — which is normatively defined as being exactly 1/96th of 1 inch.
The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length> units, such as em , ex , and so forth.
The font-size property in CSS is used to specify the height and size of the font. It affects the size of the text of an element. Its default value is medium and can be applied to every element. The values of this property include xx-small, small, x-small, etc.
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
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.
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