[1] http://juicystudio.com/services/luminositycontrastratio.php#...
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.
Here is a detailed explanation:
http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contr...
1. Open blog post about readability.
2. Notice that text is unreadable without zooming in.
3. Close blog post about readability.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.
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).
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.
It looks quite a bit better on my external monitor - which is 1600x900 rather than the 1900x1200 of my laptop display.
I'd hate to see what it looks like on windows (especially chrome which makes fonts even thinner).
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?
http://i.imgur.com/Xu13n7j.png
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.
It’s just bad design.
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.
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.