Thanks for this—it’s great! I went ahead and tweaked your modification a bit and elaborated on it, and now it’s available on GW as a selectable theme (note the theme selector widget at the top-left of the page).
Any further suggestions on improving the theme are welcome! (See here for the grey-theme CSS as it currently stands.)
P.S. If anyone else wants to post or send us additional alternate themes, please do!
I’m not very happy about the typeface used for body text, the longer paragraphs kinda make my eyes bleed. Arial at 1rem would look more scannable to me. But this might be subjective, and in any case I can just fix it for myself.
Yeah, I totally understand your complaint. Take the following as me explaining why it (and many similar things) are done this way, and definitely not dismissing what you’re saying:
Fonts are tricky.
It’s hard to appreciate how tricky they are, until you try and make a website that’s readable for everyone, everywhere.
Rendering bugs, for example. You get a font that looks great on a Mac—it looks terrible on Windows. You find one that looks good on Windows, it glitches out on Linux.
Then there’s things that aren’t “bugs” but more like “differences”—rendered font weight is different on Mac vs. Windows/Linux.
There’s browser differences: Chrome and Firefox (or, more precisely, Webkit/Blink and Gecko) anti-alias letterforms differently (at least on Windows).
There’s device differences: what looks good on a hi-DPI screen doesn’t look so great on a lower-res screen (and vice-versa!).
Of course these things interact. (Otherwise it would be too easy, right?) Chrome on a Retina Macbook vs. Firefox on the same Macbook vs. Firefox on a Linux box vs. Safari on an iPhone vs. Safari on an iMac vs. Opera on the same iMac vs. Opera on Windows vs. Chrome on Windows vs. etc. etc. etc.—all are ever so slightly different in how they will render the very same text.
Sometimes you can correct for this. Pick a font that works best on most platforms; detect the remaining platforms, serve a different font to those. (GreaterWrong does this for the UI font—Mac and Linux users get one font, Windows users get a slightly different font. I am betting 99% of people won’t ever notice or realize this… which is the point, of course; if we didn’t take this additional step, then people would notice, because there’d be visible glitches.)
Often, though, you can’t. (For example, there’s a particular longstanding browser bug in how text renders on mobile devices (specifically having to do with hyphenation) that we can’t properly fix, because there’s no way to reliably detect whether any given client can or can’t do that particular thing correctly. This is why the text column is left-aligned on mobile clients. The alternative would be having most users see well-formatted text, but having a large minority of users see very glitchy, hard-to-read text; this is unacceptable.)
And, as you say, some things are just subjective (at least in part; it’s almost never totally subjective).
So while I absolutely try to ensure that everyone gets as close to a perfect reading experience as possible… compromises are inevitable (and I really do mean “inevitable”, not “meh, too much work”; no amount of effort short of “literally be Apple or Google, and maybe not even then” would fully solve this problem).
All that having been said, though, could you tell me what sort of device/OS/browser/etc. you’re viewing the site on? Every piece of user feedback helps! :)
Edited to add: Whatever corrections you make, even if we don’t/can’t adopt them into the “official” version of the theme, I encourage you to submit them to userstyles.org—it’s likely that some other people will share your preference, and this’ll make the browsing experience better for at least some of them.
The title / post-meta styling is an improvement, I agree. As for the body test—what OS / browser / etc. is that?
Edit: I ask because, from what I’ve seen, Fira Sans is more readable on more platform/browser/device combinations than Concourse, as a body text font. In this case it’s closer to the opposite… let me ask you this: how much of the difference between the two versions you screenshotted, for you, is made by the body text size, as distinct from the typeface per se?
The screenshots were taken on Ubuntu + Chrome. I came home and checked on my Mac, and it seems like Fira isn’t always that bad. Ubuntu just stretches it for some reason and it looks horrible, like in my “Before” screenshot. As for Concourse, I managed to make it look like my “After” screenshot on both platforms by setting -webkit-font-smoothing: antialiased. But that seems brittle. So yeah, fonts are tricky and I withdraw my proposal, at least until I get ten different machines to test it :-)
I’ve now tested the grey theme on several different Linux machines (running debian, Mint, and KDE), in Chrome and Firefox, and am unable to reproduce that particular bug (I don’t have access to an Ubuntu box at the moment, I’m afraid).
I’m given to understand that Linux has certain font rendering settings which may be adjusted—is that something you’re able to try doing? (If not, I totally understand.)
FYI, I tweaked the body text size in the grey theme (and made it vary slightly according to display pixel density). Take a look—it might be a bit better for you now.
You’ve also changed the font, right? Somehow I can’t even reproduce the old bad look by changing to Fira :-) Anyway the new look is great, thank you! My only remaining nit is that
Yeah, the body text is in Source Sans Pro now (seems to be more consistent across platforms[1]).
Good point about the heading weight. In the grey theme the heavy headings don’t fit… I’ll have to play around with different weights.
[1] “Consistent”, I say, and yet I still had to specify that Firefox on Windows (yes, specifically Firefox and specifically on Windows) should get a different weight… fonts, man…
Thank you! Though I like the brutalist theme even more now :-)
Do you have plans to implement a list of posts by user (without comments), a list of drafts, and an inbox? These are the only things I go to LW2.0 for, most of my time is now spent on GW.
Do you have plans to implement a list of posts by user (without comments), a list of drafts, and an inbox? These are the only things I go to LW2.0 for, most of my time is now spent on GW.
Thanks for this—it’s great! I went ahead and tweaked your modification a bit and elaborated on it, and now it’s available on GW as a selectable theme (note the theme selector widget at the top-left of the page).
Any further suggestions on improving the theme are welcome! (See here for the grey-theme CSS as it currently stands.)
P.S. If anyone else wants to post or send us additional alternate themes, please do!
Very cool, and thank you for cleaning it up!
I’m not very happy about the typeface used for body text, the longer paragraphs kinda make my eyes bleed. Arial at 1rem would look more scannable to me. But this might be subjective, and in any case I can just fix it for myself.
Yeah, I totally understand your complaint. Take the following as me explaining why it (and many similar things) are done this way, and definitely not dismissing what you’re saying:
Fonts are tricky.
It’s hard to appreciate how tricky they are, until you try and make a website that’s readable for everyone, everywhere.
Rendering bugs, for example. You get a font that looks great on a Mac—it looks terrible on Windows. You find one that looks good on Windows, it glitches out on Linux.
Then there’s things that aren’t “bugs” but more like “differences”—rendered font weight is different on Mac vs. Windows/Linux.
There’s browser differences: Chrome and Firefox (or, more precisely, Webkit/Blink and Gecko) anti-alias letterforms differently (at least on Windows).
There’s device differences: what looks good on a hi-DPI screen doesn’t look so great on a lower-res screen (and vice-versa!).
Of course these things interact. (Otherwise it would be too easy, right?) Chrome on a Retina Macbook vs. Firefox on the same Macbook vs. Firefox on a Linux box vs. Safari on an iPhone vs. Safari on an iMac vs. Opera on the same iMac vs. Opera on Windows vs. Chrome on Windows vs. etc. etc. etc.—all are ever so slightly different in how they will render the very same text.
Sometimes you can correct for this. Pick a font that works best on most platforms; detect the remaining platforms, serve a different font to those. (GreaterWrong does this for the UI font—Mac and Linux users get one font, Windows users get a slightly different font. I am betting 99% of people won’t ever notice or realize this… which is the point, of course; if we didn’t take this additional step, then people would notice, because there’d be visible glitches.)
Often, though, you can’t. (For example, there’s a particular longstanding browser bug in how text renders on mobile devices (specifically having to do with hyphenation) that we can’t properly fix, because there’s no way to reliably detect whether any given client can or can’t do that particular thing correctly. This is why the text column is left-aligned on mobile clients. The alternative would be having most users see well-formatted text, but having a large minority of users see very glitchy, hard-to-read text; this is unacceptable.)
And, as you say, some things are just subjective (at least in part; it’s almost never totally subjective).
So while I absolutely try to ensure that everyone gets as close to a perfect reading experience as possible… compromises are inevitable (and I really do mean “inevitable”, not “meh, too much work”; no amount of effort short of “literally be Apple or Google, and maybe not even then” would fully solve this problem).
All that having been said, though, could you tell me what sort of device/OS/browser/etc. you’re viewing the site on? Every piece of user feedback helps! :)
Edited to add: Whatever corrections you make, even if we don’t/can’t adopt them into the “official” version of the theme, I encourage you to submit them to userstyles.org—it’s likely that some other people will share your preference, and this’ll make the browsing experience better for at least some of them.
Maybe something like this? Before, after. I’m not insisting that you use it, but it’s closer to what I had in mind...
The title / post-meta styling is an improvement, I agree. As for the body test—what OS / browser / etc. is that?
Edit: I ask because, from what I’ve seen, Fira Sans is more readable on more platform/browser/device combinations than Concourse, as a body text font. In this case it’s closer to the opposite… let me ask you this: how much of the difference between the two versions you screenshotted, for you, is made by the body text size, as distinct from the typeface per se?
Yeah, it’s probably about font size.
The screenshots were taken on Ubuntu + Chrome. I came home and checked on my Mac, and it seems like Fira isn’t always that bad. Ubuntu just stretches it for some reason and it looks horrible, like in my “Before” screenshot. As for Concourse, I managed to make it look like my “After” screenshot on both platforms by setting -webkit-font-smoothing: antialiased. But that seems brittle. So yeah, fonts are tricky and I withdraw my proposal, at least until I get ten different machines to test it :-)
I’ve now tested the grey theme on several different Linux machines (running debian, Mint, and KDE), in Chrome and Firefox, and am unable to reproduce that particular bug (I don’t have access to an Ubuntu box at the moment, I’m afraid).
I’m given to understand that Linux has certain font rendering settings which may be adjusted—is that something you’re able to try doing? (If not, I totally understand.)
FYI, I tweaked the body text size in the grey theme (and made it vary slightly according to display pixel density). Take a look—it might be a bit better for you now.
You’ve also changed the font, right? Somehow I can’t even reproduce the old bad look by changing to Fira :-) Anyway the new look is great, thank you! My only remaining nit is that
looks too heavy, e.g. in this post.Yeah, the body text is in Source Sans Pro now (seems to be more consistent across platforms[1]).
Good point about the heading weight. In the grey theme the heavy headings don’t fit… I’ll have to play around with different weights.
[1] “Consistent”, I say, and yet I still had to specify that Firefox on Windows (yes, specifically Firefox and specifically on Windows) should get a different weight… fonts, man…
Thank you! Though I like the brutalist theme even more now :-)
Do you have plans to implement a list of posts by user (without comments), a list of drafts, and an inbox? These are the only things I go to LW2.0 for, most of my time is now spent on GW.
Yes, definitely.
Ubuntu desktop with Chrome, Macbook Air with Chrome.