9 ms·
Disclaimer: I am not a graphic designer. I am merely a programmer with an interest in well-crafted, understandable, and readable text. So, read this as an outsi
by ainar-g 8y ago
Disclaimer: I am not a graphic designer. I am merely a programmer with an
interest in well-crafted, understandable, and readable text. So, read this as
an outsider rant rather than an informed opinion.
Black text on a white background can be harsh on the eyes.
I have to disagree about the problem here. 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.
The accent color can be complemented with more subtle shades, to be used on
borders, backgrounds, or even the body text.
The colours they've used in the syntax highlighting just made everything a
confetti explosion. I am not against syntax highlighting, but it shouldn't be
this colourful, unless you give every identifier a computable colour to make
misprints more noticeable.
Since text is the main content of a webpage, using a custom font gives the
page even more noticeable identity.
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.
Let's enhance our header with a nice background image from Unsplash.
Let's not. Massive headers are nothing but a waste of space.
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.
- zamalek 8y ago> Black text has been fine since the first printing press 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).
- altfredd 8y agoSmartphones tune down brightness in power saving mode (and so do e-ink books). Most websites are barely legible under those conditions, because web designers have been so heavily corrupted by backlight.
- tomjakubowski 8y agoFurther, book paper - particularly for non-technical books, where diagrams are rare and reading is done in long, uninterrupted stretches - is often intentionally off-white, to lower the contrast and make it easier on the eyes.
- mamon 8y agoOff-white paper is there for cost-saving reasons, used mostly for cheap romances and thrillers typically sold in airport bookstores. I don't think they even consider readers comfort when choosing it.
- copperx 8y agoTextbooks with glossy, bright white paper are a pain to read under a library light. But they make images look great.
- jdmichal 8y agoI'm with you on fonts. So much so that my first Firefox customization on any computer is locking down the font. Every webpage gets the same font, because I like that font and find it readable and I don't see why I should have to look at anything else. Content :: Fonts and Colors :: Advanced :: Allow pages to choose their own fonts
- Grollicus 8y agoI'd like to use this too. Currently, my adblocker is blocking fonts, and fontawesome is a nightmare because icons everywhere are missing. How do you handle that?
- jdmichal 8y agoSadly, I don't. This breaks a few sites terribly, as I end up with random characters instead of whatever the "awesome" icon was supposed to be. Usually it's obvious enough from context what the icon should have been, and it just looks ugly.
- layoutIfNeeded 8y agoKeep sending them emails until they change it to SVG. Fonts are not supposed to be (ab)used like this.
- SquareWheel 8y agoIt's the user breaking the convention in this case. They're capable of fixing the page if they want to. Spamming the author with emails would simply be harassment.
- layoutIfNeeded 8y agoActiveX controls used to be conventional too. This dingbat crap also hinders accessibility, as you can’t specify alt text like you could for images.
- GoblinSlayer 8y ago
- mpolichette 8y agoI don't want to sideline a thread on a single point, but I do think there is a difference between the unlit black ink on white paper of years passed, and the modern backlit monitor shining like a bright a flash light in your eyes. I don't think "dark theme" is always the right answer, but I think with a new medium, a new basic is worth considering.
- reificator 8y agoI came to say almost the exact same thing. I use dark themes wherever possible, and flux when not, because backlit monitors are not print. 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.
- noneeeed 8y agoThis is why I send interesting articles etc to my kindle to read. It's so much nicer reading longform stuff on eink than a laptop screen. The conversion isn't always right, but it's normally good enough.
- doodpants 8y agoIf your monitor is shining like a bright flashlight in your eyes, then you have your monitor's brightness turned up too high. (And/or your room's ambient lighting is too low.) A window with a white background should appear no brighter than a white piece of paper held up next to your monitor. If you use this technique to adjust the brightness of your monitor, you can read black-on-white text all day long and never get eye fatigue. I've been adjusting my displays this way for ~20 years.
- rujuladanh 8y agoI almost agree with you, but the truth is even with almost minimum brightness, I still prefer that background color get slightly darker than pure white (and same in black backgrounds: the text should not be perfect white).
- mixmastamyk 8y agoIndeed #555 for text is ridiculous.
- chipotle_coyote 8y ago"Ridiculous" is subjective, but I tend to go by WebAIM's contrast guidelines for web accessibility when looking at text color vs. background color. While #555 text would be lighter than what I'd normally pick, if it's on an #FFF background, it's a contrast ratio of 7.45:1 -- which means it passes the most stringent WebAIM requirement (level AAA for normal text, which is a minimum of 7:1 contrast). 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.
- wtallis 8y agoIs it accurate to call those numbers contrast ratios when you seem to be ignoring gamma correction?
- chipotle_coyote 8y agoYou can take that up with the maintainers of the WebAIM contrast checker, if you think it horribly biases the results somehow. https://webaim.org/resources/contrastchecker/ https://webaim.org/resources/contrastchecker/
- userbinator 8y agoa lot of folks seem to greatly overestimate how difficult to read "grey text" is 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.
- mickael-kerjean 8y ago
- sixothree 8y ago> Black text on a white background can be harsh on the eyes. 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.
- Phrodo_00 8y ago> Not a big fan of @font-face. Another host to visit. While it is an additional HTTP request, it's not necessarily another host. You can perfectly host fonts in your own site
- ainar-g 8y agoTrue. But how many actually do that vs. how many just slap a “fonts.google.com” link because “meh”.
- Phrodo_00 8y agoYeah, which sucks. 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.
- davedx 8y agoI develop on the train to work a lot, where the wifi quality ranges from "can almost stream video" to "in the middle of a field". Whenever I add google fonts to a webapp I'm working on, I really notice it. Lately I've simply not been using them anymore for this reason.
- chipotle_coyote 8y agoYou don't need to visit another host just because you're using @font-face! The fonts can be stored locally. If you visit my home page, coyotetracks.org, it loads five fonts (bold and italic Concourse, and regular, bold, and italic Equity) for an extra 82.18K -- which, unless you're taking steps to prevent it, your browser is going to cache from that point on. (If you visit another page, you'll probably get the regular version of Concourse, too, for an extra 11.45K.) 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?
- ainar-g 8y agoThis was answered in a sibling thread: https://news.ycombinator.com/item?id=19608696 https://news.ycombinator.com/item?id=19608696.
- Nadya 8y agoWhat is the username in this image? [ https://i.vgy.me/faxIj4.png https://i.vgy.me/faxIj4.png ] 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/ 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.
- chipotle_coyote 8y agoI suppose, as selfish as it might be, that I would like people to at least try to see if they can bear to use a web site the way I designed it, perhaps for the same reason a conscientious chef would very likely prefer you to at least try her food before immediately reaching for the salt and pepper. 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.
- natermer 8y agoYou may be wrong or may be right, but all I can say that after looking at the demo the text became significantly more difficult to read after the CSS coloring was applied to it. 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.
- Orva 8y agoBlackest black and whitest white used together will trigger my dyslexia and makes reading almost impossible. Even though I have very mild case of dyslexia! But like you said, slight tint makes wonders. Even in my case.
- kevingrahl 8y agoAssuming I can’t change my background color to anything else than #000000, what kind of text color would you suggest other than #fff to improve readability? 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.
- colechristensen 8y ago>I am just very tired of “designers” doing “pretty” stuff instead of solving a problem Rewording, I am tired of "pretty" being an add-on or, worse, the entire product.
- philliphaydon 8y ago> Black text has been fine since the first printing press. Isn’t this due to cost?
- lifthrasiir 8y ago> 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 will reiterate my past comment that it is inevitable for many non-English scripts. https://news.ycombinator.com/item?id=19569571 https://news.ycombinator.com/item?id=19569571
- GoblinSlayer 8y agoOnly Korean? But if you don't have a decent font on your machine, how the text is rendered?
- lifthrasiir 8y ago> Only Korean? 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.
- dalore 8y ago> I have to disagree about the problem here. 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. 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.