Not quite perfect. Page links to "Don't be dumb with typography" which talks about using smart quotes instead of dumb quotes - then in the quote block further down the page uses dumb quotes :-(
Yea, seems like it would center it without much fuss. That might be a bit too big for mobile browsers, so choosing that width might be a bit of an odd choice.
Some people see `px` and assume it's physical pixels and because they know some devices have different pixel densities, they go complaining about how coding in terms of pixels instead of `em` doesn't account for density, unaware that `px` refers logical pixels[0]
First, that article is about smartphones. Second, even on smartphones, logical or physical, pixels are not related to text, they are related to the screen resolution.
Not sure what argument you're trying to make; can you clarify? This article is also partially about smartphones (dark mode, responsiveness, etc). Back when `em` was not a thing yet, text was measured in `px`, where 16px was considered to be the "default" size for readability purposes (and `em` sizes are a function of a base value in `px`).
Saying that pixels are unrelated to text isn't really accurate, since text obviously occupies space and pixels are a unit of space, and back in the day, expressing layout relationships in terms of pixels was fairly standard.
Yes I'm aware of that. But regardless of whether you mean this in the sense of adapting to user stylesheets or the idea that disparate elements' font sizes should relate to each other, they both strike me as maintainability trade-offs that can reasonably go either way. An elitist tone seems a bit unnecessary in that context.
WHY. WHY DO PEOPLE DO THIS. To give this person credit they have at least chosen some sensible values, rather than gone with something that was just about enough on an expensive graphic designer high-contrast monitor and then not tested it on anything else. Leaving the rest of us squinting to try and read text or manually overriding CSS.
Despite not being a complete idiot, they have still made the content harder to read. Contrast is good. It makes things easier to read. Why would you want less? Yes I know the art theory stuff about never using black because it doesn't appear naturally. You know what else doesn't appear naturally? TEXT. Black on white is a perfectly acceptable default, please don't change it for your body text without a really good reason.
(ranty style done in homage to the linked websites, but it felt good to get that out)
Because they write the website on a high res Macbook and prefer their amazing artistic talents over the ability for people with cheaper computers or poorer eyesight to read their art.
God I hate lowered contrast on sites, especially as I'm aging. Give me the crisp edges of black and white, if I want to lower the contrast I'll turn down my brightness settings.
A fundamental design principle is that full black is unnatural. It's like, point three on "I don't know anything about design, give me a quick list" articles. And it's pretty true, frankly. Making text a little more navy or gray makes a big difference. Sure people have eyesight issues and not everyone has a great monitor, but most people prefer it this way.
Very true, however better has chosen #444 whereas #333 seems to work a bit more consistently.
One thing you should always consider during the requirements phase of a web application is whether your app is likely to be used projected on a conference room wall. Things like contrast and fonts make huge differences in such hostile settings, and available screen real estate is also considerably limited.
Great point yeah. I also think it should be easier to tell browsers to make text high contrast, design be damned. Fundamentally it's an accessibility issue.
Last time I was in this situation, the UX expert and I had the entire dev team stand at the back of a conference room and vote on which font was most legible. All but one agreed Verdana was the easiest. Not only that, but it was still more legible than our previous font at 1pt smaller text, which meant we could get more info onto the screen. Not tons more, but we were having to truncate text in some spots, and sometimes even one or two more letters is enough for people to get the gist without having to backseat drive the presenter. It's subtle but I was beginning to recognize this as an important waste of time and energy when we were dogfooding our app.
When people are already getting short with each other before you even get to the actual reason for the meeting, you know it's going to be a long day.
But corporate wanted our fonts to match their other product. I don't know if it was my imagination or not, but it felt like that act broke a couple people on the team, myself included.
Slightly greyer is OK, but if you give up most the contrast and use a small font, a large fraction of the population will find your site hard to read. There are way too many low-contrast web sites out there.
I have sometimes used slightly grey and used "full" black for small emphasis (when the bold version available for the font in use is a just too much or you want a level in between). On pages where other colours are used for highlighting things (links, call-outs, warnings, ...) it can also help them not look a bit more subtle than you want agaist the hard black.
You have to be very careful not to rely on it though: as you mention lighting and protection conditions or just plain bad monitors can kill the more subtle difference completely. And, more importantly, those with sight deficiencies might miss it even in ideal circumstances.
If you're within 10-15% or so of white or black, I am fine with the "slightly grey" look, assuming I don't have an AMOLED screen, where your dark grey is just wasting my phone battery.
I really only get annoyed with the "less contrast" meme when it's something like a Google website where the UI disappears if your monitor's contrast settings weren't tuned professionally. (I used to have to adjust my monitor settings around making the UI elements on Google+ visible.)
If everyone could agree to not use black-on-white, we could set our monitor brightness to a sane value and have enough contrast to read. In order to read black on white text, I have to turn my backlight down to like 10%, and then turn it up to about 40% to watch a movie.
More contrast isn't always better, or you would read text by printing out foil stencils and aiming them directly at the sun to read.
Too much contrast can't be fixed by changing your brightness either unless you like spending several hours calibrating it again after every single blogpost you read.
I have said it pretty often in this comment section, but the huge majority of internet users has no finely calibrated screens at all.
They also won't have screen where they are likely to feel anything has too much contrast.
IMHO a screen which displays a common black and white website with so much contrast that it strains the eye is a 100% failed product which completely ignores reality.
> IMHO a screen which displays a common black and white website with so much contrast that it strains the eye is a 100% failed product which completely ignores reality.
A website which has so much contrast that it strains the eye on any spec-compliant monitor or a cheap 1990s CRT is a failed product. Reducing the quality of monitors to compensate for shitty websites can't be the solution.
Black and white web pages had been pretty much the standard since well the invention of the internet...
Same for black and white text documents.
Or black and white shell promts.
And so on.
So it's pretty obviously for me what is detached from reality and what isn't.
EDIT: It's the color space which is broken I guess, white (on a website) should be neutral background white not eye hurting brightness and the color space should have some "whiter then (normal,neutral) white" colors. I.e. the normal white color should not have defaulted to maximal brightness.
> EDIT: It's the color space which is broken I guess, white (on a website) should be neutral background white not eye hurting brightness and the color space should have some "whiter then (normal,neutral) white" colors. I.e. the normal white color should not have defaulted to maximal brightness.
Sure, but that's already the standard.
The people who obsess over using #fff as default white just happen to be the ones whose monitors show #fff the way #ccc was supposed to be shown (and used to be shown, on CRTs)
I never managed to read this article past its title. I always get distracted by the fact that, after one second, the text gets obscured behind a pop-up.
> Yes I know the art theory stuff about never using black because it doesn't appear naturally.
I think the underlying reasons for that are underappreciated.
When you pick #000000 for your text color, people won't see it as pure black anyway. Imperfections in your screen's backlighting aside, your screen reflects the ambient lighting, or, if you're outdoors and pointed the wrong direction on a sunny day, your screen reflects sunlight that is orders of magnitude brighter than the screen itself (measured in cd/m^2). #000000 never shows up as actual black either.
So if you're going to put black text on white background, just use #000000 on #ffffff. Nature doesn't need any more help to make text on screens hard to read.
On a good monitor, the color contrast between #ffffff and #000000 is far beyond the contrast possible in nature. No reflective material can reach those colors or that contrast.
That color contrast is perfect for a game, a movie or an image. But you don't want the feeling of something as bright as looking into the fucking sun mixed with the darkness of the deepest starless night. That's just painful, both in light mode and dark mode.
Just calibrate your monitor correctly, increase your contrast if your monitor can't even display Rec.709 sRGB, instead of compensating for your shitty monitor by making your website painful for anyone with a good monitor.
Yeah definitely. And also be sure to switch all your keys on your keyboard to a hardwood. I prefer mahogany for its bright clicks and depth of response versus the equivalent plastic keycaps.
If you use these high contrast colors, you will break it for users on good displays. That means potential investors, people on iPhones, people on expensive samsung phones.
Those are the people you usually want as customers. And you're making your website painful for them. That's a decision you can make, but don't be surprised if you'll fail with that attitude.
Even in that case you should consider that your readers might have a diverse range of devices, and configuring a 1000:1 contrast ratio isn't exactly the greatest solution.
Keep colors and contrast restricted to the range possible by reflective materials (i.e. what can be printed on paper or ever be encountered in nature) and all the issues are immediately gone. You don't have to use grey-on-grey (which is super annoying). Just keep to the range of colors a newspaper will have, or a zebra will have.
Over 99% of users don't, most phones are not high end and as such don't have such a screen.
> feeling of something as bright as looking into the fucking sun
Again, not a experience around 99% of internet users can follow, their devices don't get that bright, especially not on a per-pixel basis.
Also most people use devices in rooms with varying degrees of natural sunlight showing in.
And if whites are to bright then it's because my screen is wrongly setup for my eyes/usage. A perfect color calibrated screen is ironically often not a perfectly setup screen for normal usage.
> And if whites are to bright then it's because my screen is wrongly setup for my eyes/usage. A perfect color calibrated screen is ironically often not a perfectly setup screen for normal usage.
There are very specific definitions for colors, and what they mean.
#000000 means 0.1 nits, #ffffff means 100 nits. That's standardized and specified.
The screen can't be wrong if it correctly matches the standard. If real-world content doesn't obey the standard, the content is wrong, not the standard.
> #000000 means 0.1 nits, #ffffff means 100 nits. That's standardized and specified.
Uhm, scree brightness control is a thing. Adaptive brightness is standard even on non high end phones.
Same for desktops etc.
So a part of a standard which maps color to specific brightness levels is pretty much irrelevant outside of the unrealistic case of a perfect calibrated monitor in a perfect environment. Which does exist. But again is for most internet users unrealistic.
> So a part of a standard which maps color to specific brightness levels is pretty much irrelevant outside of the unrealistic case of a perfect calibrated monitor in a perfect environment. Which does exist. But again is for most internet users unrealistic.
If you modify the brightness in software, you can also tonemap it properly and retain the contrast easily.
Making sRGB 1000 nits is extremely bad colorimetry. sRGB is supposed to go with 80 nits in its original definition, and being an order of magnitude off indicates something very wrong with your system's concept of what "standard dynamic range" entails.
My own monitor calibrates sRGB to 100 nits (thank god), but a lot of consumer displays (especially smartphones) are so badly color managed that they display sRGB at 600nits and more, with no option to properly change that.
Generally, media and text need very different contrast ratios and colorspaces, and text should never use the full contrast available.
But the big issue is that most content is using entirely unmanaged colors, not even correctly setting them to sRGB (or actually the color profile of whatever shitty 6-bit 100:1 contrast panel from 2004 they managed to find on the dump).
If that was actually used, we wouldn't have any of these issues and everything would be correctly tonemapped. But they don't, they set no profile, which in some software means "whatever the display supports" (although recently enough software enforces "probably sRGB at 1000:1 contrast 100nits max brightness" luckily).
"Just calibrate your monitor". If only making every monitor calibrate perfectly was so simple. Sometimes you don't have permission or access to even calibrate said monitor. Your talking about nits like every monitor is able to control its nits output, which is certainly not true.
Sometimes, you just have a shitty monitor. There are entire communities dedicated to calibrating monitors as I'm sure you are aware, it's time consuming and can be expensive, it's not a solution, we have manufacturer ICC profiles for a reason.
I'm not even talking about using a spyder and calibrating it properly, even just manually changing the settings with a printed reference card can be worth a lot (or even by color matching by eye against an iPhone, as those have great default colors). Or even just manually setting the dials until it looks right.
But the reality is that I can't use some websites because they chose to make my experience worse so users with badly produced and badly designed devices have a better experience. We're yet again at a situation where obeying the standard is punished.
perfectmotherfuckingwebsite does it right: enough contrast that everyone can read it, not too much to be painful.
motherfuckingwebsite does it right, too: follow the preferences (which in my case is almost exactly the same as the perfectmotherfuckingwebsite)
The worst are websites with far too little or far too much contrast that don't even follow preferences. At work I've had to repeatedly go against designers wishes refusing to implement their design and saying: I'll implement you anything within of 4.5:1 to 10:1 contrast ratio. But I won't go below that (no, I can't make the text 10px tall in #c0c0c0 on #f0f0f0) nor above that.
> Even if that was true, nature includes light sources as well as reflective materials.
Emissive light sources in nature (except for rare occurrences like lightning, certain jellyfish and cherenkov radiation) are all black body radiation.
That's very different from the colors and contrast ratios possible by modern OLED monitors. The best example would be the blue LEDs used in modern OLED panels, which when they were introduced had a strange unnerving blue glow because that color just doesn't exist in nature.
Additionally, the contrast ratios possible by modern OLED panels are also far beyond anything in nature, as in nature anything that is bright, be it reflective or emmissive, will as result also light up its surroundings and reduce contrast naturally.
Also what's up with those side margins? A little margin is nice (HN's feel reasonable), but the margins on both PMFW and BMFW look like they follow the philosophy of maximizing scrolling and margins to cram a bunch of ads in the margins, only without the ads. One caveat might be that I'm viewing them on a desktop monitor and not on a cellphone.
(Edit: Okay, I should have read TFW. They mention the reason for the line width)
Apparently optimal reading width is approx. 65 characters wide.
There's definitely a sweet spot; I typically have my browser windows at 2/3 width on a 2560px wide monitor. 100% width lines are a chore to read honestly, there's definitely a higher cognitive load.
Do you like 400 nits of #ffffff right into your eyeballs? No? Me neither.
The alternative is absolute darkness with extremely bright text, which in turn makes it unreadable (if you have astigmatism as I do) and literally causes pain due to the high contrast.
Nothing in nature has such an extreme contrast.
The only reason anyone would ever use full contrast is if they have a shitty 6-bit monitor panel that doesn't even reach the contrast ratio of a shitty 1990's monitor. And they don't even have a proper color profile, so their computer thinks their monitor has all the contrast ratio in the world, and doesn't tonemap fuckall.
The only way to resolve this is if either everyone finally switches on a color managed workflow, or we outright ban the shitty panels where #000000 on #ffffff is necessary for readability instead of being just painful.
#ffffff is the color of looking directly into the sun and absolutely painful bright, #000000 is the color of the deepest, starless night. You need these colors for movies, for games, for images. But your text should never be the contrast between a starless night and looking directly into a star.
Increase the contrast of your monitor, calibrate your panel, but don't build a worse website to compensate for your shitty panel.
What books are you reading that have pure white pages with pure black text on them? At best they are eggshell or an off-white page. Also... books are nature now?
The not-triangular shape labeled "2200 matte paper" are all colors representable by reflective materials.
Colors outside of that range can only ever be produced by emissive materials, such as fire, stars, or your monitor.
All the colors your website uses should be from the range of reflective colors, as those are the ones seen in nature, and the ones your eyes are adapted to see.
The same applies also to black/white contrasts. Even vantablack next to a white sheet of paper (which would already be massively higher than any contrast in nature) still has a much lower contrast ratio than your monitor has.
> I want to be the one in control of my screen, not some random website.
That's not really an option, though. You'd have to separate text and media from the website, split it apart, and configure it separately, as most websites just have everything without any color management.
If these shitty websites with full contrast would at least set a colorspace for their images, so I could take the color profile of a cheap 2004 LCD as default for unmanaged media and text, I'd at least avoid the painful situation.
I like what my display does: it displays colors perfectly accurately, and I've got 3 monitors, all color profiled, and all with perfectly matching colors as result.
Colors are standardized and have a very specific meaning.
I just dislike the colors these website authors have chosen, often without knowing what they're choosing, as their monitors often distort the colors and show something wrong.
None of this can be solved until we've got widespread color managed workflows and tonemapping on the web.
If white on your monitor is brighter than a "bright white" sheet of paper viewed under the same lighting - or normal lighting if, for some reason, you've decided to work in the dark - you're doing it wrong.
Pure white on my monitor can't be created by CSS anyway, thank god, that'd be a full 1014 nits and actually is painful to look at.
But this is a general issue - you want to be able to represent extremely high contrast, far beyond the brightness of a sheet of paper in photos, movies, games, etc. But you want a significantly lower contrast for text. Sadly, websites mix both and offer no way to configure them separately.
OMG that website is so easy to read! It's a breath of fresh air!
What would be really cool is if web browsers offered a mode that forced a contrast minimum when viewing websites. This would benefit devs and users alike: Users would have a pushbutton way to make bad websites readable, and devs would have a push button to show what their site would look like to users who get annoyed enough to push that button.
Except they hijack scrolling (I think their intention is to “snap” to various sections). On my device, that puts the viewport at some point between sections, and I cannot manually scroll to correct it. So I can’t read the content either. Well done there.
Maybe unexpected for you, but not everyone agrees that more contrast is always better. I specifically choose color schemes in application I use that have less contrast as that seems better for me. There is certainly a point where contrast is objectively too high, and increases in monitor contrast and the increased use of HDR monitors make this more of an issue these days.
More high-contrast options exist then Black foreground on a White background.
I'm not disagreeing with your point, I loathe grey on grey sites. Being visually impaired nothing makes me rage-quit your site quicker if my DarkReader extension can't unfuck a site.
That is one awful website to read on mobile safari. The scroll bar is hijacked to make the text unreadable - how ironic!?
May be some should make scrollhijackrebellion.com ;-)
From what I can tell, this is due to designers cargo culting low contrast UIs. Whenever I've asked designers for citations that grey-on-gray UIs are better than black/white or white/black, I haven't gotten any good responses beyond some subjective answers. It's considered "general knowledge" but I haven't found hard data supporting it.
There are good reasons to avoid bright white backgrounds in certain cases since it can be hard to read in dark environments as your eyes switch between the bright screen and dark world. But in this case, pure white on pure black is still the best option for contrast. And the correct solution is to dim the backlight of the display to reduce brightness.
> WHY. WHY DO PEOPLE DO THIS. To give this person credit they have at least chosen some sensible values,
Dunno what the science says, but I really hate #000 on #fff, or vice-versa.
Yes, a lot of websites now go to the opposite extreme, but the reaction should simply be: so DON'T GO TO EXTREMES! Neither too much nor too little contrast are good.
And since you've pointed out they do go for sensible values here, why the outraged all caps???
This is one of my biggest pet peeves of "modern" websites. I've installed github.com/Fushko/font-contrast, and I've noticed myself clicking it on more and more in recent times.
You don't need a pure white background, but for gods sake PLEASE stop making the text light grey! Having to squint to read a website is headache-inducing.
Obviously too little contrast is bad and makes text hard to read, but it doesn't at all follow that MORE CONTRAST is always better. In fact it's pretty clear that too much contrast (which is equivalent to too much brightness, since there's a floor on how black the dark parts can get) can be a negative thing, that's why we don't all leave our displays at maximal brightness in all lighting conditions.
Another commenter mentioned that all text should just be black on white and people can dim their screens as necessary. It's somewhat a matter of personal preference, but this seems like a bad solution to me. Most people are not looking at exclusively text when browsing the web, there are lots of pictures and videos as well. Users shouldn't have to be constantly fiddling with screen brightness. In photos and videos, contrast is often used for dramatic effect, where you want some parts to get brighter than others. If the text is too high contrast so you have to dim your screen further to view it comfortably, then the photos or videos you see alongside the text won't be as impactful and enjoyable. Why should every piece of text you read be as dramatic as the most intense rays of sunlight or something in a photo or movie?
High contrast is harsh on the eyes. Black on white is very tiresome for me, and can become harder to read at the end of the day. I always set the background of my text editors to dark grey.
I personally find dark mode with too much contrast to be harder to read. I experience real discomfort otherwise, so I don't think it's as simple as "more contrast is always better".
I think it comes down to what you're used to, what your vision is like, and how sensitive your eyes are. Some prefer high contrast, some don't.
Because too much contrast on a monitor means white on black, which on average (that is, 99% of people's setups) brightness levels settings strains the eyes and people actively dislike it.
Its not some book reflecting ambient light, but a monitor with a led shining white (blue-ish) light on your eyes...
> Contrast is good. It makes things easier to read. Why would you want less?
One sensible reason for this is that it allows using higher contrast, or different hues w/ similar contrast, as a kind of emphasis that naturally stands out from the surrounding text. Same reasons why most terminal emulators display text as light-gray-on-black, while keeping pure white as a highlight color.
I was a little confused when I clicked through, but then I remembered I installed the Firefox add-on "Font Contrast" which has absolutely vital over the past several years, with so many web site designers who think `#666666` text looks good against a `#CCCCCC` background!
> And did you let the browser choose the font? Don’t make me read such text with Times New Roman.
I don't understand this attitude. If you don't like Times New Roman, why don't you change your browser's default font?
What I don't like is when websites tell my browser to use a different font or different colors than the ones I configured.
(Off-topic, but something that really annoys me is websites that make text in <textarea> very dark grey without changing the background; as I configured a black background and white text)
When I was taught design in the early oughts they said serif for print and sans for screens. I think it had to do with rendering at lower resolutions and small screen sizes.
Indeed, if you've ever had the chance to compare serifs on a 96dpi and a 170dpi monitor, or even 300dpi, it's absolutely incredible. At those resolutions serifs are absolutely awesome - but I'll never use them at lower resolutions again.
I think ideally, your browser should have a default serif, sans-serif, and monospace font, and websites should default to using it. I think there are useful cases for each style, but we really need not download seven fonts every time we load a website.
Why is that? Do you also find it infuriating when magazines and books don't use your preferred font? Perhaps it annoys you when web pages don't use your favourite colour for every element too.
Web pages are designed and typography is part of the design.
Books are often typeset by competent people (or at least people who are enough to have opinions on typesetting) while the web is usually the result of middle management and marketing seeing you as the dumb thing keeping some metric too low.
Magazines are their own thing although typically this does apply to the actual articles themselves; Someone who knows what they're doing lays them out.
Most websites are not designed for you, the 0.5% of users who are running some personalized style sheet override. They’re designed for the other 99.5% of people who don’t even realize that’s possible.
You have my full agreement. Disallowing website-chosen fonts (or enforcing minimum font size) can break some things slightly, but is worth it in my eyes. But with colors, there are way too many sites blindly assuming a black-on-white browser stylesheet not just for textarea, but for the entire website, making everything unreadable. And you can't win there: Turning of color overriding entirely makes for a calmer, more unified experience, but utterly breaks the usability of a number of interfaces (not the fault of the website).
Firefox allows you to lock fonts based on serif, sans-serif, and monospace. I have done such, along with also setting a minimum font size. And honestly the only thing it ever seems to break are those stupid icon fonts.
How much longer until we see one of these that imports 100mb of Javascript to make a responsive, reactive, server-rendered SPA. Saying things like "Just npx create-react-app fucker, it gives a better fucking user experience out of the box than your shit fucking browser does" and still claims to somehow be satire?
Alright so, I like these websites, because they are great. But a lot of people take their existence as a reason to shit on modern website development and say asinine shit like "all these websites are slow because they use react/vue/angular/whatever" so I registered modernfuckingwebsite.com to show that using modern build systems, modern tools, and all the hotness you can produce a fast, lightweight website that is just as "great" as these, completely negating their whole view of modern tools.
No, your motherfucking website is not improved by jamming your pet design theories into it. This is why all these spinoffs are terrible, with the possible exception of https://bestmotherfucking.website/ which removed things from a different spinoff.
The low contrast meme in web design is especially harmful.
I'm properly on board with getting rid of light grey on white but this is a little much. I don't even have that great a monitor and this is kinda burning my eyes out.
Take the background to a #111 and the text to a #ddd and you've hit my personal perfection
This is now my favourite article. I'm glad more people are waking up to the beauty of simplicity. Too much of our society is focused on adding more and more onto complex systems, with no thought on how to maintain said systems. This is how I view politics btw...
Design is cyclical, and we're already seeing more leading-edge content types pushing back to leaner design. Medium is almost an example of a business that started out like this but has since exploded into shit. I've been seeing Gemini coming up more and more as well so people are becoming aware of the issues with modern web "best-practices."
So yes, maybe it is time for somebody to build a business on this.
I get the push against overly stylized, heavy library downloads, etc. However, I'm leaning towards the Perfect MoFo version versus the MoFo version. A little CSS can do wonders. There's a lot of times my browser is full screen width or some size greater than 50% of width. To read the text on the MoFo version, I need to ever so slightly turn my head from line to line. It's right up there with coming late to the movie theater to have to sit in the very first row to watch Star Wars. Reading the scrolling text is a physical excersise.
“ This study examined the effects of line length on reading performance. Reading rates were found to be fastest at 95 cpl. Readers reported either liking or disliking the extreme line lengths (35 cpl, 95 cpl). Those that liked the 35 cpl indicated that the short line length facilitated "faster" reading and was easier because it required less eye movement. Those that liked the 95 cpl stated that they liked having more information on a page at one time. Although some participants reported that they felt like they were reading faster at 35 cpl, this condition actually resulted in the slowest reading speed.”
The overly curse happy programmer speak is so very stale. I'm not offended or anything but it's just not that great. It doesn't make the content more interesting. It doesn't make the author seem any cooler. It's just meh. It reminds me of Epic Meal Time; a facade of coolness based on cursing, alcohol and over the top food.
I love that instead of this style we're getting a new generation of programmers who are genuinely nice, calm and friendly. People such as Bob Nystrom or Andreas Kling, who don't feel the need to curse every few lines.
Fuck this^, seriously though, I don't think I've worked with a lot of programmers or frontend folks that cursed regularly but instead have been nice, calm and friendly. I don't think the point here was to make it more interesting or to make the author seem cooler. This is just a continuance of an existing joke.
There is always a balance with these things. I try to be careful to use profanity as a tool rather than a literary crutch.
If you only use a phrase like "fucking bullshit" once across an entire blog post or book, you will find it has far greater impact on the reader. They will think "wow out of 400 pages of polite discourse, this is the one thing the author would really like to highlight as adverse".
Agreed, this is what I liked about the book “The Martian”. The protagonist only curses a couple times in the book and they really carry weight given the circumstances.
Glad to see others feel this way - I swear often enough myself but I find this type of writing very unattractive despite it being a joke. I had to stop reading.
I was wondering if I'm just getting old or if it's actually a bit tired. Perhaps a bit of both.
> The overly curse happy programmer speak is so very stale.
Today, yes, but the site isn't new either.
> It doesn't make the content more interesting. It doesn't make the author seem any cooler.
I don't think the point was either of those things. It's meant to express outrage at the overcomplication of websites with the excessive use of javascript, the needing to download megabytes of JS to render some text, etc.
Here's the context from the original:
> You think your 13 megabyte parallax-ative home page is going to get you some fucking Awwward banner you can glue to the top corner of your site. You think your 40-pound jQuery file and 83 polyfills give IE7 a boner because it finally has box-shadow.
Being outraged at the state of the web has been lessening in popularity, I think. That's possibly because CSS has improved a lot and IE is finally obsolete.
> The overly curse happy programmer speak is so very stale.
This one isn't so bad in context. It is several down a chain of pages responding to each other that started with a sweary one. As well as each page adding more points (or arguing agaist previously stated ones) they have added a little extra profanity too.
On its own I'd agree with you assessment, but within the pattern if you have followed the story it fits less awkwardly.
<h2 id="seriously-some-minimal-fucking-things-are-needed-to-make-this-shit-perfect">Seriously, some minimal fucking things are needed to make this shit perfect.</h2>
What's with the long ID's that look auto-generated? Imagine a large site with this pattern. Does it has a purpose, or is it part of the byte-wasting satire?
Also, after developing large dynamic websites with jQuery I learned that using classes instead of ids is a better strategy.
Today, a lot of (commercial) web design is done just to compensate for the lack of (quality) content. That reminds me of that story about a blogger who spends more time designing a blog than writing articles.
My advice to young web authors would be to spend more time on content than design. In the end, it doesn't really matter if you used system font (like Arial) or Google font, or if your background is #EEE or #FFF. Just don't make unaccessible sites
BTW: I am aware that average internet users don't think this way
248 comments
[ 4.1 ms ] story [ 701 ms ] threadI know the vulgarity of the statements is tongue in cheek, but this one has been reinforced lately by the "MIME Magic" debacle[1], mama mia.
[1] https://github.com/mimemagicrb/mimemagic/issues/98
Maddox said some very inflammatory things, so I won't link him.
Ugh, this guy shouldn't touch web design with a 10 meter pole.
[0] https://blogs.perficient.com/2014/12/24/css-pixel-ratio-or-h...
Saying that pixels are unrelated to text isn't really accurate, since text obviously occupies space and pixels are a unit of space, and back in the day, expressing layout relationships in terms of pixels was fairly standard.
> A little less contrast
WHY. WHY DO PEOPLE DO THIS. To give this person credit they have at least chosen some sensible values, rather than gone with something that was just about enough on an expensive graphic designer high-contrast monitor and then not tested it on anything else. Leaving the rest of us squinting to try and read text or manually overriding CSS.
Despite not being a complete idiot, they have still made the content harder to read. Contrast is good. It makes things easier to read. Why would you want less? Yes I know the art theory stuff about never using black because it doesn't appear naturally. You know what else doesn't appear naturally? TEXT. Black on white is a perfectly acceptable default, please don't change it for your body text without a really good reason.
(ranty style done in homage to the linked websites, but it felt good to get that out)
One thing you should always consider during the requirements phase of a web application is whether your app is likely to be used projected on a conference room wall. Things like contrast and fonts make huge differences in such hostile settings, and available screen real estate is also considerably limited.
When people are already getting short with each other before you even get to the actual reason for the meeting, you know it's going to be a long day.
But corporate wanted our fonts to match their other product. I don't know if it was my imagination or not, but it felt like that act broke a couple people on the team, myself included.
You have to be very careful not to rely on it though: as you mention lighting and protection conditions or just plain bad monitors can kill the more subtle difference completely. And, more importantly, those with sight deficiencies might miss it even in ideal circumstances.
I really only get annoyed with the "less contrast" meme when it's something like a Google website where the UI disappears if your monitor's contrast settings weren't tuned professionally. (I used to have to adjust my monitor settings around making the UI elements on Google+ visible.)
Because too much contrast can be jarring and distracting, making it harder to read.
These kinds of things are subjective.
More contrast isn't always better, or you would read text by printing out foil stencils and aiming them directly at the sun to read.
Because designers are taught that too much contrast causes eye strain. They're advised against putting pure black text on bright white backgrounds.
https://www.wired.com/2016/10/how-the-web-became-unreadable/
They also won't have screen where they are likely to feel anything has too much contrast.
IMHO a screen which displays a common black and white website with so much contrast that it strains the eye is a 100% failed product which completely ignores reality.
A website which has so much contrast that it strains the eye on any spec-compliant monitor or a cheap 1990s CRT is a failed product. Reducing the quality of monitors to compensate for shitty websites can't be the solution.
Same for black and white text documents.
Or black and white shell promts.
And so on.
So it's pretty obviously for me what is detached from reality and what isn't.
EDIT: It's the color space which is broken I guess, white (on a website) should be neutral background white not eye hurting brightness and the color space should have some "whiter then (normal,neutral) white" colors. I.e. the normal white color should not have defaulted to maximal brightness.
Sure, but that's already the standard.
The people who obsess over using #fff as default white just happen to be the ones whose monitors show #fff the way #ccc was supposed to be shown (and used to be shown, on CRTs)
I think the underlying reasons for that are underappreciated.
When you pick #000000 for your text color, people won't see it as pure black anyway. Imperfections in your screen's backlighting aside, your screen reflects the ambient lighting, or, if you're outdoors and pointed the wrong direction on a sunny day, your screen reflects sunlight that is orders of magnitude brighter than the screen itself (measured in cd/m^2). #000000 never shows up as actual black either.
So if you're going to put black text on white background, just use #000000 on #ffffff. Nature doesn't need any more help to make text on screens hard to read.
That color contrast is perfect for a game, a movie or an image. But you don't want the feeling of something as bright as looking into the fucking sun mixed with the darkness of the deepest starless night. That's just painful, both in light mode and dark mode.
Just calibrate your monitor correctly, increase your contrast if your monitor can't even display Rec.709 sRGB, instead of compensating for your shitty monitor by making your website painful for anyone with a good monitor.
EDIT: this comment puts it very well: https://news.ycombinator.com/item?id=26741285
Those are the people you usually want as customers. And you're making your website painful for them. That's a decision you can make, but don't be surprised if you'll fail with that attitude.
Keep colors and contrast restricted to the range possible by reflective materials (i.e. what can be printed on paper or ever be encountered in nature) and all the issues are immediately gone. You don't have to use grey-on-grey (which is super annoying). Just keep to the range of colors a newspaper will have, or a zebra will have.
Over 99% of users don't, most phones are not high end and as such don't have such a screen.
> feeling of something as bright as looking into the fucking sun
Again, not a experience around 99% of internet users can follow, their devices don't get that bright, especially not on a per-pixel basis.
Also most people use devices in rooms with varying degrees of natural sunlight showing in.
And if whites are to bright then it's because my screen is wrongly setup for my eyes/usage. A perfect color calibrated screen is ironically often not a perfectly setup screen for normal usage.
There are very specific definitions for colors, and what they mean.
#000000 means 0.1 nits, #ffffff means 100 nits. That's standardized and specified.
The screen can't be wrong if it correctly matches the standard. If real-world content doesn't obey the standard, the content is wrong, not the standard.
Uhm, scree brightness control is a thing. Adaptive brightness is standard even on non high end phones. Same for desktops etc.
So a part of a standard which maps color to specific brightness levels is pretty much irrelevant outside of the unrealistic case of a perfect calibrated monitor in a perfect environment. Which does exist. But again is for most internet users unrealistic.
If you modify the brightness in software, you can also tonemap it properly and retain the contrast easily.
Generally, media and text need very different contrast ratios and colorspaces, and text should never use the full contrast available.
But the big issue is that most content is using entirely unmanaged colors, not even correctly setting them to sRGB (or actually the color profile of whatever shitty 6-bit 100:1 contrast panel from 2004 they managed to find on the dump).
If that was actually used, we wouldn't have any of these issues and everything would be correctly tonemapped. But they don't, they set no profile, which in some software means "whatever the display supports" (although recently enough software enforces "probably sRGB at 1000:1 contrast 100nits max brightness" luckily).
Sometimes, you just have a shitty monitor. There are entire communities dedicated to calibrating monitors as I'm sure you are aware, it's time consuming and can be expensive, it's not a solution, we have manufacturer ICC profiles for a reason.
But the reality is that I can't use some websites because they chose to make my experience worse so users with badly produced and badly designed devices have a better experience. We're yet again at a situation where obeying the standard is punished.
motherfuckingwebsite does it right, too: follow the preferences (which in my case is almost exactly the same as the perfectmotherfuckingwebsite)
The worst are websites with far too little or far too much contrast that don't even follow preferences. At work I've had to repeatedly go against designers wishes refusing to implement their design and saying: I'll implement you anything within of 4.5:1 to 10:1 contrast ratio. But I won't go below that (no, I can't make the text 10px tall in #c0c0c0 on #f0f0f0) nor above that.
No, it is not.
> No reflective material can reach those colors or that contrast.
Even if that was true, nature includes light sources as well as reflective materials.
Emissive light sources in nature (except for rare occurrences like lightning, certain jellyfish and cherenkov radiation) are all black body radiation.
That's very different from the colors and contrast ratios possible by modern OLED monitors. The best example would be the blue LEDs used in modern OLED panels, which when they were introduced had a strange unnerving blue glow because that color just doesn't exist in nature.
Additionally, the contrast ratios possible by modern OLED panels are also far beyond anything in nature, as in nature anything that is bright, be it reflective or emmissive, will as result also light up its surroundings and reduce contrast naturally.
High contrast text can appear blurred for them while reading.
(Edit: Okay, I should have read TFW. They mention the reason for the line width)
There's definitely a sweet spot; I typically have my browser windows at 2/3 width on a 2560px wide monitor. 100% width lines are a chore to read honestly, there's definitely a higher cognitive load.
Do you like 400 nits of #ffffff right into your eyeballs? No? Me neither.
The alternative is absolute darkness with extremely bright text, which in turn makes it unreadable (if you have astigmatism as I do) and literally causes pain due to the high contrast.
Nothing in nature has such an extreme contrast.
The only reason anyone would ever use full contrast is if they have a shitty 6-bit monitor panel that doesn't even reach the contrast ratio of a shitty 1990's monitor. And they don't even have a proper color profile, so their computer thinks their monitor has all the contrast ratio in the world, and doesn't tonemap fuckall.
The only way to resolve this is if either everyone finally switches on a color managed workflow, or we outright ban the shitty panels where #000000 on #ffffff is necessary for readability instead of being just painful.
#ffffff is the color of looking directly into the sun and absolutely painful bright, #000000 is the color of the deepest, starless night. You need these colors for movies, for games, for images. But your text should never be the contrast between a starless night and looking directly into a star.
Increase the contrast of your monitor, calibrate your panel, but don't build a worse website to compensate for your shitty panel.
EDIT: this comment puts it very well: https://news.ycombinator.com/item?id=26741285
What about black text on white pages in an actual hardback book? But since you referred to nature, what about zebras?
The not-triangular shape labeled "2200 matte paper" are all colors representable by reflective materials.
Colors outside of that range can only ever be produced by emissive materials, such as fire, stars, or your monitor.
All the colors your website uses should be from the range of reflective colors, as those are the ones seen in nature, and the ones your eyes are adapted to see.
The same applies also to black/white contrasts. Even vantablack next to a white sheet of paper (which would already be massively higher than any contrast in nature) still has a much lower contrast ratio than your monitor has.
No. There's no definition of what they map to.
That's why we need USERS to be able to scale the ranges of brightness and contrast.
My environment changes during the day. I want to be the one in control of my screen, not some random website.
That's not really an option, though. You'd have to separate text and media from the website, split it apart, and configure it separately, as most websites just have everything without any color management.
If these shitty websites with full contrast would at least set a colorspace for their images, so I could take the color profile of a cheap 2004 LCD as default for unmanaged media and text, I'd at least avoid the painful situation.
> don't build a worse website to compensate for your shitty panel
Never change.
If you don't like what your display does, tweak its settings to do what you like.
Colors are standardized and have a very specific meaning.
I just dislike the colors these website authors have chosen, often without knowing what they're choosing, as their monitors often distort the colors and show something wrong.
None of this can be solved until we've got widespread color managed workflows and tonemapping on the web.
And I don't like reconfiguring my display for every different kind of content.
What I don't like is websites using #ffffff
But this is a general issue - you want to be able to represent extremely high contrast, far beyond the brightness of a sheet of paper in photos, movies, games, etc. But you want a significantly lower contrast for text. Sadly, websites mix both and offer no way to configure them separately.
What would be really cool is if web browsers offered a mode that forced a contrast minimum when viewing websites. This would benefit devs and users alike: Users would have a pushbutton way to make bad websites readable, and devs would have a push button to show what their site would look like to users who get annoyed enough to push that button.
https://i.k8r.eu/dw9JsA.png
More high-contrast options exist then Black foreground on a White background.
I'm not disagreeing with your point, I loathe grey on grey sites. Being visually impaired nothing makes me rage-quit your site quicker if my DarkReader extension can't unfuck a site.
I'm posting https://contrastrebellion.com/ so all the replies and followup conversations can see it too.
https://imgur.com/Q52ZxwS.png
There are good reasons to avoid bright white backgrounds in certain cases since it can be hard to read in dark environments as your eyes switch between the bright screen and dark world. But in this case, pure white on pure black is still the best option for contrast. And the correct solution is to dim the backlight of the display to reduce brightness.
Dunno what the science says, but I really hate #000 on #fff, or vice-versa.
Yes, a lot of websites now go to the opposite extreme, but the reaction should simply be: so DON'T GO TO EXTREMES! Neither too much nor too little contrast are good.
And since you've pointed out they do go for sensible values here, why the outraged all caps???
You don't need a pure white background, but for gods sake PLEASE stop making the text light grey! Having to squint to read a website is headache-inducing.
Another commenter mentioned that all text should just be black on white and people can dim their screens as necessary. It's somewhat a matter of personal preference, but this seems like a bad solution to me. Most people are not looking at exclusively text when browsing the web, there are lots of pictures and videos as well. Users shouldn't have to be constantly fiddling with screen brightness. In photos and videos, contrast is often used for dramatic effect, where you want some parts to get brighter than others. If the text is too high contrast so you have to dim your screen further to view it comfortably, then the photos or videos you see alongside the text won't be as impactful and enjoyable. Why should every piece of text you read be as dramatic as the most intense rays of sunlight or something in a photo or movie?
I think it comes down to what you're used to, what your vision is like, and how sensitive your eyes are. Some prefer high contrast, some don't.
Because too much contrast on a monitor means white on black, which on average (that is, 99% of people's setups) brightness levels settings strains the eyes and people actively dislike it.
Its not some book reflecting ambient light, but a monitor with a led shining white (blue-ish) light on your eyes...
>Contrast is good.
Water is good too. Too much water though, and you die: https://en.wikipedia.org/wiki/Water_intoxication
One sensible reason for this is that it allows using higher contrast, or different hues w/ similar contrast, as a kind of emphasis that naturally stands out from the surrounding text. Same reasons why most terminal emulators display text as light-gray-on-black, while keeping pure white as a highlight color.
I don't understand this attitude. If you don't like Times New Roman, why don't you change your browser's default font?
What I don't like is when websites tell my browser to use a different font or different colors than the ones I configured.
(Off-topic, but something that really annoys me is websites that make text in <textarea> very dark grey without changing the background; as I configured a black background and white text)
The web must be a very disappointing place for you.
Yes, yes it is.
And it ain't just the fonts…
Web pages are designed and typography is part of the design.
I don't mind printed books and magazines because it's a constraint of the medium; but for websites it's a missed opportunity.
Magazines are their own thing although typically this does apply to the actual articles themselves; Someone who knows what they're doing lays them out.
edit: nope! @thebarrytone did the original, the curious can find the author in the source.
But I haven't had the time to put into it.
The low contrast meme in web design is especially harmful.
Take the background to a #111 and the text to a #ddd and you've hit my personal perfection
here's evenbettermotherfuckingwebsite from 10 months ago: https://news.ycombinator.com/item?id=23202336
So yes, maybe it is time for somebody to build a business on this.
I made it about two pages into that book before I stopped giving a fuck about reading it.
I made it to the first headline before I stop giving a fuck about reading this website.
If that was the goal, nailed it.
Swearing for effect can work sometimes, but YMMV. It lost me in this case.
For effect, it needs to be used sparingly. Otherwise, turns into white noise.
muthafucking nice really.
http://psychology.wichita.edu/surl/usabilitynews/72/LineLeng...
“ This study examined the effects of line length on reading performance. Reading rates were found to be fastest at 95 cpl. Readers reported either liking or disliking the extreme line lengths (35 cpl, 95 cpl). Those that liked the 35 cpl indicated that the short line length facilitated "faster" reading and was easier because it required less eye movement. Those that liked the 95 cpl stated that they liked having more information on a page at one time. Although some participants reported that they felt like they were reading faster at 35 cpl, this condition actually resulted in the slowest reading speed.”
I love that instead of this style we're getting a new generation of programmers who are genuinely nice, calm and friendly. People such as Bob Nystrom or Andreas Kling, who don't feel the need to curse every few lines.
If you only use a phrase like "fucking bullshit" once across an entire blog post or book, you will find it has far greater impact on the reader. They will think "wow out of 400 pages of polite discourse, this is the one thing the author would really like to highlight as adverse".
I was wondering if I'm just getting old or if it's actually a bit tired. Perhaps a bit of both.
Today, yes, but the site isn't new either.
> It doesn't make the content more interesting. It doesn't make the author seem any cooler.
I don't think the point was either of those things. It's meant to express outrage at the overcomplication of websites with the excessive use of javascript, the needing to download megabytes of JS to render some text, etc.
Here's the context from the original:
> You think your 13 megabyte parallax-ative home page is going to get you some fucking Awwward banner you can glue to the top corner of your site. You think your 40-pound jQuery file and 83 polyfills give IE7 a boner because it finally has box-shadow.
Being outraged at the state of the web has been lessening in popularity, I think. That's possibly because CSS has improved a lot and IE is finally obsolete.
Feel the same way about the style.
This one isn't so bad in context. It is several down a chain of pages responding to each other that started with a sweary one. As well as each page adding more points (or arguing agaist previously stated ones) they have added a little extra profanity too.
On its own I'd agree with you assessment, but within the pattern if you have followed the story it fits less awkwardly.
What's with the long ID's that look auto-generated? Imagine a large site with this pattern. Does it has a purpose, or is it part of the byte-wasting satire?
Also, after developing large dynamic websites with jQuery I learned that using classes instead of ids is a better strategy.
BTW: I am aware that average internet users don't think this way