I'm working on a text heavy website and someone has advised me to go with antialiased font-smoothing mentioning that browsers add a solid color to the pixels in font glyphs while rendering which makes it look different(thicker) than how the designer intends it to be.
CSS font-smoothing property fixes this with implementation in webkit and mozilla with a considerably good support in major browsers (http://caniuse.com/#search=font-smoothing)
Is it a good idea to use CSS font-smoothing or should I just go with the default browser implementation?
If you have a transpiler then go for it. Otherwise it looks like there's little point considering no one fully adopts it.
Marco Alka
Software Engineer, Technical Consultant & Mentor
Very often, text in browsers does look ugly. Surprisingly, IE/Edge do a pretty good job smoothing font with Cleartype. For other browsers, I make good experiences with font-smoothing. So yes, take a look at the result, do some A/B testing and then decide wheter you like it or not :)
For reference, here is my smoothing CSS. It tries to smooth the font even when
font-smoothingis not available (viatext-shadow).-webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); -webkit-text-stroke: 1px transparent;I prepared a simple comparison for you: jsFiddle