Hacker News Reader

Comment by prezjordan | Hacker News Reader

Off-topic, this is one of the most readable sites I've ever visited. What is it, exactly, that makes that typesetting so pleasing to the eye?

View on HN

Five reasons:

1. Proper line height

2. #404040 for text color instead of #000

3. webkit-font-smoothing: antialiased;

4. text-rendering: optimizeLegibility;

5. Steve Jobs quote

Wow is this guy a designer?

A designer would probably be a bit more consistent with the vertical grid. For instance, the margins are inconsistent with the line height etc.

I kid, a baseline grid is the least of his worries.

I'm most definitely not a designer. :-) If you're interested, it's just the 'Responsive' wordpress theme. http://wordpress.org/extend/themes/responsive

It's a standard open source wordpress theme, one of the popular ones: https://wordpress.org/extend/themes/responsive

My guess is that the color: is set to #404040, not black. Most people aren't aware that pure black is hard on the eyes; a slightly grey black is much more readable.

Can you or Alex expand on this? I'd especially want to know if this was true on non-white backgrounds.

Yes its especially true for non-white backgrounds. It all has to do with contrast. With black on white we have 100% contrast, if we use dark gray on light gray the contrast becomes say 70%. The lighter the contrast the easier it is on the eyes. Here's a quick example of what it looks like.

http://cl.ly/1p103C2z1N220L1W213l

> The lighter the contrast the easier it is on the eyes.

Or not: http://contrastrebellion.com/

Interesting link, but you're missing the point. The website even misses on their points. Most of the bad examples fit under an acceptable contrast ratio, by the standards given in their research, and even their good examples are not pure #000 or #fff. The w3c states that a minimum level of 3:1 works for people with 20/20 vision and 7:1 achieves the Triple-A standard. To show you what it looks like.

http://cl.ly/0J3Q210X142x1h2m1G2v

for reference http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contr...

and contrast tool http://www.snook.ca/technical/colour_contrast/colour.html

Reply on news.ycombinator.com