Nitpick, but possibly a significant one: there’s an unusually wide range of font sizes being used, with the article text and compose-comment box being very large, regular comments being very small. Normally I would pick my preferred font size by zooming the whole page, but the variation within the page makes this not achievable.
(EDIT: Typography settings have changed significantly since this comment was written.)
Ah, yes, it does feel a bit odd. Actually, I like it a little bit: it puts visual focus on the text I’m composing, while allowing a lot of room for other text on the screen. But at the same time, it feels clunky. I would probably get annoyed at the large text in the comment-composing box if I were writing a longer comment.
Yeah, I was planning to reduce the size of the text in the compose-comment box to normal levels. Would that improve things?
Besides that, I am not sure whether we can avoid the large difference in font-size between article text and comments. The problem is that comments need to be small in font-size to allow the reader to understand the thread structure (i.e. they need to be able to see a comment and a reply at the same time), and the article text needs a large font-size to not run into any problems with the number of characters per line, and general readability for long-form text gets a lot better with larger font-sizes.
I’d generally recommend reading Practical Typography, and Professional Web Typography. I expect knowing that stuff well would be valuable since LW is primary a websites where people read lots of text.
Yes, I am a fan of Practical Typography and skimmed Professional Web Typography a while ago.
I haven’t yet spend super much time optimizing the typography of LW2, and am happy about input. Rereading both of the books above in the process of that might be a good idea.
Yeah, it’s pretty unreasonable to expect typography to be dialed in for the closed beta :)
Some quick thoughts/opinions I have for the post text:
I’d consider making the body text a serif font. I find it’s a better reading experience.
Body text is too grey. It definitely shouldn’t be black, but maybe darker at something like: #2F2230.
I’d differentiate heading a little more, maybe a different font, or real small caps. Also if I was being really opinionated I’d only support 3 heading levels and make them smaller. I think people are overdoing it these days with really big headings in post/article text on the web. It certainly clearly differentiates them from the text but there are classier ways of doing that.
The current line-height is pretty big at 1.846, I’d change it to something closer to 1.6. Maybe even as low as 1.4.
Most sites have their font size to small, so I’m really happy to see you didn’t do that, but I think to current body font is two big at 20px. I’d do 18px at most, an no smaller then 16px. Doing this might make the lines a little on the long end though.
I’d also implement hanging bullets. This is were bullet text is flush with the body text, and the bullets are in the margin a little. It’s very easy to do with CSS. For bonus points you could do hanging punctuation for quotes, but that’s much harder.
As many of you might have noticed, after a discussion with Malo and some great suggestions by him, the typography for the whole page is updated and looks a lot better!
I will still do a larger typography rework at some point during the closed-beta, and will obviously do adjustments as I notice problems with the current setup, but I am definitely happier with this.
Nitpick, but possibly a significant one: there’s an unusually wide range of font sizes being used, with the article text and compose-comment box being very large, regular comments being very small. Normally I would pick my preferred font size by zooming the whole page, but the variation within the page makes this not achievable.
(EDIT: Typography settings have changed significantly since this comment was written.)
Ah, yes, it does feel a bit odd. Actually, I like it a little bit: it puts visual focus on the text I’m composing, while allowing a lot of room for other text on the screen. But at the same time, it feels clunky. I would probably get annoyed at the large text in the comment-composing box if I were writing a longer comment.
Yeah, I was planning to reduce the size of the text in the compose-comment box to normal levels. Would that improve things?
Besides that, I am not sure whether we can avoid the large difference in font-size between article text and comments. The problem is that comments need to be small in font-size to allow the reader to understand the thread structure (i.e. they need to be able to see a comment and a reply at the same time), and the article text needs a large font-size to not run into any problems with the number of characters per line, and general readability for long-form text gets a lot better with larger font-sizes.
I’d generally recommend reading Practical Typography, and Professional Web Typography. I expect knowing that stuff well would be valuable since LW is primary a websites where people read lots of text.
Yes, I am a fan of Practical Typography and skimmed Professional Web Typography a while ago.
I haven’t yet spend super much time optimizing the typography of LW2, and am happy about input. Rereading both of the books above in the process of that might be a good idea.
Yeah, it’s pretty unreasonable to expect typography to be dialed in for the closed beta :)
Some quick thoughts/opinions I have for the post text:
I’d consider making the body text a serif font. I find it’s a better reading experience.
Body text is too grey. It definitely shouldn’t be black, but maybe darker at something like: #2F2230.
I’d differentiate heading a little more, maybe a different font, or real small caps. Also if I was being really opinionated I’d only support 3 heading levels and make them smaller. I think people are overdoing it these days with really big headings in post/article text on the web. It certainly clearly differentiates them from the text but there are classier ways of doing that.
The current line-height is pretty big at 1.846, I’d change it to something closer to 1.6. Maybe even as low as 1.4.
Most sites have their font size to small, so I’m really happy to see you didn’t do that, but I think to current body font is two big at 20px. I’d do 18px at most, an no smaller then 16px. Doing this might make the lines a little on the long end though.
I’d also implement hanging bullets. This is were bullet text is flush with the body text, and the bullets are in the margin a little. It’s very easy to do with CSS. For bonus points you could do hanging punctuation for quotes, but that’s much harder.
As many of you might have noticed, after a discussion with Malo and some great suggestions by him, the typography for the whole page is updated and looks a lot better!
I will still do a larger typography rework at some point during the closed-beta, and will obviously do adjustments as I notice problems with the current setup, but I am definitely happier with this.