Icon are bolder in white

user_2409070 0
Viewed 118

I'm working on a web project. I'd like to display a fonticon within some buttons and set the color to white. However it seems that changing the foreground color changes the weight of the icon. On this image, both the two buttons are the same classes and properties, only differs the color attribute.

enter image description here

I tried to overlay those two and the result shows that indeed those two width are slightly different which causes a huge difference when those are displayed in their real size.

enter image description here

Following this link I tried to play with those:

-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;

without any success.

Do you have any clue on any css property that may interfer with the thickness of those icons?

Is this related to the font itself ?

EDIT:

Screenshot with real size enter image description here

web font-face antialiasing css
1 Answers

Icons are not bolder in white.

Most likely, it is your eye that perceives them that way, because white provides a greater contrast with current background-color than black.

But, from a technical perspective, font glyphs have the same dimensions regardless of color. In fact, considering current font technology, it is impossible to provide different shapes based on current font-color.

However, even though at page level the font glyphs always have the same size, it is possible that either the browser used or the operating system are modifying the rendered output based on algorithms aimed at increasing text readability.

Simply turning those options off (at browser or OS level, depending on where they are defined) should fix the problem (where by "problem" we mean: "the rendered shape has different dimensions in snapshots taken from the same page").

user_18916770
Related