Unlike you I do have a lot of experience in graphical stuff, specifically finer art. And I do understand more then the average person on color theory.
The thing to keep in mind with all of this is that black isn't black. White isn't white. White and black have tints. You can have cool whites, and cool blacks. You can have warm whites and warm blacks. What you will never have is white whites and black blacks.
Lowering color contrast is a trick that is used in art to make things seem far away or behind the more colorful pieces of art. Part of that is because reduced contrast makes details harder to see, which corresponds in people's minds to distance because distance makes details harder to see. (other factors are going to be things like that atmosphere has it's own colors and these begin to compete and wash out colors at a distance).
High contrast makes it easier to read text. But it needs to be the right type of high contrast.
If you try to pick the blackest black you can and the brightest white then that means you are letting the viewer's monitor dictate what the tinting will be. And mixing colors incorrectly results in a shimmering or 'vibrating' effect in the eyes. So depending on the user's settings it may be easy to read or it could be irritating. Which as a designer isn't going to be something you want.
I have a idea that the author of the "Web Design in 4 Minutes" is extremely good at writing CSS and not so hot at web design. Which are two different things.
I struggled with this problem a lot when I redesigned my website recently. I wanted a pure black background mainly for Amoleds (and because I love it) but couldn’t settle on a text color other than white. The problem I had was due to all those color shifting night modes like f.lux or iOS’s Night Shift. Once I used that on top of a tinted white, the text looked way to colorful which I thought to be distracting.
Once I figured out a good way to let my users change from Night Mode (dark bg) to Day Mode (white bg) without any scripts I plan to implement that as an option.
I don't think "dark theme" is always the right answer, but I think with a new medium, a new basic is worth considering.
Reflective media like paper behave a little differently than emissive media like an LCD. A normal sheet of paper under normal lighting conditions won't reach the same brightness as an LCD. An LCD is much bigger than any reasonable book and it emits light uniformly across it's entire area (close to impossible for any piece of paper unless it's affixed on a flat plate). Also most paper is not actually very white.
The goal of design isn't to correct the user, but to correct for the user.
But you can't solve brightness problem with just design of a web page: you can't know for sure that all of your users are in the dark, or that their monitors emit some well known amount of light. Unless, of course, you do natural selection thing by making another category of users suffer and, eventually, leave your page because of your design.
And why is it web designer's job to adapt to myriad of real world devices and conditions? Shouldn't DPIs and automatic brightness correction things in hand-held devices and other OS-side tricks handle this problem already?
Then again, what modern designers are correcting for with, say, slick hair-thin fonts? It only adds extra work: now I need to disable these fonts somehow to make page readable. That's almost like calibrating brightness with a piece of paper in the post above.
However, I've also started to spend more and more time on my eink Android tablet. Video is of course unwatchable, some apps refuse to launch, and scrolling is unpleasant at best. Still, I think the tradeoffs are worth it, especially late at night.
Content :: Fonts and Colors :: Advanced :: Allow pages to choose their own fonts
Firefox used to have an optional exception for icon fonts on the "allow custom fonts" switch which I found very sufficient. Not sure when it was removed or why, but that was a big loss.
This dingbat crap also hinders accessibility, as you can’t specify alt text like you could for images.
Keep in mind that paper is not an emissive surface, like an LCD panel is. Black-on-white is fine for e.g. e-ink displays or calibrated brightness (~15-30% on most displays, which is not the default).
While it is an additional HTTP request, it's not necessarily another host. You can perfectly host fonts in your own site
I use gulp-google-webfonts to download fonts to my resource folder and use them from there. Even then I'm careful not to use more than 1 or 2.
I will reiterate my past comment that it is inevitable for many non-English scripts.
AFAIK there is a similar problem for Japanese: MS Mincho/Gothic, MS PMincho/PGothic (this one is too popular that there are several metric-compatible free fonts), MS UI Gothic, Meiryo, Yu Gothic, Hiragino font family and of course Noto Sans CJK.
> But if you don't have a decent font on your machine, how the text is rendered?
Awfully. Imagine that everything is rendered in System or Fixedsys.
I just don't get the HN hatred for downloadable fonts in and of themselves. If you're talking about an extra megabyte or two of JavaScript and unoptimized fonts, okay, but that's a problem of implementation. Why this cranky "it's just the text that matters, stop trying to make it look pretty" mindset?
Many people select fonts where there isn't ambiguity between similar characters like o/O/0 and I/l/1. Reading the home page for the font [ https://concoursefont.com/ ] gives me a headache personally. The lowercase 't' and 'f' fight one another. The 'f' with its flowing curve and the 't' in its rigid straightness makes the text fail to flow well.
My favorite font is guilty of having ambiguous characters as well - and while I'm not personally very bothered by it - I can understand and empathize with the annoyance other people have towards issues like this.
I use Stylus to inject my own stylesheets and force every website to use my chosen fonts - their design be damned. But I also eventually write my own CSS for the site myself if I use it frequently so my opinion is likely invalid as 99.9999999% of users would never do that.
As an aside: I don't use Concourse as a body font; it's not something that strikes me as particularly suitable for long stretches of text. But I think it's fine in headlines. It also has multiple letter variations you can use, and my web site uses the "British" stylistic set, which has a different "f" and "t" (and "l" and a few other characters) from the default used on most of its site.
While I've definitely seen web pages that have gone bonkers with light grey text on an off-white background, a lot of folks seem to greatly overestimate how difficult to read "grey text" is. I've seen folks on HN rail against #444 text -- which even on an #EEE background is over an 8:1 contrast ratio.
That's their eyes against your words, and I'd be far more likely to trust the judgement of their eyes because they are the ones consuming your content.
A lot of designers seem to love ignoring the complaints of their users, forgetting that those users are their audience and pissing them off will quickly make them leave.
I have to disagree with your disagreement. Paper and screens are completely different. Paper is passive whilst screen emit light.
So it's much better to have screens have a dark background and emit the text, so our eyes aren't as strained receiving so much light. It's far easier to see a headlight in the dark for example then during the day.
Whilst for paper, the only reason it's black on white was that we had dark ink which went on light materials. It's a lot harder to find light ink that goes on dark material.
I did not take this to mean a non-inverted color scheme is hard. I understood this as pure black on pure white is harsh.
Notice he uses #566b78 as the body color instead of #000000.
Rewording, I am tired of "pretty" being an add-on or, worse, the entire product.
Isn’t this due to cost?
Again, this is a rant. I am just very tired of “designers” doing “pretty” stuff instead of solving a problem. And that problem is an aesthetically pleasing, not-eye-hurting, reasonably dense text.