This was an interesting read. I personally disagree with one of the points made but I think it is more of a "my machine" thing. I hate when text isn't black on white but that's because this laptop...
This was an interesting read. I personally disagree with one of the points made but I think it is more of a "my machine" thing. I hate when text isn't black on white but that's because this laptop I'm on has notoriously bad contrast and so when people listen to advice like his, the text becomes nearly unreadable for me. I had to copy-paste the text into VS Code to read the page after that point.
I'll be entirely frank. If you had to do this in 2019, you need a better display; or if it's a work laptop, you should tell your employer it's hurting your productivity for the reasons you...
I had to copy-paste the text into VS Code to read the page after that point.
I'll be entirely frank. If you had to do this in 2019, you need a better display; or if it's a work laptop, you should tell your employer it's hurting your productivity for the reasons you mention. Even cheap laptop & phone displays have for the most part excellent displays with good color reproduction now. Expecting the rest of the HTML-serving internet to adhere to your entirely-fixable needs seems unreasonable.
"Black" & "white" aren't just hex codes. In color design, they're the absence or presence of light with varying shades & hues. Provided the contrast isn't insanely low, any reasonable take on "black text on white paper" should look acceptable on any display.
If it was a screen-reader or color-blindness issue, sure, but there are existing accessibility rules for that (the fact that most sites don't implement them is another problem entirely). And although there are proposals for a high contrast flag, the most correct location to alleviate this issue currently is likely to find a browser plugin that will enhance contrast for you, or a plugin that allows you to load your own visual styles.
You might want to adjust your monitor or web browser, because the body text passes WCAG AA. I found it uncomfortable as well though, after reading the perfectly legible black-on-white. Maybe try...
You might want to adjust your monitor or web browser, because the body text passes WCAG AA. I found it uncomfortable as well though, after reading the perfectly legible black-on-white. Maybe try it again with fresh eyes.
However, some of the color choices are inaccessible because they are not contrasting enough. The inline code has a contrast ratio of 2.1:1 (WCAG requires 4.5:1 at least). And it's basically illegible. The <strong> text has a normal font weight (?!) and a contrast ratio of 2.26:1 with the surrounding text (required 3:1 for links).
I like this article for creative presentation and minimal CSS. But I really dislike lightened body text or changing it to not-black. Under my current extremely bright lights, the article's text is already lighter than an actual book.
I left a comment on HackerNews about this exact page. Funnily enough, since it's a rant, I expected it to be downvoted, while in fact it became my second most upvoted HN comment.
I left a comment on HackerNews about this exact page. Funnily enough, since it's a rant, I expected it to be downvoted, while in fact it became my second most upvoted HN comment.
You've expressed a common sentiment amongst programmers, but there's a thing that you've failed to identify, which is that design does solve problems, you just don't value those problems. Some of...
You've expressed a common sentiment amongst programmers, but there's a thing that you've failed to identify, which is that design does solve problems, you just don't value those problems. Some of those problems are actually brought up in the steps that this designer outlines.
For example, while you do not value a particular font, typesetting is something that people have been studying and doing for hundreds of years, and people still come out with new fonts all the time. If fonts were a "solved" issue, then we wouldn't be doing that. The problem that a font choice solves is an esoteric one; it actually changes how we feel about a site, though I use that "we" freely - it actually effects some people, and it's certainly not an exact science. There are loads of scholarly articles on typesetting and emotion - I'm not going to link to them here - but if you're interested in the problem that is solved it is, "What does the typesetting of my website say about the site?"
As another example, softening black and white contrast is a good idea, which you do not value. You say that "Black text has been fine since the first printing press." but that statement has nothing to do with #000000 on #FFFFFF. The print from printing presses isn't the same as pure black, and the white of paper is certainly not the blinding white of pure white, and making these concessions is actually an attempt to get closer to the contrast that we see on paper. The contrast ratio of "black on white" on the screen is 21:1 and a typical book is about 12:1. If you want to pick colours that hit that contrast, then a black of close to #333333 is pretty good, and I would always try to avoid pure black.
The colours they use for syntax highlighting are like a train wreck though.
I feel like you are attacking a straw man here. A straw man. How did you get this idea from my comment? Let's see what I've actually written: I've said that it's OK to typeset a page with a...
I feel like you are attacking a straw man here.
For example, while you do not value a particular font
A straw man. How did you get this idea from my comment? Let's see what I've actually written:
Not a big fan of @font-face. Another host to visit. Another asset to download. My fonts are fine. If I have the font you like, then great! If I don't, please make it look reasonable with system defaults.
I've said that it's OK to typeset a page with a particular font in mind, as long as it takes fall-backs into account.@font-face has known technical issues. A designer could add a link, so that I can—if I choose!—download the font, and not only see the page as it was meant to be seen, but also use the font myself (assuming it's a free font).
As another example, softening black and white contrast is a good idea, which you do not value.
Again, a straw man. The full comment:
Black text has been fine since the first printing press. And if you do want to make a page less in-your-face with regards to contrast, then it would be much better to dim the background. After all, the paper we read is mostly this grey-ish, yellow-ish colour.
(Emphasis added.) You took the thing I've said, made it look like I've said something opposite, and then said the thing yourself.
Overall, your message made me feel uncomfortable and painted me a design luddite, who thinks that black-on-white Helvetica is the pinnacle of all typesetting. Please don't do that.
I think "straw man" has a rather strong, negative connotation which isn't quite correct here since it means purposely misconstruing what someone said... when I think aphoenix probably simply...
I think "straw man" has a rather strong, negative connotation which isn't quite correct here since it means purposely misconstruing what someone said... when I think aphoenix probably simply misunderstood you and/or you were not entirely clear what you meant in the first place. And if I'm being honest, I took what you originally wrote as a bit of a luddite rant again modern webdesign conventions too.... as did quite a few other people as well, clearly.
Really can't agree with your linked comment. Books and newspapers don't have bright backlit screens. #000 on #FFF is much too strong. Dimming the background is fine, but full-blown contrast is...
Really can't agree with your linked comment.
Black text has been fine since the first printing press.
Books and newspapers don't have bright backlit screens. #000 on #FFF is much too strong. Dimming the background is fine, but full-blown contrast is definitely not easier on the eyes. Subtle shades are important.
I might not have gone to #555, but #333, certainly.
The colours they've used in the syntax highlighting just made everything a confetti explosion.
I really didn't think it was that bad, but that's a stylistic choice.
Not a big fan of @font-face. Another host to visit.
That's a bit of a non-sequitur. @font-face doesn't require another DNS lookup. I use it for locally-hosted assets.
And let's be frank: most system fonts are garbage. The best you can do is sans-serif, and that still doesn't get you far.
Massive headers are nothing but a waste of space.
They're popular for a reason. They set tone, and settle the reader in to the page before getting down to business. I'd accept an argument about file size for large hero images, though.
That was neatly done, I don't like the fact that web font libraries are encouraged, adds unnecessary bloat. Use a font stack that is widely available on most OS.
That was neatly done, I don't like the fact that web font libraries are encouraged, adds unnecessary bloat. Use a font stack that is widely available on most OS.
This was a good read. I don't like the trend of websites having gigantic headers, but I think the style guidelines in general were really helpful.
This was an interesting read. I personally disagree with one of the points made but I think it is more of a "my machine" thing. I hate when text isn't black on white but that's because this laptop I'm on has notoriously bad contrast and so when people listen to advice like his, the text becomes nearly unreadable for me. I had to copy-paste the text into VS Code to read the page after that point.
I'll be entirely frank. If you had to do this in 2019, you need a better display; or if it's a work laptop, you should tell your employer it's hurting your productivity for the reasons you mention. Even cheap laptop & phone displays have for the most part excellent displays with good color reproduction now. Expecting the rest of the HTML-serving internet to adhere to your entirely-fixable needs seems unreasonable.
"Black" & "white" aren't just hex codes. In color design, they're the absence or presence of light with varying shades & hues. Provided the contrast isn't insanely low, any reasonable take on "black text on white paper" should look acceptable on any display.
If it was a screen-reader or color-blindness issue, sure, but there are existing accessibility rules for that (the fact that most sites don't implement them is another problem entirely). And although there are proposals for a high contrast flag, the most correct location to alleviate this issue currently is likely to find a browser plugin that will enhance contrast for you, or a plugin that allows you to load your own visual styles.
You might want to adjust your monitor or web browser, because the body text passes WCAG AA. I found it uncomfortable as well though, after reading the perfectly legible black-on-white. Maybe try it again with fresh eyes.
However, some of the color choices are inaccessible because they are not contrasting enough. The inline code has a contrast ratio of 2.1:1 (WCAG requires 4.5:1 at least). And it's basically illegible. The
<strong>text has a normal font weight (?!) and a contrast ratio of 2.26:1 with the surrounding text (required 3:1 for links).I like this article for creative presentation and minimal CSS. But I really dislike lightened body text or changing it to not-black. Under my current extremely bright lights, the article's text is already lighter than an actual book.
I left a comment on HackerNews about this exact page. Funnily enough, since it's a rant, I expected it to be downvoted, while in fact it became my second most upvoted HN comment.
You've expressed a common sentiment amongst programmers, but there's a thing that you've failed to identify, which is that design does solve problems, you just don't value those problems. Some of those problems are actually brought up in the steps that this designer outlines.
For example, while you do not value a particular font, typesetting is something that people have been studying and doing for hundreds of years, and people still come out with new fonts all the time. If fonts were a "solved" issue, then we wouldn't be doing that. The problem that a font choice solves is an esoteric one; it actually changes how we feel about a site, though I use that "we" freely - it actually effects some people, and it's certainly not an exact science. There are loads of scholarly articles on typesetting and emotion - I'm not going to link to them here - but if you're interested in the problem that is solved it is, "What does the typesetting of my website say about the site?"
As another example, softening black and white contrast is a good idea, which you do not value. You say that "Black text has been fine since the first printing press." but that statement has nothing to do with
#000000on#FFFFFF. The print from printing presses isn't the same as pure black, and the white of paper is certainly not the blinding white of pure white, and making these concessions is actually an attempt to get closer to the contrast that we see on paper. The contrast ratio of "black on white" on the screen is 21:1 and a typical book is about 12:1. If you want to pick colours that hit that contrast, then a black of close to#333333is pretty good, and I would always try to avoid pure black.The colours they use for syntax highlighting are like a train wreck though.
I feel like you are attacking a straw man here.
A straw man. How did you get this idea from my comment? Let's see what I've actually written:
I've said that it's OK to typeset a page with a particular font in mind, as long as it takes fall-backs into account. @font-face has known technical issues. A designer could add a link, so that I can—if I choose!—download the font, and not only see the page as it was meant to be seen, but also use the font myself (assuming it's a free font).
Again, a straw man. The full comment:
(Emphasis added.) You took the thing I've said, made it look like I've said something opposite, and then said the thing yourself.
Overall, your message made me feel uncomfortable and painted me a design luddite, who thinks that black-on-white Helvetica is the pinnacle of all typesetting. Please don't do that.
I think "straw man" has a rather strong, negative connotation which isn't quite correct here since it means purposely misconstruing what someone said... when I think aphoenix probably simply misunderstood you and/or you were not entirely clear what you meant in the first place. And if I'm being honest, I took what you originally wrote as a bit of a luddite rant again modern webdesign conventions too.... as did quite a few other people as well, clearly.
Really can't agree with your linked comment.
Books and newspapers don't have bright backlit screens. #000 on #FFF is much too strong. Dimming the background is fine, but full-blown contrast is definitely not easier on the eyes. Subtle shades are important.
I might not have gone to #555, but #333, certainly.
I really didn't think it was that bad, but that's a stylistic choice.
That's a bit of a non-sequitur. @font-face doesn't require another DNS lookup. I use it for locally-hosted assets.
And let's be frank: most system fonts are garbage. The best you can do is
sans-serif, and that still doesn't get you far.They're popular for a reason. They set tone, and settle the reader in to the page before getting down to business. I'd accept an argument about file size for large hero images, though.
That was neatly done, I don't like the fact that web font libraries are encouraged, adds unnecessary bloat. Use a font stack that is widely available on most OS.