Made an imgur album: http://imgur.com/a/8XUDP

First is with AdBlock on, the second is AdBlock off.

It's better once you've scrolled down, but everything is poorly mashed together at the top. Multiple words in the left column are badly wrapped.

Just checking: is it supposed to look like this? http://i.imgur.com/PWbZHW5.png

The color is totally fine, it's really just that sidebar that's odd.

The issue is not black text on white background, but the layout choices.

This is what it looks like when I load the page: http://i.imgur.com/kmMsyEg.png

And here's how it looks after some fiddlin': http://i.imgur.com/JhwwjfY.png

Great article and analysis.

One answer to your question, "what's wrong with black text on white background?":

http://ianstormtaylor.com/design-tip-never-use-black/

Monitors are not paper. They're much brighter.

The spacing (or lack thereof) on the site is very distracting. The left menu has zero pixel spacing from the content, and so the side menu basically runs right into the content. The table of contents on the right isn't obvious that it's a table of contents for the article, it just looks like another menu of some sort on the right.

I did some quick restyling just to satisfy my curiosity with some notes. I know it kind of makes it looks like wikipedia, but wikipedia is easy to read.

http://imgur.com/G5QfOua

It's not really that bad, just a few quirks:

- Left sidebar has no right padding

- The right sidebar loses its left padding in narrow viewports

If you want to go hardcore, there are a couple of other things, based off of James Felici's Complete Manual of Typography :

- The measure (line length) at its max width is about double what it should be for the font size (which is inheriting the browser default, usually 16px). Measure in picas (1/6 inch) should be 2-2.5 times the font size in points (1/72 inch, but a straight conversion of 16px = 12pt is usually fine).

- Currently, the line height is set to 130%. If using your current measure, the leading should be about 5 points, for a line height of about 141%. If you halve the measure, the leading would be about 1.5, for a line height of 109%. However, I'd still set the line height to be ~140% because you have a lot of superscript and your links have underlines that go below the descenders. Leading in points should be Measure in picas / font size in points, rounded to the nearest half point. Increase if you have things that go beyond the descenders (like you do) or decrease if you don't have any descenders (e.g., all caps).

Nothing's wrong for black on white for books. The thing is I don't read your site on a piece of paper but on a screen (and I'm probably not the only one).

Well, there are several problems.

First, to address your point. Paper is not pure white, and ink is not pure black. Books are also not backlit. If you want to recreate the experience of reading a book, use a slightly off-white color and a dark colored ink (for example, a very dark blue or brown).

Second, most everything on the page is way too cramped.

Third, you need to constrain text width. It's a lot of work to scan 1000 pixels for each line.

I made some quick changes in CSS to address the basic readability problems, and uploaded a screenshot:

http://new.tinygrab.com/d5ac58cc253b078fa42a97b3c35417d28563...

(I was playing around with the links before I decided I was getting too far into the weeds, but the links in #content should have the underline. The links on the side shouldn't.)

CSS changes:

    html {
      background-color: #FCFCFC;
    }
    
    html, a {
      color: #303C3C;
    }
    
    blockquote {
      font-style: italic;
    }
    
    #header {
      margin-top: 50px;
      margin-bottom: 30px;
    }
    
    #sidebar {
      width: 150px;
      margin-right: 50px;
    }
    
    #content {
      width: 550px;
      margin-left: 200px;
      padding-left: 0;
      line-height: 150%;
    }
    
    #TOC {
      width: 200px;
      margin-right: -235px;
    }
    
    #TOC li {
      margin-top: 0;
    }

I actually like it quite a bit . . . The lack of triple-nested faux windows is nice and I usually set things to display compactly anyway, so there's that.

It looks like some people are having font issues, though. I'm not seeing any overlap between the columns, but there's a lot visible in some of the linked images.

Hah, what's going on there? I don't understand how it can take nice regular Pandoc markdown-generated HTML and crop it down to nothing but the source code. Maybe you should file a bug on Readability.