I know I designed the styling mostly to appeal to myself, but serious question: what's wrong with black text on white background? That's basically how books have been printed for hundreds of years.
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:
(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.)
> Third, you need to constrain text width. It's a lot of work to scan 1000 pixels for each line.
It's funny you criticize that, because it's one of the only parts of my site design that I actually have A/B tested: http://www.gwern.net/a-b-testing#max-width The smaller widths did not do well.
> 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).
Hm, this sounds plausible.
html {
background-color: #FCFCFC;
}
html, a {
color: #303C3C;
}
Done.
blockquote {
font-style: italic;
}
No; I use blockquotes too much and they're too long to make them italics. The background shading seems like enough for now.
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.
I've added a 'padding: 1em;' to the sidebar so hopefully that deals with your left menu issue.
Looking at your screenshot, I think I like what you did with the table of contents. Could you post the CSS you used to do that? (Maybe it's obvious to you how to do that, but I know very little CSS so it's a mystery to me.)
- 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).
> - Left sidebar has no right padding...- 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).
> - The right sidebar loses its left padding in narrow viewports
Don't know how to fix this.
> - 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%
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).
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.
I agree, the colors are alright, but the layout could use some TLC. The sidebars could be wider and need some padding, the line height should be increased and uniform for all the different styles so that the blocks line up, headlines shouldn’t to be uppercase as that decreases readability, and the indents for quotes and unordered lists could be smaller.
That answer would be a more convincing if the page itself wasn't a great demonstration of the opposite. I'm sure #554 with a spindly font looks great on a retina MacBook, but it's just not all that readable on most systems, especially for people with less than perfect vision.
I just don't get what issue designers have with contrast. You'd kind of think that the point of text is for it to be readable, not for it to look soothing.
Eh, sometimes you don't want things to look natural for the sake of looking natural. Plus, given that there's basically just black and white on Gwern's site, a dark blue would have the same 'overpowering' effect as a black, since there is nothing else that is similar in color to it.
