Beefing Up Dull Text in WebKit

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

While doing a bit of cross-browser poking around on CodePen, I noticed that the font for the code editors was notably duller and weaker in WebKit browsers (Safari and Chrome) than it was in Firefox or Opera. I quite like Chrome and it was sad to me knowing that I would be spending a lot of time looking at inferior looking text, so I set about looking for solutions.

Here’s the “before” shot:

View Full Size

There used to be a text-shadow trick, but that has since stopped working and was actually for making text thinner, not beefier. Then there is the -webkit-font-smoothing stuff to play with. But no dice there. The value none looked gross and there was no visual difference between antialiased and subpixel-antialiased in this case.

The answer came on Twitter, as usual!

Adding this to the text noticeably beefed it up. Still not quite as bright and sharp as Opera or Firefox, but closer. And since the effect is applied with a -webkit- vendor prefix I didn’t need to worry about it affecting the other browsers.

View Full Size

I was all proud that this would solve the issue and all would be lovely. Of course I wake up to an email like this:


I have seen the change to the text on Chrome and it really gives you a headache, it’s so blurry.

Ah, the internet. Whattyagonnado?


Feedback from this has been about 50/50. Some people hate the “faux bolding” (I don’t think this is really faux bolding but I understand), some people prefer the thin text, some people preferred the attempt at brightness.

Here’s the scoop. The thin text from the very top screenshot wasn’t a result of “That’s just how WebKit does it”, it was because an element within the same parent element of the text had a CSS 3D transform applied to it. Namely, transform: translate3d(0, 0, 0). The great irony here is that that code was applied in order to prevent text from getting that “thin” look when a CSS transition was taking place, a curious side effect of CSS transitions. While it worked, it also caused the text in the editor to get that “thin” look all the time.

So, in CodePen, I’ve removed the -webkit-text-stroke so the text rendering looks way better and more comparable with Opera and Firefox. I’ve then more carefully applied the 3D transform fix to other elements that need the help during transitions.