Why does chrome render fonts so vividly?

The image below is a combination of three screenshots of the same page / paragraph: the first from Chrome, the second from IE, and the third from Firefox.

The color is black (# 000), the font family is Helvetica, and the font size is 12 pixels.

As we can see, the font in chrome does not look very black. It even looks pretty pale. Whereas in IE the font is rendered much darker and easier to read. It's much better in Firefox than Chrome, but still not as black as IE.

Does anyone know what makes this difference and if there is a workaround for this problem (which is not related to crazy CSS hacks)?

Thank.

same font, three different browsers

+3


source to share


2 answers


This is because of the way browsers render websites, this should fix:

-webkit-font-smoothing:antialiased;

      



Edit: I think it also captures how the text looks on OSX

0


source


I see the same problem when testing web fonts on my own website. All web fonts appear thinner in Chrome than in other browsers; it even makes some fonts that would otherwise look well-balanced practically useless.

One CSS property I have discovered helps:

-webkit-text-stroke

      



But this is not a perfect fix and this is invalid CSS.

It's 2016 now and the problem is still there. I can't say I understand why they don't fix this. (And no, a fix should never involve changing your browser settings yourself.)

It seems that for this reason the problem is relatively underestimated, for some reason.

0


source







All Articles