The contrast ratio is 5.57:1 well above the 4:5:1 requirement. It seems that they're using Adobe Clean Light ( Helvetica Neue Light as a fallback). This must be the source of your readibility problem. Depending on browser/platform font-weight: 300 can be a huge problem.
You hit the nail on the head: The font-weight:300 is killing the readability in Chrome on Windows. When I toggle it off the text becomes readable.
I don't know what this 4:5:1 requirement is, but it also looks better to my eyes with the color:#444 toggled off so I get black text. But it's not as huge a difference as turning off the width.
The "4.5:1 requirement" can be found in the Web Content Accessibility Guidelines (WCAG) 2.0, part of a series of Web accessibility guidelines published by the W3C's Web Accessibility Initiative:
The font is the issue, not so much the color. Light fonts as the bread font are just a bad idea.
Not that it matters even a little bit in this case. It's an irrelevant diversion of the worst kind. It's ignorant and foolish, something for small minds.
Because many people who design webpages aren’t very great when it comes to typography?
It’s just a bad idea to use those light fonts for anything but headlines or other kinds of large type. For the headline that light font is absolutely ok. For the body text it’s just embarrassing (especially since this is from Adobe).
I have to say, though, this blog is written by those at Adobe who develop new standards (for HTML/CSS/JS), so probably very technical people who are more often than not not very knowledgeable about design – that is to say, those involved here do not necessarily have a strong design focus (and neither do they necessarily have to have that).
Maybe the one who decided it has an Apple device with 'retina' screen? I was reading it on an rMBP and the font struck me as very pleasant, hence I couldn't understand the fuss here first. Helvetica Neue Light is quite popular on these newer Apple devices, it's good to know that it is a bad idea though.
The "bread font"... is that a design term? I like it, and it intuitively makes sense. I'm just wondering if that's a common term or if bread is interchangeable with potato, pasta or some other starchy food that fills you up.
I've definitely heard it before, though "body font" seems to be much more prevalent. It's probably a literal translation from a continental Germanic language, e.g. Dutch has "broodtekst" though the word refers to the actual body copy, not the font. German has "Bröttext".
Haha, no, body text is them common English expression. I just translated “Brotschrift” literally to English and somehow convinced myself that it’s an actual English expression.
This is probably due at least in part to the Mac's text rendering, which is considerably thicker than Windows. It's pretty common to find text that is ridiculously thin, mostly on designer's websites. I'm no devotee of Windows or Mac (though I don't own a Mac yet), but it seems pretty clear that the design crowd needs to start at least spinning up a simple Windows (or even Linux - Ubuntu's text rendering is in between OS X's and Windows') VM and make sure that their text is readable on the platforms that nearly everyone uses. Even Android and (I believe, though I wouldn't be surprised if I was wrong) iOS don't render text as thickly as OS X. Failing to optimize for different text renderings and making your text extremely thin alienates both the mobile market and 95% of the PC market.
Also, Chrome has terrible, evil, nasty text rendering in general, at least on Windows. I prefer it to IE10, but the web does look much better in IE, which actually has decent text rendering.
Which device are you using and with what light settings? I've received one report from a user saying that the text on my site is "unreadable" due to the contrast but nobody inside my organization can see what the problem is, so I'm interested in how other people are experiencing such problems.
I'm using a 17" Dell M6500 running Windows 7 and the text is unpleasant to unread in all browsers I have installed (Firefox 18.0.2, Chrome 24.0.1312.57 and even IE 9).
It looks quite a bit better on my external monitor - which is 1600x900 rather than the 1900x1200 of my laptop display.
FWIW, the text looks fantastic on a retina ipad (on safari). It could do with being a bit darker to increase contrast, but still it looked great and was easy to read. So screen resolution seems to make a difference.
Does this algorithm actually make things more readable? Or does it just make them look nicer. Not that there's anything wrong with that but sometimes the two goals clash, like with the text in this article.
And is it me or is the use of a series of single characters rather than a length of actual text a really weird choice?
The typophiles here will surely yell at me for getting the terminology wrong, but my experience is that fonts are heavier on OS X and whenever I see a site with whisper-thin text like the above I suspect it was tested on OS X only.
Edit: removing the font-weight CSS attribute makes the page legible. The issue is that you specified a font-weight under 400 ("normal"), and different font engines snap in different ways.
But I bet that the text you're looking at right now on HN is easier to read than the screenshot. Now consider that people might have dense screens, or sit further away from the screen than you do, or have poor eyesight.
Nah, it’s still too light on OS X with Safari. And on a Retina screen, no less. If this would work anywhere, it would work on that combination of screen, OS and browser. But no, it does not.
I can read it comfortably if I lean in, but I'd rather not. The text here on HN is smaller than your site, and it's perfectly readable from my normal position.
The gray on white is actually ok. Even better would have been black on light gray. Too much contrast is a pain point when reading text with a backlight.
font-weight is indeed the main problem, but regardless I hate this new trend of not making text black. What would a bookmarklet look like to set the body color to black?
The trends to make thin grey text on nearly-gray background are driving me nuts also. I have two global Stylish [0] styles in my Firefox and I toggle them when I need to read something on a page like this:
1) Enable Georgia font instead of the author's favourite thin font:
html body, html div, html span, html p {font-family:Georgia !important;}
2) Make everything black (except links):
html * {color:black !important;}
a {text-decoration:underline !important; color:#00a !important;}
Those are not perfect but they work for me in 95% of the cases.
The first rule is a not a catch-all to not put Georgia in code/pre/textareas etc. `html` is necessary not to affect Firefox's (browser) styling.
