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:
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!
@chriscoyier try -webkit-text-stroke: 0.35px
— Kevin Ennis (@kevincennis) July 11, 2012
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.
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:
Hey,
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?
Beefing Up Dull Text in WebKit is a post from CSS-Tricks