But that makes it easier to read, you can't read a lot of things at once and you can always scroll. Also less strain to the eyes as they don't have to move horizontally a lot.
Making an unfounded assertion that long lines cause eye strain doesn't make your css any better. I certainly don't suffer from such a debilitating limitation. Anyone who does can just make their window narrower, or bump up the font size in their browser.
Also, if you're looking to reduce eye–strain then you shouldn't reduce the contrast of the text with the background color.
You are behaving as if I have changed hn itself. I haven't. If you don't want to, you don't have to use the changes.
Also, I hope you do buy a monitor with more than 480p res to understand that the world has moved on and there actually is more content on the monitor than you see rn.
Your defensiveness is really unwarranted. GP is critiquing the way you’ve positioned your theme; in return, you’re teetering on the cusp of directly insulting them.
I take this comment from GP as not criticizing but just showing his/her superiority.
> Making an unfounded assertion that long lines cause eye strain doesn't make your css any better. I certainly don't suffer from such a debilitating limitation. Anyone who does can just make their window narrower, or bump up the font size in their browser.
He/She is certainly not providing any critical feedback.
I do apologize for lashing out, and I don't have any excuse to put in for that.
I appreciate that you're trying to improve your skills as a designer by practising at designing things. That's good. However, to be a great designer you must recognize the difference between a design that is trendy (dark mode, lots of blank space, low contrast text colors) and a design that is great (actual measured usability).
Keep in mind the phrase "the customer is always right". This was written down by a product designer early in the 20th century (whose name I have sadly forgotten). This was the pithy phrase he used to summarize his primary point, which was that a product designer cannot allow himself to be angry at consumers for purchasing his competitor's products. If you think that your competitor's products are ugly or badly designed but consumers are purchasing them any way, you cannot simply write off the consumers as uneducated or lacking in taste. Instead, you have to recognize that you are the one who is wrong. Perhaps your elegant design has hampered the actual usability of the product, or increased the cost of the product beyond what the market can bear. Or perhaps your taste is simply different from the tastes of most people. Regardless of the reason, the consumers are spending real money on things so they're the ones who have the right to decide which design is better.
Now let's look at what your source for short line lengths says:
> It turns out that the subconscious mind is energized when jumping to the next line (as long
> as it doesn’t happen too frequently, see above bullet point). At the beginning of every new
> line the reader is focused, but this focus gradually wears off over the duration of the line
> (“Typographie”, E. Ruder).
This must be the funniest thing I've read all month. The "mind is energized when jumping to the next line"? What tripe. If that's an accurate quote from something this E. Ruder wrote, then I know that E. Ruder is purely a BS artist. If it's a bad summary of what E. Ruder wrote, then the author of this "article" is a hack. It is quite probable that both are true. You're not going to become a great designer by reading this pre-digested pablum. You must perform your own research, or at least read the primary sources from people who have.
To me it is because I can't stand dark themes or pages that artificially restrict text flow width such that I have giant empty seas of nothingness on either side of my maximized browser window, so YMMV. The only thing really wrong with HN's current styling is that it uses microscopic fonts so I have to zoom in the page. Luckily browsers all remember text zoom settings.
That line length should be restricted in body copy is a universally accepted principle among typographers [0], and has been for a very, very long time. The reason is a practical one: when line length passes a certain point, it is harder for the eye to track from the end of one line to the beginning of the next. Typographers may take more creative liberties when it comes to other bits of text, but for body copy where the reader will spend several minutes or even hours of time, legibility and reading comfort are top priorities.
This is why printed text with smaller type or larger paper will almost always employ larger margins, multiple columns, or both. In print, when a high per-page word count is desired, multiple columns is a go-to solution. But multiple columns for body copy is awkward on the web, since we're used to scrolling vertically—and real estate is free. So the best solution in most cases is simply to add margins.
[0] I like to point people to Matthew Butterick's excellent (and free) Practical Typography (https://practicaltypography.com/line-length.html), but any introductory typography book will have a section on line length.
Whilst the efforts to create something are not nil, and I do want to acknowledge that, there is a problem with the contrast being so low.
Low contrast webpages do appear to be all the rage with newer designers so perhaps I can point out the problem with that with two small anecdotes.
I, like around 1% of the population, am "blue-black" colour blind. Not something that generally affects me in day-to-day life, but the colours I see are darker and less contrasting to what everyone else sees. 1% of the population is not an insignificant proportion of the world. The lack of contrast is such that all the bylines dissappear. Worse, clicked links also dissappear. Yet, because the from-domain text is higher contrast, it remains visible.
As for the comment box/button... Almost felt like it was deleted. Took me a moment to confirm it wasn't hit by a display none.
Second anecdote. Everything except .title has a font-size set relative to the browser, which is good. Optic neuritis makes things noisier for me, so the base font-size of my browser is set a little higher. Which, unfortunately, makes that 24px decleration stick out like a sore thumb. It doesn't scale like everything else.
Thanks for the feedback, I didn't know about that specific condition. I would suggest playing with the CSS to match the contrast you are favorable with, probably a white on black would work fine.
Also, I have updated the title size with rem units as well. Thanks for pointing that out.
So HN is black, then you click on any article and then the screen turns white (because most web sites are white) and your retinas burn with the strength of a thousand suns. Just nope.
I used to love dark themed everything until I finally started letting a lot of sunlight into my office. Now I find dark impossible to see in a well lit room.
What I also discovred is that I like consistency more. So instead of dark themes at night, I am enjoying the blue shift thing that brings the blue down a lot.
What I also discovered that drives me bonkers: how come I can trivially change brightness on a laptop monitor but none of my desktop screens? I badly want to bring them way down at night.
> how come I can trivially change brightness on a laptop monitor but none of my desktop screens?
In Windows I'm using a free app called Twinkle Tray that sits right in the Taskbar and you can use the mouse wheel or click it to increase/decrease the brightness. In Mac I use Brightness Slider, also free. These apps have been life savers!
I did something similar with Stylus a while back. I made it light on dark. I didn't mess with the font sizes (even though, yes, they are too small imo).
What I like about the current frontpage is that it's a page. I can very quickly scan through the headlines for something that sounds interesting, much quicker than if I had to scroll. Also, and I cannot explain just why, but somehow it's easier on my short term memory to have everything in front of me at once.
Regarding the colors, I prefer the current ones as I'm a bright-mode guy.
Regarding max-width I think yours is too small, but you may have a point that HN's one is too large. I might play around with one that is just a little bit below the current one and see how I feel about it after using it for a while.
The text color in comparison to the background partially fails accessibility due to low contrast.
On the other hand, the titles on the overview page are now giant and unnecessarily spaced out, making threads of interest three times harder to find. I can see hard limiting the width on text for longer text (e.g. comments) but on the front page it's unnecessary and contributes to the problem above.
For such an arrogant title it does not hold up - "does not follow every 2021 trend" =! "bad".
Dark mode doesn't equal not "an eyesore". Take for example a sunny day in a well lit room the reduced contrast would make things _harder_ to read. So light mode wins there. Inverse that at night (typically). For me the low contrast of the text and the background is harder to read than HN's default.
I happen to like the density of information on HN versus the increased whitespace too. HN is compact but not too compact (for my tastes).
It's contextual, I'd recommend putting forth your work next time as an alternative and not _the alternative_.
34 comments
[ 2.6 ms ] story [ 86.1 ms ] threadAlso, if you're looking to reduce eye–strain then you shouldn't reduce the contrast of the text with the background color.
Also, I hope you do buy a monitor with more than 480p res to understand that the world has moved on and there actually is more content on the monitor than you see rn.
Also irrelevant: https://baymard.com/blog/line-length-readability
> Making an unfounded assertion that long lines cause eye strain doesn't make your css any better. I certainly don't suffer from such a debilitating limitation. Anyone who does can just make their window narrower, or bump up the font size in their browser.
He/She is certainly not providing any critical feedback.
I do apologize for lashing out, and I don't have any excuse to put in for that.
Keep in mind the phrase "the customer is always right". This was written down by a product designer early in the 20th century (whose name I have sadly forgotten). This was the pithy phrase he used to summarize his primary point, which was that a product designer cannot allow himself to be angry at consumers for purchasing his competitor's products. If you think that your competitor's products are ugly or badly designed but consumers are purchasing them any way, you cannot simply write off the consumers as uneducated or lacking in taste. Instead, you have to recognize that you are the one who is wrong. Perhaps your elegant design has hampered the actual usability of the product, or increased the cost of the product beyond what the market can bear. Or perhaps your taste is simply different from the tastes of most people. Regardless of the reason, the consumers are spending real money on things so they're the ones who have the right to decide which design is better.
Now let's look at what your source for short line lengths says:
> It turns out that the subconscious mind is energized when jumping to the next line (as long > as it doesn’t happen too frequently, see above bullet point). At the beginning of every new > line the reader is focused, but this focus gradually wears off over the duration of the line > (“Typographie”, E. Ruder).
This must be the funniest thing I've read all month. The "mind is energized when jumping to the next line"? What tripe. If that's an accurate quote from something this E. Ruder wrote, then I know that E. Ruder is purely a BS artist. If it's a bad summary of what E. Ruder wrote, then the author of this "article" is a hack. It is quite probable that both are true. You're not going to become a great designer by reading this pre-digested pablum. You must perform your own research, or at least read the primary sources from people who have.
Nice work though. I am sure some will appreciate it.
To me it is because I can't stand dark themes or pages that artificially restrict text flow width such that I have giant empty seas of nothingness on either side of my maximized browser window, so YMMV. The only thing really wrong with HN's current styling is that it uses microscopic fonts so I have to zoom in the page. Luckily browsers all remember text zoom settings.
This is why printed text with smaller type or larger paper will almost always employ larger margins, multiple columns, or both. In print, when a high per-page word count is desired, multiple columns is a go-to solution. But multiple columns for body copy is awkward on the web, since we're used to scrolling vertically—and real estate is free. So the best solution in most cases is simply to add margins.
[0] I like to point people to Matthew Butterick's excellent (and free) Practical Typography (https://practicaltypography.com/line-length.html), but any introductory typography book will have a section on line length.
Low contrast webpages do appear to be all the rage with newer designers so perhaps I can point out the problem with that with two small anecdotes.
I, like around 1% of the population, am "blue-black" colour blind. Not something that generally affects me in day-to-day life, but the colours I see are darker and less contrasting to what everyone else sees. 1% of the population is not an insignificant proportion of the world. The lack of contrast is such that all the bylines dissappear. Worse, clicked links also dissappear. Yet, because the from-domain text is higher contrast, it remains visible.
As for the comment box/button... Almost felt like it was deleted. Took me a moment to confirm it wasn't hit by a display none.
Second anecdote. Everything except .title has a font-size set relative to the browser, which is good. Optic neuritis makes things noisier for me, so the base font-size of my browser is set a little higher. Which, unfortunately, makes that 24px decleration stick out like a sore thumb. It doesn't scale like everything else.
Also, I have updated the title size with rem units as well. Thanks for pointing that out.
https://www.wired.com/2016/10/how-the-web-became-unreadable
0: https://darkreader.org/
What I also discovred is that I like consistency more. So instead of dark themes at night, I am enjoying the blue shift thing that brings the blue down a lot.
What I also discovered that drives me bonkers: how come I can trivially change brightness on a laptop monitor but none of my desktop screens? I badly want to bring them way down at night.
If DDC/CI support was more consistent and universal, this would be really easy to do.
https://en.wikipedia.org/wiki/Display_Data_Channel#OS_suppor...
In Windows I'm using a free app called Twinkle Tray that sits right in the Taskbar and you can use the mouse wheel or click it to increase/decrease the brightness. In Mac I use Brightness Slider, also free. These apps have been life savers!
https://gist.github.com/blakewatson/dcfa8350f279b1fce7a7cd96...
Whether HN is an eyesore or not as is is a matter of personal opinion.
A better title I think would be "Dark mode for Hacker News" That doesn't put personal opinion/spin into the title.
Regarding the colors, I prefer the current ones as I'm a bright-mode guy.
Regarding max-width I think yours is too small, but you may have a point that HN's one is too large. I might play around with one that is just a little bit below the current one and see how I feel about it after using it for a while.
On the other hand, the titles on the overview page are now giant and unnecessarily spaced out, making threads of interest three times harder to find. I can see hard limiting the width on text for longer text (e.g. comments) but on the front page it's unnecessary and contributes to the problem above.
For such an arrogant title it does not hold up - "does not follow every 2021 trend" =! "bad".
I happen to like the density of information on HN versus the increased whitespace too. HN is compact but not too compact (for my tastes).
It's contextual, I'd recommend putting forth your work next time as an alternative and not _the alternative_.