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:
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;
}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;
}
blockquote {
font-style: italic;
}
#header {
margin-top: 50px;
margin-bottom: 30px;
}
#content {
width: 550px;
margin-left: 200px;
padding-left: 0;
line-height: 150%;
}
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.
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.)
Change the div#TOC rule the following:
div#TOC {
float: left;
width: 25%;
font-size: 10pt;
background: #eee;
margin-right: 15px;
margin-bottom: 15px;
line-height: 15pt;
}
- 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).
Fixed or wontfix, see https://news.ycombinator.com/item?id=5654011
Fixed.
> - 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%
Done.
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
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.
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.
The color is totally fine, it's really just that sidebar that's odd.
http://i.imgur.com/OnRL0h1.png
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.
One answer to your question, "what's wrong with black text on white background?":
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.