Julio's Blog

This post is largely a reply to David Parry’s post regarding my use of text-shadow for Lectio, my entry alongside Lachlan Hardy and David Goodlad for Node Knockout. I figured it makes for an interesting discussion though, so I’ve decided to write a short post on it.

The problem that I tried to address by using text-shadow is the fact that WebKit will wreck text rendering on elements that have hardware acceleration enabled (in our case, almost everything through -x-transition: all 0.25s linear). Narrower font faces are obviously more brutally affected by it.

David DeSandro proposed a solution in his blog. That would’ve been my go to solution if it wasn’t for the fact that we’re using an image for background noise. Which means I can’t set a background colour on the affected elements.

The other way to address the problem is by adding a blurred text-shadow (e.g.: text-shadow: 0px 0px 1px , any value of 1px or higher for blur will do). That seems to force it to render text nicely again. The downsides are many, including making the page a lot slower and memory-intensive, and in Firefox the text looks overblurred (but more on that later).

So my advice to you is, should the background of your text elements be a solid colour, go for Desandro’s solution. Otherwise, use text-shadow, and fine tune the distance between the colour’s shadow and the text’s colour so you don’t end up with something that in other browsers, such as Firefox, looks like you set everything to bold or nearly.

Since we did our last deploy I did experiment with font sizes and contrast a lot more. What I have on my computer is significantly better than what you can see right now in the live app.

P.S.: thanks David for the incredibly valuable feedback.