Does text shadow increase text legibility | Hacker News Reader

Does text shadow increase text legibility

strd6.com

15 pointstamersalama14 comments

"Does white text on white background become more readable if you add some black to the outside of the text?"

Shocking results!

Here's a more sensible test - http://oi56.tinypic.com/14yc0u1.jpg - a lighter text-shadow with zero offset and 5px blur is used to increase the contrast around the text. Top is #fff, center is #eee, bottom - no shadow.

IMO it's a close between the center and bottom options, but bottom still looks better and more uniform across different monitors.

That post was way more interesting than you gave it credit for.

Not really. Real world examples would have been more useful. I don't see anyone arguing that white on white text is hard/easy to read.

In addition to light text on a light background with a dark shadow, they also tested light text on a dark background with a dark shadow. It was just as useless.

Why wouldn't they test dark text on a light background with a medium shadow or any other real-world combination?

Afraid I disagree

Everybody's right. Science wasn't necessary, it's obviously useful in a limited set of circumstances. (One could argue that such text without contrast shouldn't exist, but that's easier said than done in a dynamic environment such as a game.) Zed's still right in the way he meant it, which was not about those limited sets of circumstances.

In other news, the well-known true statement "the sky is blue" isn't actually true. Right now it's black, studded with these little white spots. But we still know what that means. Context.

The utility of text shadow really lies in the 3D aspect of it. If you have white text, adding a black text-shadow at -1px distance makes the text look inset. With black text, a white text-shadow at 1px distance works too.

It enhances contrast... and looks sexy. Win-win.

Those are sort of outrageous examples.

I find text shadow helps when I've got the contrast between the type and the background a little close. Text shadow can be used to subtly improve the contrast just around the letters. Done right users don't consciously know there is a text shadow but legibility is improved while maintaining a mellow set of colors.

To be explicit, in HTML-5 land I would be talking about something like a 1 to 4 pixel wide shadow with say an hsla(0,0%,0%,0.25) color to darken a background around some lighter text.

"I think there’s quite a bit of promise in the technique of using “real” statistical evidence to back up claims."

That, or, you got punked into blasting a hundred bucks by Zed Shaw via Twitter...

$10.50

But practicing science with simple, practically trivial, experiments can make it easier to do real science on more difficult examples in the future.

http://socket.io/ is a good example of it making it harder to read.

I don't know, the contract between the background and the text is low already, so making it worse would be kind of hard.

I like using a drop shadow on headings or other important bits of text that have been placed on something that causes the contrast to be low. But I try to make it so it is not obvious it is there, just subtle.

I just tried turning off the shadow there and the text is much more readable. It's actually plain white text but the 1px black drop shadow makes it more difficult to read against the blue background.

Reply on news.ycombinator.com