These are good rules of thumb. As a professional designer for coming up on 2 decades, I'd say they are indeed safe to follow in most situations.
He gives the good advice that you should only follow the rules when they make sense, and not otherwise. With that in mind, the two rules I disagree with the most are:
> Measurements should be mathematically related
> Elements should go in order of visual weight
Because, whereas most of the other rules are probably good to follow 90% of the time, these feel sort of arbitrary and opinionated.
I think making measurements mathematically related is a convenience and is often helpful, but for the same reason that optically centering things is better than mathematically centering them, I think you can easily ignore a mathematical relationship between values if it doesn't look as good. There is nothing inherent about humans that makes us prefer magic numbers, it's just that using them gives us an easy way to achieve visual consistency. If it stops doing that, ignore the ratio. If a grid or your font sizes look better nudged by a pixel or two in one direction or the other, do that instead.
With respect to ordering elements by visual weight, my only complaint is that he specifically says "heavier first", rather than "heavier first, or heavier last, both are fine as long as you're consistent". So, it's a nitpick, but it bothered me because it's an easy distinction to make.
As a software engineer I like these simple rules, they let me produce something that doesn't look terrible without having to spend years studying design.
It reminds me of shuhari (守破離), an idea from martial arts and other traditional practices. It basically means "Follow the rules, break the rules, transcend the rules", and the characters mean "follow, break, transcend". The article hints at this too: follow the rules until you find a good reason not to. As it is aimed at beginners we should mostly be learning and following the rules until we have enough experience to start breaking them.
I liked maxims when my life was simple and I was young, now they feel completely meaningless, as they never have a context for real life and they break down easily when applied to complex behavior and interactions. It's more like a prayer or chant, more for self reassurance, that you follow some principle, than anything.
Probably it's not against shuhari. Shihari is often used to describe professional principles in martial arts or playing instruments. It assumes they're trained to the point where if they do it, they unconsciously follow all the rules. When they play guitar, their fingers just move in the most effective ways and play the most satisfying melody. Then they intentionally break a few rules to improve it.
So shuhari is ”first do it, then do it right, then do it better” for professionals.
I see The Analytical Language of John Wilkins was posted again today. While you're creating those rules, it's important to remember the map is not the territory.
> and the characters mean "follow, break, transcend"
守 does mean "follow" in the specific sense of "following rules", though it has no sense related to motion and most "following", including metaphorical following, would be represented by 隨. 守 mostly means "guard" or "protect", and I assume that's the metaphor that was extended to complying with rules and correctly performing rituals.
破 means "break", no problem there.
離 means "leave" as in "go away"; it does not appear to have any sense of "transcend".
Presumably that would also be "leave" as in "abandon"? I think the idea is that you no longer need to think of the rules at that point because your intuition has matured to a point that you no longer have to reference them at all.
> Presumably that would also be "leave" as in "abandon"?
Well, sure, in the sense that abandoning necessarily involves leaving, and 離 can refer to the leaving aspect of that. But "abandon" adds a lot of meaning that isn't generally present in "leave"; you might be looking for 棄, which is specifically about abandoning.
離 is a much more basic word having to do with distance and separation. But since separation and abandonment are closely related, it does appear to have been used in something resembling that sense. Consulting a dictionary of Middle Chinese:
> 離
> 1. to part from, separate, leave; e.g. 離緒 emotions at parting; 離居 leave one's home; also, live apart
> b) stray from, astray; estrange(ment); divorce oneself from; be or get free of; e.g. 離落 aimlessly astray, drifting rootlessly; 離書 bill of divorce; 離結 free from bonds
That gloss is the closest one I see to "abandon". (And also looks like a pretty good match to the usage above; you can imagine escaping the binding of the rules as a close analogue of escaping literal bindings.) Compare
> 棄
> 1. throw away, discard; put aside, leave behind; abandon, forsake; renounce, reject, abolish, get rid of; annul
(Why Middle Chinese? It's easier for me to look up, and it seems more likely to be reflected in Japanese than modern Chinese usage is.)
This is actually very close to the advice I've heard when it comes to design, i.e. "you need to understand the rules in order to understand when to break them". Following the rules helps build an intuition that later allows you to judge when breaking them is advisable.
I (not a designer) figure it's like the "rules" of photography such as the "rule of 3rds".
For those unfamiliar, the rule is that the main focal point (the bit you want to draw the observer into the picture first - such as the eye of a the person in a portrait) of the picture should be at the intersection of one third from the edges of the picture.
Another "rule" is the "sacred geometry" where elements that have long edges are more appealing when they are in alignment either with other "lines" in the image, or with the edges of the image itself. I've taken many landscape photos with a camera leveled with a gyroscope stabiliser (or just a spirit level when on a tripod) but the resulting images didn't "pop" until they were rotated so the ground aligned with the frame, or the picture skewed so the walls of buildings were truly vertical.
But then I've seen some incredible photographs that break those rules and only work because they deliberately broke the rules - some quickly found examples (and article affirming my diatribe above :)) from natgeo: https://www.nationalgeographic.com/photography/article/break...
I disagree with your disagreement. The brain has a strong preference for simple patterns. The more it can compress information down into assumed symmetries and extrapolations, the more "pleasing" it feels. There's always a mathematical explanation, even if you're not consciously aware of it. In the "optically aligned" example, the 2nd object is aligned about its center of mass rather than its height/width pixel border.
There can always be an mathematical explaination sure. But that won't help you as a designer if there is no way to know/apply that explaination beforehand. There is probably also a (quite complex) mathematical rule to drive your car on a public road, so it should be simple to implement automatic driving, right?
Optical weight is nice and all (and a better simple rule than just spacing things by equal distance), but in the end you also have other phenomena (humans perceive horizontal lines different than vertical ones etc.)
Just the seemingly simple task of spacing out letters can get complicated pretty fast if it should look pleasing as in "as if there was no design there".
It's also the case that some of the simplest and most intuitive possible mathematical rules are going to look less good than some less mathematically elegant ratio, like picking line spacing for body text which is exactly the font-size or exactly twice the font-size rather than somewhere between 1.2x - 1.5x
I think that this might be more true in screen based work than in printed publications. The focus of a printed page tends towards the top, but not necessarily at the top. A webpage is a different entity… not always seen in its entirety. The way that unity manifests would therefore necessarily be different. The order of weight would be better maintained at a local level, not global.
> Make outer padding the same or more than inner padding
This is one that is generally true, but not always. A framed drawing can often safely accommodate more space at the bottom than the sides and top.
At the end of the day I feel like you are correct in practice but the advice to follow mathematical relationships is still solid.
Yes you are probably going to need to deviate from the mathematical relationship at some points, but these are generally helpful to observe and understand the design challenge. For one thing have a mathematical basis acts as a good starting point. This is helpful for more junior designers, it is good when the assets that are in flux and it is generally useful for getting things close before tuning. Second, having some mathematical conception of the layout can help provide deeper insights into the problems. You can start to formulate things in more regular terms and you can start thinking beyond a layout configuration and consider how the problems generalize.
Ultimately people have different methods and you should do what works for you, but I think that this point is still good advice in general.
As somebody with a similar job profile & experience I totally agree with you, but do think the point of keeping mathematical relations between sets of measurements is a very good tip indeed:
not because not doing so would result in bad design decisions, but because it makes it much much easier for people unfamiliar with design work to:
- keep things consistent
- stay within a balanced set of measurements that are easy to remember and expand
- avoid ending up with a set of values that are too close to each other to meaningfully impact the design, but are therefore hard to maintain and identify
I agree with you about the mathematical relations. I used to do it when I was younger, but it never quite worked out so I stopped.
However, there is sort of a reason to do it: baseline alignment. If you have columns with different contents, the heights of everything should work out so that the baselines continue to align over the page. You can adjust this manually, but a mathematical relation can be a shortcut there.
I was thinking about this and to me it seems like it’s closer to the centre of mass. It doesn’t really help that that the article doesn’t describe how they centre the thing in the ‘mathematical’ version. For example is it the mid-point of the extents. I think even using the average horizontal position of the vertices would be closer to ‘optical centre’ and even more so if you took area into account by breaking the shape into triangles.
The ‘mathematical’ alignment is usually just considered "centered however the alignment button works in the software you're using" in design discussion. For most software that'd be bounding box based - the center of the rectangle the software draws around it.
Optically is more center of mass, but ideal more 'center of visual weight'. Larger things are 'heavier', darker/more contrasty things are 'heavier'. Rounded things should extend over an alignment line a bit, flat shapes butt up against it (e.g. in the letters lO the O extends over the baseline slightly compared to the l, to visually connect with the baseline more).
In general the way it works is you align with whatever software says and you look at it and say does it actually look aligned or need minor adjustment? Because the point is to look aligned rather than to be mathematically correctly aligned. Like our letters above, they look more visually on the same baseline when they're not, then when all the rounded base letters sit most 'correctly' on the line.
The author is suggesting you use the mean X value of all the pixels in the shape, instead of the mode x value.
I'm sure fancier image editing software does this, but your eyes are pretty good at it too because it's just dividing the surface area in half, or thinking about it as the "center of mass" as you put it: where could you attach a string to this shape such that it doesn't tip over one way or another?
> I think making measurements mathematically related is a convenience and is often helpful
I think, in the absence of any guiding principles or rules, this is a good one to have. It's easier to say "Ok, this should be 4, 12, 36" then go from there.
I think heavier first is just because so many people make the same mistakes. Clearly, if you have experience, you can break the rules anytime you want and even make up your own.
I agree! Good design is hard and these basic rules make sense for most designs. It's better to stick to them unless you are certain about your reasons otherwise. These days, I tend to use a utility library like Tailwind, to take some of the guesswork out of color matching, spacing, and sizing.
Logarithmically related is mathematically related.
Heck, related by Wiener noise/integrated random walk is mathematically related, and if you watch 2D animations of random walks you'll soon develop a visual feeling for that.
If you can measure and quantify your choice, it's math. I think it is more like "don't make decisions with your gut, understand why something looks better."
I started reading this and hoped, but never expected, to see something like "everything should line up with something else".
This rule actually can be used to generate all the other rules about spacing, kerning, leading, font size, padding, etc. It was the first true piece of "secret" design knowledge I was handed down when I went to work at an ad agency at 15, having already been proficient in Quark and PS/AI but without any formal design training. The rule about alignment based on eye / weight versus mathematical alignment also flows naturally from this.
Interestingly, it was the agency director who was not a true designer who told me this; I believe it was her one and only rule for judging design, and it worked quite well.
In the years I spent studying design and typography in art college later on, I never once heard anyone mention this rule. But it is the very first thing I bring up with designers I hire.
One thing that happens when you follow this rule is that you get an automatic grid of sorts, that isn't necessarily constrained to a standard way of breaking up grids. Using the same measurement increments (e.g. 10 pixels padding, or 1/2" gutters) as the multiple by which things that are lined up take their space from each other, you can get regularity and readability without boredom even in pretty wild designs.
Excellent job by this author putting these ... essentially rarely spoken, infrequently taught, but fundamental and quotidian design rules into a clear, digestible format. These are all things that are sort of assumed in design agencies but are rarely elaborated on so clearly.
One of my first real learning experiences with implementing a design was when I was building an app. We got a design from the designer, I implemented it and thought, this looks pretty good.
I showed it to the designer and he basically said it looked like shit. I was like, what, why? He took a screenshot, dragged it into Sketch and used some of those little red rulers to point out that in his design, everything was aligned to the left with a fixed padding to the side, whereas in my implementation it was all over the place.
Basically, I didn't have the eye for design or alignment yet. I mean I still don't and I'd rather not anyone ask me to do visual design, but I got better at it by being taught what to look for.
"Teaching how to see" is an important lesson that a lot of developers haven't had yet, I think, which is why there's tropes about UIs designed by developers.
Yeah, you have to learn to see those things... but don't be hard on yourself. HTML was never meant for doing anything resembling print layouts, and yet we're expected to do it for a dozen different screen sizes, using one hack on top of another - tables, floats, flexbox, grid, absolute positioning...
When I got moved from doing print design to the early web, we'd literally design an entire website at one size in Photoshop and use slices to cut all the interactive/hover bits out and put it all in a table. Nothing about web/app design has gotten simpler since then. Compare with the absolute ease and freedom of working with a layout program like InDesign or Illustrator, targeting a known print size. It's easy for a nontechnical designer to look at a mockup and say what's wrong with it, but it's infinitely harder to know what levers to pull in the giant puzzle of CSS and HTML to attain all the details of the static design. And sometimes the static design is just a launch point. In a case like that, if I were in the graphic design / art direction role, I would provide a logical style sheet, basically a list of rules about alignment and sizing, because I wouldn't expect the coders to be able to visually extract my intent or what I considered important just from looking at a comp.
Good learning experience, though one might argue that the original design should have noted those sorts of important aspects, rather than expecting them to be obvious. Probably would have saved you both some effort.
No, but I might include a general note on alignment. And rarely is literally everything going to be aligned down the left side of the page, so you could also include some annotation to show what's aligned to what (and maybe why).
I'm no designer, but I know I appreciate when designs include that kind of info.
Guides are a bit of a crutch, and smart guides are often a hazard (precisely because of mathematical versus visual centering being different in many cases). They're useful to check later if things line up to the pixel, but they don't help with e.g. creating rhythms between leading and images to find the perfect line height to match the perfect image width/height so that the top and bottom of an image aligns with the ascenders and baseline of the text that flows around it. Guides will not decide for you which element something else should line up with, nor which side of an element to align. Sometimes aligning the left edge of something with the center of something else is appropriate, for example.
It's true that small imprecisions in lining things up create subconscious disruption - but most people who've done years of design can spot a 1px misalignment like that without guides. The rule that everything should line up with something else doesn't refer to technical precision. It refers to how you construct and think of where to place each element in your overall design, well before you get to the stage of pixel-level adjustments.
Guides are not a 'crutch' they are the invisible framework of the page.
Guides might be a problem or inhibiting in classical design, but not web design where breaking the rules set by the guides will usually cause problems.
>In the years I spent studying design and typography in art college later on, I never once heard anyone mention this rule. But it is the very first thing I bring up with designers I hire.
This is interesting because when I was in design school we had entire courses on Swiss grid systems. "Grid Systems in Graphic Design" by Josef Müller was like the holy bible.
That said there are a lot of design peers that I've worked with that were either never taught or simply ignore this. I wonder if it's a generational thing and simply not taught anymore (I went to design school in the mid-90's).
Of course one downfall of having worked with various grid systems for so long is I can tell when something is off by one pixel and then cannot unsee it.
Grid systems are one way of generating alignment, but not the only way. They're a means to the end, but it's helpful to focus on the end itself, which is that elements are aligned with each other.
We also studied Swiss grids in design school. But much of the class was about how to use and break them; and they were presented as sort of one dish on a buffet of design philosophies. Practical alignment of everything with something else - for commercial work, especially - wasn't presented as a holistic rule. It would more just be an unstated byproduct of using a grid.
Very true! When some elements aren't aligned with something else, they seem to be falling apart; it makes viewers ever so slightly sick; they don't recognize it, but it's real.
A lot of negative comments here, but these are useful rules of thumb when designing UI, especially if you don't have a design background. They're not perfect, sure, but it's a good starting point.
A lot of these tips I've learned on my own just analyzing how designers I've worked with did things or noticing how sites I thought were aesthetically pleasing to the eye have done it. I kind of wish I had a summary like this a few years ago.
There are a lot of rules/guidelines type of things like these that are as stated "safe" to follow. However, it's after understanding these types of rules and what makes them safe that allows rules to be broken for purpose rather than ignorance.
Film/video/photography have them as well. Things like looking room, rule of thirds, and similar guidelines will pretty much always be safe. However, there are times when breaking those rules can look very awkward or very artistically done, but it can be telling when it was done from ignorance and just looks awkward or done with intent and the breaking of the rule reveals something else deeper.
1. The ROT has a bastardized history, that involves the artist Thomas Smith semi-completely misunderstanding the work of the artist Joshua Reynolds.
2. Smith re-wrote Reynolds's observation as a rule of prescription (e.g. 'walk only on the path') not as a rule of exclusion (e.g. 'don't walk on the path'). In aesthetics, the former generally do not have a long life expectancy.
3. Reynold's original observation was not restricted to composition. It addressed the artist's abhorrence of symmetry. Symmetry is understood as being a general phenomenon. Hence the following cases are all understood as being manifestations of symmetry...
maybe the rule of 1/3s was applied to way more than it should be, but i don't think it's one to throw the baby out with the bathwater though. again, it's a good starter rule. once you get skilled enough to start composing shots without needing a check list of rules to apply, you'll see that some of those starter rules getting broken regularly.
a common use of thirds is in graphics use of lower thirds. it's just enough room without being too much. lower quaters would be small. lower halves would be too much. centering your subject in the first 2/3 and leaving the remaing third as looking room isn't bad aesthetically.
so maybe how you are interpretting the ROT is different than how i use it, but you definitely seem to have a grudge
Yup. I guess I do. Perhaps I overstated my feelings, but as an art and design teacher such non-truths are the bane of my life.
Almost all 2D aesthetic images (paintings, art photographs or page layouts) feature a region of interest (ROI) sometimes called the point of focus or the center of attention. Indeed, it is difficult to construct an aesthetic image that does not.
The so-called rule of thirds states that this ROI is best located one third across the vertical and horizontal axis.
However, the actual; truth is more complex and more interesting:
1. The horizontal axis ratio is not 1:2 but closer to 1.618. In other words, the golden ratio https://en.wikipedia.org/wiki/Golden_ratio [1]. For many purposes, one third is close enough to the golden ratio. However, in practice artists/designers tend to actively avoid exact fractions (third, half, quarter, seventh etc).
2. There is a difference between the placement on the vertical axis to that of the horizontal axis. The vertical axis seems to be tighter towards the edge (the bottom edge in a painting, the top edge in a flat design).
3. Mysteriously, there is a slight favoring of the left side over the right. This seems to have something to do with writing direction [2].
My own small-scale field research supports these observations (on 31 art students), as well as the work of a few others (below).
On a personal note... one reason I like lurking in Hacker News is for the precision of thinking that computer and software engineers exhibit. In my own field (fine art) 'received wisdom' is often taken as lore. These non-truths are harder to kill than vampires. Examples:
- Red recedes over blue (in a FG/BG pairing, one will always recede, but which would depend upon which red and blue you employ and how they are used).
- The complementary of red is green (yes it is the perceptual complementary in RYB space, but the mix-to-neutral complementary in RGB space is cyan).
- That the Pointillist painter Seurat employed optical mixing of primaries by placing them in close proximity, like a CMYK printer (he simply did not... there were other reasons he favored small dabs of paint in close proximity).
... I could go on.
[1] Amirshahi, S.A., Hayn - Leichsenring, G.U., Denzler, J., Redies, C.: Evaluating the rule of thirds in photographs and paintings. Art Percept. 2 , 163 – 182 (2014)
[2] Chahboun, S., Flumini, A., Gonzàlez, C. P., McManus, I. C., & Santiago, J.: Reading and
Writing Direction Effects on the Aesthetic Appreciation of Photographs (2016)
It's wearisome how predictable HN is. I guess I've spent too much time on here (and continue to do so!). Every single time something vaguely design-related comes up, the entire discussion is about how thou shalt not steal my god-given right to use pure-black-on-white. Programmers apparently detest anything even remotely not #000, but fuck me is it ever repetitive and boring.
I don't think there's a name for this concept but I think of it as like, anti-pretentious pretentiousness. The place I first saw it well described was in a novel where tennis players who spend a lot of time on the court picking up balls develop a fluid motion to launch the ball off the ground with their racket and so avoid bending over to pick it up. It becomes a signal that a player is serious. But then less serious players see that, see that it looks smooth and cool, understand what it signals, and so practice that motion for its own sake.
In response the really elite players just go back to bending over to pick up the ball with their hand, signaling that they're too skilled to bother signaling how skilled they are.
HN falls hard into this in general. But then combine it with the disdain or even contempt it's fashionable to show towards subjective pursuits like aesthetics, and it gets dialed way up.
Like you said it's very predictable. Any time I see a link that has any sort of distinctive design, unique typographic style, or especially authorial tone, I know instantly what a handful of comments are going to be.
> In response the really elite players just go back to bending over to pick up the ball with their hand, signaling that they're too skilled to bother signaling how skilled they are.
Truly elite players have ball boys and girls pick up balls for them.
Your point, though, reminds me of the Sneetches by Dr. Seuss
I grew up in the days of SD video and the start of using computers for digital designs for video. In SD NTSC/PAL, you'd never use 000 for black nor 255 for white. Instead, you'd use broadcast safe 16,16,16 and 235,235,235. That's just something that has always stuck, even when converting to web. It's not because some rule, but just because I like to know there's a little bit more if I ever need it. To this day, I'll still start in a similar limited vein for HD and 4K designs. It's like a warm fuzzy blanket that I'll never let someone take away.
You missed the motivation behind my diatribe. Wanting black on white is fine (it's what I do on my text editors). I just hate that up and down this thread, that's all I get to read, although the list is full of other nuggets that I would have loved to have seen fleshed out here.
Your comment was the first one related to that rule I read, and I'm a good way down the page. Maybe you just happened to see the comments early on when a discussion on that happened to be at the top.
I recently started following author of this article on Twitter, he shares a lot of tips/tricks/insights about UI, visual design, etc. Highly recommended. And you will more articles like this on his website. He should add navigation to article pages, though.
It’s worse than that. I liked this article, but it was anonymous and undated. I looked around the site to find out who this was. Despite the author wanting you to know about him, what other people think about his skills, etc., he seems not to want you to know what his name is. I find this kind of thing bizarre. Does he want you to guess it from the URL? I finally saw his name in his page about “books I wrote”.
I think his design ideas are sound. But visual design without any notion of information design is like having a beautiful car with no wheels. Or something.
>he seems not to want you to know what his name is. I find this kind of thing bizarre. Does he want you to guess it from the URL?
I know this is hard to grasp in the world of LinkedIn that we live in, but would it shock you to learn that sometimes people just like to share things without it being directly marketed somehow? Not everything has to be a hustle.
> It’s worse than that. I liked this article, but it was anonymous and undated. I looked around the site to find out who this was. Despite the author seemingly wanting you to know about him, what other people think about his skills, etc., he seems not to want you to know what his name is. I find this kind of thing bizarre. Does he want you to guess it from the URL? I finally saw his name in his page about “books I wrote”.
I'm guessing that his website is work in progress or/and he's learning cms he's using.
>I think his design ideas are sound. But visual design without any notion of information design is like having a beautiful car with no wheels. Or something.
Sure, but you should learn from multiple sources as not everyone should teach about everything. It's up to you to connect that knowledge.
Agreed.
I do think it's better to publish good ideas on an imperfect site than not to share at all, but yeah, every article needs to have a date on it. Leaving it undated doesn't make it "evergreen", it just makes it annoyingly cut off from the implicit context of the point in time.
Agree about the date. Even saying the year is better than nothing.
In another of his articles he begins with "Stripe recently refreshed their website..." but we have no way of knowing what "recent" means. The article might be 10 years old. For someone focused on attention to detail, he has neglected the importance of date in context:
Sometimes it's okay not to mention date, such as a movie or book review. We know it was written some time after the book or movie was released - a date already known to reader.
> Use near-black and near-white instead of pure black and white
Please don't. Reducing contrast of text makes it harder to read. Even if you do it just a little bit, it still makes it a little bit harder to read. Worse, a lot of designers seem to get carried away with this and end up with gray-on-gray text that's impossible to read for anyone over the age of 30.
Plus it doesn't even look better. I guess this is subjective but I frequently open the devtools inspector to edit people's CSS to turn their near-black into black and their near-white into white, and every time I'm like "Wow, that looks so much better!"
Maybe I'm just a systems engineer with no sense of taste but I absolutely don't understand why anyone wants this.
The example from the article is #F2F2F2 and #222222, which has a contrast ratio of 14:1, which is nearly three times the WCAG guidelines and better than most websites. I think it would be instructive for people who think they hate off-black and off-white to try reading #FFFFFF on #000000 text and compare their reading speed to #F2F2F2 and #222222. I believe (but can't prove) that most of the hate is for contrast ratios below 10 being falsely applied to higher ratios.
People over the age of 30 can mostly read books and newspapers just fine, and when they can't it's rarely the fault of the off-white paper and slightly faded ink.
I worked in the nuclear industry for several years building control room consoles. Use near-black and near-white was dictated. Neither programmers nor designers had a say in the matter. It was not a matter of "opinion". Human factors researchers made those decisions.
In fairness, that's also what the article is saying: near black and near white.
Do you have any links to the studies by those researchers? My own understanding is that yellow-on-blue is traditionally meant to be the most visible option, but that there's not actually a huge amount of evidence to back this up, and it's more tradition than anything else right now.
I do not understand the first rule. I want pure black backgrounds, even if "you" wont give me pure white foreground letters. This has become more and more important as I have aged. Maximum contrast please. Especially on OLED.
> Too much contrast has never been an issue, which is why no one uses flux or dark themes, right?
f.lux is for increasing color temperature. Dark themes are for reducing the ratio of bright to dark. Neither is primarily intended for reducing contrast.
> It's relatively easy, by turning #ffffff and #000000 both closer to #ff0000, or in other words, by reducing the contrast.
Yes, but decreasing contrast is an unfortunate side effect, not the goal. This is like saying that the purpose of a light bulb is to increase your electricity bill.
> Dark themes (excluding amoled themes) exist to reduce the perceived contrast between the screen and the environment.
Yes, but not the contrast between text and background.
I actually have trouble reading the text on that page but not on HN. When you have actually bad eyesight you can easily "see" what works and what doesn't and that page is bad.
The main problem is that the worst consequence of not following this rule is still perfectly usable, while the worst consequence of overdoing it is the
font-weight: 300, color: #555
nightmare that we see everywhere on the modern web.
So lets just not.
Also, a backlight-based screen is not the same thing as a newspaper, where you can easily increase contrast by improving your light source almost infinitely. I can always decrease my screen brightness quite a bit, but there is an upper limit of increasing it.
The opinion that something is wrong with your display if black text on white background is too bright strikes me as odd. Would one expect that #f00 or #0ff to be comfortable as well? Asking the monitor to blast the highest light intensity possible across the screen clearly risks being uncomfortable in many light conditions. Monitors emit light, they aren’t passively illuminated like a paper. If you reduce the brightness to the point where #fff is comfortable across the screen, there’s no room for bright details, that should exceed the brightness of the bg. So many programmers use dark mode to reduce eye strain for a reason.
That said, even though monitors like laptops and phones increase brightness, that’s not enough when in direct sunlight. There, black in white would make sense, but of course comes at a cost of reducing range (it’s physically impossible). Screens that are incapable of keeping up with direct sunlight should probably increase contrast in those conditions.
If you are making a video game or movie and you wast super-bright stuff on the screen, that's what HDR is for.
(Incidentally I'm a big gamer but I generally prefer to turn off HDR because it hurts my eyes. It's actually really annoying. I don't want certain parts of a scene to be extra-extra-bright.)
If you're giving me text, please don't second-guess whether I've set my monitor brightness appropriately. The vast majority of text I look at is already black-on-white. By reducing the contrast of your text you're assuming that everything else I look at is blinding me and somehow you're saving me with more appropriate contrast. No, I've set my monitor so everything else I look at looks right and what you're showing me is too washed out.
> If you're giving me text, please don't second-guess whether I've set my monitor brightness appropriately
Why would #000 text on #fff be the correct way? It’s common but not at all ubiquitous, there’s no standard for this.
> No, I've set my monitor so everything else I look at looks right and what you're showing me is too washed out.
If you don’t like the extra range you can easily increase the contrast and reduce the brightness, but the other way is very destructive. You can go from #def -> #fff with a simple transform but you can’t go the other way. And if you use 100% of your range in a single element, you have no room for using color, shadows and background, which is a critical tool for all complex design, including old school Windows and Mac UIs from the 90s.
That said, there should be better APIs/standardization and monitors should be better at adjusting brightness and contrast to lighting conditions. I don’t mind at all that people change to whatever suits them, in fact I wish it was easier to use things like reader mode (which ad-tech has been fighting against, hard). Lots of web sites suffer from all kinds of design issues these days, sometimes too low contrast, even for me.
By maximising contrast, one is trading short-term legibility with long term legibility. The maximum amount of contrast is as problematic as almost no contrast. There is a maximum useable deviation to both ends.
By approaching max contrast, it gets harder to read for longer periods, because your photoreceptors approaching exhaustion, creating an after image [1]. It may happen slow enough to go unnoticed for some periods but should be noticeable at the end of a day as eye strain.
This completely depends on the reader's lighting conditions and time of day.
If I'm sitting on my laptop in daylight, outdoors or in a room with large windows, I'd really like to max out the contrast while reading. Later in the day, the "Night Light" feature that's built into Windows 11 will reduce the contrast and increase the color temperature towards a yellower hue. (In past years I used f.lux for this.)
This kind of adjustment is not something each website should try to do. It's a system-wide setting that needs to take into account e.g. local sunrise/sundown times, like Night Light does. (And on iPhones, there's a light sensor that takes care of this.)
Videographers would recommend using the full dynamic range that is available, right? That way you are providing maximum detail and letting other systems (e.g. screen, room light, human visual system) scale as appropriate.
Even if your scene were in the middle of the night you would still use your brightest white ("FFFFFF") for the least-dark moonlit areas. (Striking recent example is The Northman fighting in the caves.)
In that context I wonder if the motivation for recommending near-white and near-black, i.e. foregoing dynamic range for no intrinsic benefit, is for contrast against other things in the user's field of view e.g. large images, browser toolbars, popup notifications, etc.
At the very least GP included a some sort of source (a link to an interesting wikipedia article). You dismissed the source with an anecdote. Not sure you're the one who should be making claims about pseudoscience.
GP's source doesn't actually motivate why an after-image is tiring for the eyes.
I'd associate eyestrain with the muscles in the eye. Like you can give yourself eye-strain by quickly moving the focus from close to far-away a couple of times.
Meanwhile, after-images are a neurological artifact. They do not cause your eyes to change focus, and are not caused by the muscles in the eye.
Although extremely bright light may strain the eyes in the same way your eyes may be sore from contracting if you go outside on a bright summer day.
Regarding the pseudoscience argument, maybe this helps a bit: as far as I understood it, there are two types of after image: One is a neurological artefact, the other one is a biochemical one.
What I described earlier as exhaustion is buried in a process called visual cycle, which is a biochemical process. If enough photons of a given wavelength hitting special molecules of a part of your retina, these molecules run through a replenishing cycle after photon absorption to run through the same loop again and again. If light source is strong enough, the cycle is not adequate to account for the incoming mass of photons, essentially triggering temporary deactivation. The molecules responsible for colour vision register the inverse of the incoming wavelength, as in: the absence of all other wavelengths registered gets interpreted as the colour one sees. This essentially creates the yellow after image if one looks at an object with strong red and blue content.
This is a can of worms and there is more involved, even on the side of the emitter which is why there is measurement in watts per steradian going on but my knowledge ends here. Maybe a Biologist can chime in.
Yes. The default settings on most monitors are unusable for reading. Calibrated reference screens for print reproduction are approaching 120-140 cd/m^2, which tends to be in the 20-35 percent rage of most monitor brightness settings (if the implemented brightness curve of the monitor scales lineary; not the case with some Eizo‘s. These use something akin to an inverted gamma 2.2 to compensate for the nonlinearity in brightness sensivity of humans) 120 cd then looks somewhat like matte paper. Ideally, this should shift up and down with the brightness of the environment the screen is put into. That is why most serious photometers/colorimeters include ambient light sensors and consider the results during calibration.
It's "too bright" because 100% white is being used and covers most of the screen.
When most displays blast intense white light in your face at normal settings, it's not a screen brightness issue, it's a content brightness issue. Solved with controls such as dark modes, reading modes and options for users to customise. Obviously a lot of users prefer the full contrast experience, but many don't. Providing user choice is best strategy.
The neuroscience of after-images is a lot more complicated.
It's certainly possible to cause them by "bleaching" photo-pigments, but this requires extremely bright light. Other mechanisms likely produce the after-effects you normally encounter, and even there, eye movements (large and small) should help counter-act them unless the stimulus is very large and bright.
I have no doubt that overly contrast-y web pages can cause eye strain, but it's usually not because they're exhausting photoreceptors.
and guess what, it's far easier and more pleasant to use all contrast available in color and tone it down with the brightness setting of the monitor, than doing grays on grays and having to shade or crank up contrast in the monitor
Yes it does depend on lighting, see my other comment.
No, ‘Maximum contrast everywhere’ given as a directive without consideration is not a solution and will increase the problem.
Consider things beyond HDR displays: At technology progresses, we will approach superbright display technologies which will surpass the dynamic range of the human visual system. Technically, these will be as bright as light bulbs and brighter and could be used as such. Going by that max brightness directive, we will all stare happily into a direct light source one day. Or one is happily busy dragging the brightness slider up and down the whole day, one at a time for every app and site. It won’t work. To solve this, we would need tone mapping at the latest pipeline stage, everywhere. And this will, of course, again reduce contrast, but this time, by design.
The other major problem is: by leaving it all to the users (all three dimensions of the now prevalent color model), one throws every standard out of the window. One website will send out 4000 nits, the next one 350. One display can handle it, the other cannot. Color shifts abundant. How should that be accounted for?
Furthermore, your model makes it impossible to design for: this removes the visual target platform and puts legibility and qualitative design principles at the mercy of technological progress. So solve this with the tech available, there were several agreements made to specify calibration targets - which include brightness and contrast settings, aka gamma in more than one dimension.
In a perfect world, no screen would leave the factory without a built-in calibration device and an ambient light sensor.
One more problem, the constant intermixing of use cases while discussing HDR displays: not every use case needs an HDR treatment. It does not make any sense.
The main problem HDR solves is that content creators are not forced to squeeze 10 pounds into an 6 pound bag anymore. And if your display supports this, you can benefit from the full color space the content creator wanted the observer to see. Which is totally nice for hundreds of use cases. However, staring at a pitch black font next to a white background which emits 20.000 cd/m^2 would be painful.
This both ignores that color calibration is a thing, and that the hypothetical 4000nit display will still have a brightness setting, and ignores the pain of real users with real 250nit displays
For me pure black text on pure white background looks good, but pure white text on pure black background it doesn't look good, my eyes are getting tired faster but that also depends on what font family/weight/size is used. For thin font weights (100-300) maximum contrast increases readablity, for regular/bold weights it's not neccessary to be pure white on pure black.
> Worse, a lot of designers seem to get carried away with this and end up with gray-on-gray text that's impossible to read for anyone over the age of 30.
I have always put this down to designers having very high quality monitors with excellent contrast. Apple screens (laptop or desktop) particularly tend to show those low contrast things as more readable than for the rest of us.
It is a plague that seems to be less bad than it used to be. I think it's ok in principle but it should be quite subtle. Also, I think that full-black should generally be used for text, but you can get away with more on the background (look at HN for example!).
IDK. I'm over 30 and pure black background with white text hurts my eyes. It isn't a brightness thing either. I can turn my screen brightness down to 30% and the contrast still hurts my eyes. Black text on white background is fine though.
Yeah, over 50 I might buy but I am almost 40 and have no big issues reading low contrast webpages. Sure, I prefer higher contrast like here on HN but low contrast is about as hard to read as when I was 20.
The problem is that if your monitor is set up so that a white background looks OK, then all photos, video, etc, will look too dark. If your monitor is set up bright enough for photos to look good, then text on a white background is too dazzling and tiring for the eyes. So the only good compromise is for the monitor to be set up so that photos are bright enough and then not use text on a pure white background.
Better solution: provide user controls so people can select the contrast themselves. It's never going to happen that developers and designers all decide never to use pure white. User controls and options is best solution.
I believe near-black and near-white suppose to be used in conjunction with all the other suggestions made in the article, not just by itself. If you are looking at a document, I would say that should have different rules applied.
Most content on most users’ screens doesn’t use pure black/white for UI. Most users will (assuming they even know or care how to adjust their monitor, which is far from a given!) adjust their monitor to make most content look good, which will not be the same as making pure black/white UI look good.
So, then if designers stopped lowering the contrast of their sites, users would adjust their monitors back to sensible defaults rather than cranking the contrast to make low-contrast web sites look good. Right now we are stuck in a loop where designers assume users have cranked the contrast too high, so they make low-contrast web sites, so user have to crank the contrast too high...
TBF, I think having a small range of blacks in use is a good thing. Use 0.0 and 1.0 for highlighted items. 0.1 and 0.9 for the rest. Great! A little color rather than grayscale? Great!
But, I've seen far too many sites that take it too far and think they are smart by presenting dim-on-grey text. f2 hex is 0.87 and 22 hex is 0.33. That's cutting my screen's range in half! And, that's much better than many lovingly designed sites I've had stomp over with screen-reader mode, on my 800 nits phone screen!
That every website uses different “blacks” and “white” is the problem though, because it means you have to adjust your screen differently for each website. If they’d just use #000 on #FFF like 20 years ago, you’d only adjust your screen once and be fine.
My point is that nobody is adjusting their screen for your website, and using black and white doesn't imply that people would need to adjust their screen for your website.
What are all of you people talking about? People adjust their laptop brightness at will. I adjust mine all the time for comfort when reading. It is two buttons on the keyboard. All cell phones have easy brightness controls a swipe away and everybody knows how to use them.
Monitors have contrast and saturation adjustment, not just brightness. Since we're talking about text-on-background contrast, I'm (and I figure others are) referring to the contrast adjustment that other devices don't have.
LCD screens don't need contrast or saturation adjustment unless you are a design or photo professional. For any screen really, you set the contrast at the proper level if it isn't already there from factory. We adjust brightness because the brightness of our environment changes during the day.
As I read the thread, the discussion is about reading text on a laptop or mobile screen. For that you need nothing else than brightness controls. And 100% black text on 100% white background is a good default and works well for all users.
A lot will and for those less savy probably a majority of new devices come setup to adjust brightness based on ambient light conditions. This difference between ambient and screen brightness will be what determines how comfortable max white is on SDR content.
Also can't control if a user has their brightness too low. So what then?
For any complete design noobs, like myself, I asked HN for a crash courses in design, and the top recommendation was Refactoring UI by Adam Wathan and Steve Schoger.
I studied that ebook over 5 days (it would be possible to read in 1 day), took notes, and found it a delight to read and incredibly unpretentious (sophisticated ideas are conveyed in simple side-by-side comparisons of right vs wrong ways to do things).
I recently paid for Refactoring UI, after the rave "reviews" it's getting on HN, but was quite disappointed to find that it's mostly about design in general and doesn't have a lot to say about design problems that are specific to UI and nothing at all that takes into account the time axis of interaction design. I pretty much knew all of this stuff already from having read a much cheaper introductory book on visual design that was written with print in mind.
I'm also a bit displeased that "UI" seems to mean "webpage" these days (not even SPAs, but just laying out hypertext and graphics on a screen), whereas I always considered that to be a special case of UI that's so trivial that it almost needs to be thought of as a "degenerate" special case. It used to be called "web design" but that's probably too 90s and wouldn't sell books nowadays. I actually wanted to learn about desktop GUIs, making this wholly the wrong book for me.
I self-taught those principles decades ago with "About Face 2.0", "The Design of Everyday Things" and "Don't Make Me Think". Though old, I know they provide solid principles because I still find them relevant today.
These come from an era before HCI was a professional discipline taught in schools. I suspect newer books don't teach these general principles because they take for granted that a professional will have learned them already through their formal training, so they can focus on specifics.
A good reason to break "Use near-black and near-white instead of pure black and white" for blacks is if the design will be viewed either on a projector, or with an an OLED screen as both will display pure blacks quite pleasingly.
I suspect the designers with their near white and near black to have superior monitors that are capable of more contrast than regular users. Ironically my cheap monitor automatically converts pure black and white to near.
My understanding is professional designers use color-calibrated monitors, which unfortunately have nothing to do with the actual monitors and screens most people actually use to view content.
Designers monitors' are calibrated to perfectly match a cheap 90s CRT (sRGB, Rec. 709, 200 nits brightness). Sadly, most cheap modern LCD screens are far worse in contrast and color gamut than 90s CRTs.
I thought the no-pure white/black was due to human visual perception. That neither occurs in nature and they seem fake/artificial to the viewer. Nothing about how good it looks on the medium.
Very true. This is more coming from print media where you can get closer to true colors. This might be one of those things that needs a tweak when translating between mediums. Much like optimal line length.
Sadly we're still in the past when it comes to displays to be used outdoors, but if you compare a Kindle in sunlight, the white background is probably an order of magnitude brighter than any normal computer or telephone screen.
"Don't use pure black for text" or "don't use a pure white background" are total myths among designers. You'll never have anything close to a pure color on current display technology.
I've noticed that font size is contemporary. It used to be a lot smaller when people had smaller resolution monitors, which seems counterintuitive because it ought to be harder to read with fewer pixels to render those tiny characters. In twenty years, it might be different again. The trend is to larger font sizes, and I've noticed things are already adjusting to that and if you've got a traditional small font size, it'll simply be hard to read. We're basically scaling up interfaces as a whole, slowly, while all the advice is is to increase font size to some arbitrary minimum for readability.
Wouldn't smaller fonts render bigger on old monitors? Higher resolution means you have to use a bigger font. And now you run into a 15 year old website now and then and text looks tiny
This is correct. I had a 15" CRT that was 800x600 in the late 90's that I did designs on, so I used a 10px font. Now I have a 15" laptop screen that is 1920x1080 so of course I'm not going to use 10px fonts anymore.
I bet if the font size was given in pt instead of px it would be mostly constant. Because you need a minimum physical size of the letters to be able to read them (like the test at the optometrist).
As you get bigger resolution on standard sized (computer) screens, increasing px gives you the same physical size of the letters with more and more detail around the edges etc.
I have the impression that it's more than that. Many websites these days allow me to see less text at a time on a 27 inch monitor then I had 35 years ago on a 14 inch monitor. More and more websites look like those books for very young children, with text and line spacing so large that only a few paragraphs (or sometimes not even that) fit on the screen.
For CSS, both px and pt are (supposed to be) physical sizes: 1 px = 0.75 pt
1 px = 1 pixel was the original intention but has not been true for a long time now.
The problem is that some people use HDPI screens without (adequate) display scaling - likely to recover screen space from existing bloated desings - and then base their own designs on that. So neither px nor pt end up referring to physical sizes in practice.
Dark/light mode is fine and all, however be wary of accessibility. Note that the US actually even publishes it's own CSS/JS framework similar to bootstrap. I believe (but I am not positive) it is here: https://designsystem.digital.gov/
I don't claim it to be perfect, but the last time I had the opportunity to use it, it put other UI/UX frameworks to shame.
Back when I still did web stuff, at one point I had made a special accessibility stylesheet one could set for the university. Nothing crazy, just bigger fonts, higher contrast, and some of the guidelines at the time were going for "light text on dark backgrounds," so I implemented that as well. Got rid of a lot of the little crufty visual design elements the designers (who were not me but set thhe rules) that look pretty but end up being kind of irritating. Couldn't get anyone to go for it. Just a nice click for "accessibility mode," you know?
I've talked about this on HN ad nauseum but it was so frustrating to have this issue ignored. I am in a different field now and try not to let my employers know that I can do web stuff because, but if I ever got back into it, I think I would have to have some kind of employment contract section covering YES WE ARE GOING TO DO THIS I DON'T CARE IF IT TAKES MORE TIME with some kind of slideshow presentation everyone would have to endure each year titled "Your Audience Isn't Just Teens with Gigabit Connections Who Have the Visual Capacity to Discern Dust Particles Drifting By."
Whats really nice is it's not just theory, but a ready to deploy system. You don't have to adopt it 100%, but you can drop it into your environment and then tweak it to meet your needs, rather than having to start from scratch.
I deeply hate the style of design that's become popular over the past few years. "No borders, flat text and flat buttons, multiple fonts and font sizes on the screen at all times, heavily simplistic and hidden menus".
I use software to build stuff, damn it. I want well-notated and labelled complexity. Stop making my tools look like an elementary school classroom in a dystopian short film.
The "Tertiary button" example in the article. How is this a button? It's a piece of text. Zero visual indication whatsoever that it functions as a button.
I've done my fair share of front end dev and I like modern flat designs, however these text-only buttons take it too far.
I once counted twenty different methods of indicating that something was clickable on a single screen in a Jira build my company was using. They ranged from a button with depth to literally nothing but blank white.
Pure blacks only exist on OLED, and to a lesser extent with FALD (not relevant for text). What’s worse, IPS panels only have a nominal contrast ratio of 1:1000 or less. #000 already is only dark gray on them. Please, PLEASE, use pure black for text!
> pure white is too bright
I’d argue that the brightness of your display is turned up too high if pure white is too bright. It shouldn’t be brighter than a sheet of white paper held next to it, and normally we don’t claim that those are too bright.
>normally we don’t claim that those are too bright
I print a lot of books, and I find that a more "cream" colored paper is much more pleasant to read for an extended period of time. YMMV but if there's more than a paragraph of text involved I'd prefer a lower contrast ratio.
Adjusting the screen brightness means you need to calibrate your screen again from scratch. All other settings have to be redone after changing the brightness, and you need to generate a new color profile.
Standard brightness has a fixed value, adjust contrast in your designs, not in the settings of the screen.
> "It shouldn’t be brighter than a sheet of white paper held next to it"
That comparison makes no sense for emissive light sources such as screens. You could argue it for e-ink displays, but not normal screens where we watch mixed content such as videos and photos - where we want whites to be bright.
I love guides like this and I bookmarked this one.
It reminds me of a book by Robin Williams (that I remember because of Mork) called "The Non-designers Design and Type Book." I got a lot out of that book because it gave me
some visibility into guidelines I wasn't aware of before I read it. It definitely improved the quality and effectiveness of a ton of my work on and off the web.
The idea of alignment in this post reminds me of similar ideas in Williams' book, but there are definitely ideas in the post that aren't in the book.
I definitely will take the advice of another comment in this thread and try to follow more of the author's content.
I'm close to 40 now and I'm not using 8pt pixel fonts anymore.
But the advice to use 16px normal text fonts was probably written by someone on a mac or other hi-dpi display. On Windows and Linux without 4k I find it horrible. So you're shifting from "not large enough for 50% of your users" to "too large for 50% of your users" - unless you know your user's hardware...
Yes, the author also says that visually closer elements should be brighter, even in dark mode. If you use pure black for the overall background and dark gray as the fill-in color for frames/highlights, this agrees with the author's recommendation and still leaves you with plenty of contrast to play with.
I also agree that pure white should almost never be used in dark mode - it's usually reserved there as a highlight color, for critical warnings that should immediately alert the user.
It’s really unfortunate that the author started with the most controversial of rules, because I find much of the rest of the article to be quite the helpful summary.
Particularly padding and margins - I’ve only recently taken the time to study what makes a design look good vs looking off in terms of spacing, and have come to similar conclusions as the author.
I suspect if the rule against pure black on pure white were buried in the middle (or omitted) then the response would be warmer.
I learned about "too much contrast" from a type designer that painted typefaces by hand. We were taught not to use pure black ink on white paper because it's a bit less legible than softer contrast.
I'm not sure why it's so controversial among digital designers.
The same person taught me that "optical alignment is often better than mathematical alignment" (which is why the bottom of curved letters often falls slightly below the baseline if you look closely).
>I'm not sure why it's so controversial among digital designers.
Assuming you're talking about the "Give me #000000 on #FFFFFF or give me death!" crowd, it's a kneejerk reaction to the cardinal sin of gray-on-gray content that is fucking impossible to read.
"Kneejerk" is a bit of a down-putting assumption, isn't it? There are many, MANY, reason why someone might disagree with the OP opinion on black and white.
I happened to have a few iOS apps where true black is an option (which is desirable on OLED to save battery). A perhaps less common concern is eInk whose dynamic range is quite limited and for which #000000/#FFFFFF greatly enhances readability.
(I believe) 80% of design is technical and 20% is creative.
This means developer built UIs, documents, etc. could look waaay better by following simple design (typography! included) guidelines.
I believe these guidelines exist, but there's no well defined, available, or well-known "grammar" (as in this type of grammmar https://vita.had.co.nz/papers/layered-grammar.html) and there's no set of rules.
With a proper grammar and rules we could go a very long way.
Other examples are
When/where/if:
1. Illustrations should be used.
2. Photos should be used.
3. IxD (interaction design) / animations.
4. Colour palette selection / creation.
5. Flourishes.
These are the things I struggle with when designing generic corporate marking websites. I'm not a designer but I've worn the designer hat many times. I always warn my employer/client that I'm more of a technical designer than a creative one. Nowadays I just stick to application design since it's 100% technical.
Example: as someone who's more technical than creative I could have come up with the overall layout of the Excalidraw+[0] website but I don't think I would have thought about adding circles around keywords or the dashed line that leads users down the page.
Playfulness, "flair" and other emotive forces guide creative decisions usually, but there's nothing stopping a technical person from arriving at similar outcomes via a more technical process. It will take more time and be less fun, less satisfying, but it's possible.
For example, once the basic IA is worked out, you could have a phase of the project called "flourishes", where your knowledge of illustrative techniques, eye-tracking, colour theory and UX tricks and so on, guides the design. Along with business needs, communication preferences... Another phase could be "product photography" where knowledge of what makes a good photograph comes into play.
But yeh it's usually easier to get a professional designer who enjoys and does these things all day long!
I don't understand why there isn't a "home" link somewhere in most pages of his website, the only way to see more of his stuff is to manually edit the URL. I really like his content and respect his skill, so there should be a good reason right?
> Use near-black and near-white instead of pure black and white
This is not safe. During the past few years this became a trend, legibility has suffered greatly and eyestrain has increased significantly for me. It gets even worse when combined with `font-weight: 300` - completely unusable.
This is on high quality 4K laptop screen / expensive EIZO FlexScan 32" monitor / Macbook screen - its even worse with other less expensive equipment.
> Use a line length around 70 characters ... It doesn’t matter too much if your line length is 60 or 80 characters, but go too far either side of that and you might run into subtle readability issues.
Says a website using a painfully-large font size that results in a line length of only ~40-characters ;P. That said, despite using a much more reasonable font size, Hacker News goes out of its way to limit line length to ~40 characters even though there is extra margin it could be using to get up to ~50-60.
Now, I'm sure some people are going to balk and say that this website--and Hacker News--in fact have longer line lengths and I must be crazy, but the reason they look the way they do to me is because I am reading this on a phone... as are most people doing most of everything they do these days: using actual computers is now somewhat rare.
However, I honestly have no issue reading with a ~40 character line length! In truth, I am pretty confident that I prefer it to longer 60-80 character lines: I read books on my phone, and I have the font size set to reflow at ~40 characters per line, and if I move to landscape (at the same size) I find that difficult to track as the lines are simply too long.
Now, we might then conclude that this is somehow just obsolete advice caused due to a lot of designers having grown up during a time when people used to have devices (even computers) with larger screens and were maybe more used to seeing long lines of text on large sheets of paper, where obviously everything had longer lines than my narrow phone...
...but no: I'd argue that some of the best typesetters in the field, who had the strongest reason to care about optimizing for legibility and readability, worked for newspapers, and if you pull up a scan of an old paper--whether from the 1980s or the 1860s--you will find that they all prefer ~40 characters per line (and you will find the same with science journals and government registers and most magazines).
I will thereby claim that the only reason we put up with 60-80 character lines is because it feels like a waste on a widescreen monitor to enforce such a narrow column and the technology of scrolling makes it extremely awkward to have multiple columns (as anyone who gets angry at navigating PDF articles--almost all of which are typeset with ~40 characters per line--in a web browser experiences viscerally).
I do not understand the first rule. I want pure black backgrounds, even if "you" wont give me pure white foreground letters. This has become more and more important as I have aged. Maximum contrast please. Especially on OLED.
Such rules are great help for beginner designers or engineers working without full design specs. Even if experts might debate the reasoning and science, it provides some rails for such folks.
The "multiples of 8" for spacing and sizes is one such rule I follow and it is easy to remember. Some of the rules in the original article are harder to remember. Though I will remember the 16px as min font size idea.
If I open up word and print out something with a black font color on standard paper, that printed document won't have completely black ink on a completely white paper. Things that are 100% black and 100% white don't actually exist in the real world.
Not really formal, but there are a ton of books and articles that describe such things from a psychological standpoint. I can recommend „Dondis, Donis A. A primer of visual literacy. Mit Press, 1974.“ to anyone interested in concepts such as those in the linked article.
Did some googling and just found a bunch of assertions for where the visual center is in an image. Sounds like it’s “where people perceive” the center to be and that’s about as good a def as is possible.
My first guess is it is the centroid. My second guess is because the example isn't a simple convex shape, the brain sees it as two shapes glued together and you want the barrycenter of those.
Are all the horizontal and vertical elements near your picture level? i.e. the ceiling (often not level) the floor (ditto), the door frames, etc. If those aren't then your "level" picture will look uneven.
This is well done: the scope is well-contained, the text is clearly written, the ideas are clearly illustrated, and the advice seems helpful. Glad to have read it.
Last year I've read a book by architect and design theorist Christopher Alexander. He introduces a collection of fundamental properties of wholeness - the Fifteen Fundamental Properties from which life in objects and buildings emerges. I tried to capture the essence of each property, mostly for my own reference I put them here https://camillovisini.com/article/fifteen-fundamental-proper...
Urgh, I wish people would just pure black. The number one CSS style hack I end up applying to websites is to shift "grey" text to just solid black, and the difference in legibility is dramatic.
Agree with them, however I think true black #000000 is useful in this day and age on OLED devices. Having something fade in to the bezel of the device is a nice design statement.
> Pure black looks unnatural on a screen, and pure white is too bright.
Huh? Nothing about text on a screen is "natural". "Too bright" is completely meaningless, you have no idea what my motivations are for the brightness settings on my screen. The content should make use of the full range of brightness, and the user can then adjust the contrast to any point in [0, 1] as desired. This is like suggesting that an audio sample should only use 10% of the dynamic range allowed by the file format, because "speakers are too loud".
> some odd shapes have a visual centre that is different from their mathematical centre.
"Mathematical" doesn't really mean anything here. Are you referring to the centroid? If anything that is a "more mathematical" concept than a midpoint. The use of this word here makes it look like you want to eschew the technical perspective in favor of the emotional, aesthetic perspective. But a centroid can be computed.
I think all of their uses of “mathematical” just means bounding box. It’s pretty reasonable because those are the numbers design software shows you for placement and uses to make guides. And you can calculate a centroid, but what about when the image has multiple colors, making one side look heavier than the other, or any other weird case? This isn’t rejecting math, just in this case it’s more effective to go with what looks right versus follow a formula. You don’t use a slide rule to catch a baseball.
This is the entire basis of the article. Use the word "mathematical" where convenient to sound smart, but never come close to defining the word. Sprinkle in a whole bunch more of these opinions-masquerading-as-facts, and there you have it.
Same thing with the "too bright". Too bright based on what? Too bright for whom? Doesn't matter. Just follow these opin- I mean rules.
? Not only is there a very specific meaning to 'mathematical' the article is in fact dead-on example of good design rules.
'Mathematical' alignment would mean centering on the basis of width or height, whereaas 'optical' aligment would adjust for the 'visual weight' of the item, which often 'feels' different.
For example, a 100px wide container with a 50px wide image within it, may not be appropriate to sit at the 25px->75px range. It may need to be slightly adjusted depending on the visual mass of the images.
Honestly these are excellent rules for design, and it's a bit funny in fact to see all the comments from people unable to process ostensible ambiguity in the rules, as though they are looking for a 'precision algorithm'.
I would say to anyone having difficulty processing why these are helpful rules, that it would be worth looking into design principless overall, it'll be a fun experience.
A better wording than “mathematical” would have been “simple integer ratios”. Taking √sin(e) would also be “mathematical”, but probably not what the author meant.
"Mathematical" and "optical" alignment is not the best wording I think. It seems that "align by weight, not by width" would be a better way to summarize the author's advice.
But apart from that, it is good advice, and I think the post gives a few more good rules of thumb too.
“Mathematical" and "optical“ stems from design lingo and is AFAICS not an invention by the author. One can find these terms in most of design related software packages. “Mathematical” is also often described as “metrics”.
Indeed. That's how my brain reacts to it - it keeps nagging me that thing is not properly balanced and will tear everything apart when rotating, like a washing machine does when you throw a brick inside it.
it ought to be clarified that this is from the perspective of digital design, i.e. things that appear on screens. some, but not all of it is applicable to print design. that said, it seems to be a pretty decent list, all told—I clicked the link expecting to find lots of things to complain about, but it's actually alright.
If you're not well-versed in visual design, it's okay to stick to some basic guidelines.
But remember, every rule is just a starting point. If you have a solid understanding of contrast, color, composition, usability, accessibility, and more, you have the freedom to experiment and try new things.
In my professional opinion, standardization and commoditization in design have their pros when it comes to production and usability. However, this approach is leading us towards a bland and uninteresting user experience.
I'm hoping that the emergence of XR will bring back some of the old-school "skeuomorphic" spirit of exploration, expression, and texture in design. If we keep relying solely on "best practices," we risk being replaced by automation.
And please, don't design UI without having a design background. Use some UI library or Tailwind/Bootstrap instead.:)
> And please, don't design UI without having a design background. Use some UI library or Tailwind/Bootstrap instead.:)
Maybe it's time overthrow the W3C and invent HTML6 already, and provide for some proper modern UI widgets instead of needing piles and piles of JavaScript UI-library-of-the-month that create widgets by hacking together a clutter-fest of div hell.
Stuff like <hamburger>, <tabset swipeable="true">, <img pinchzoomable="true" onclick="window.lightbox(this)" lowsrc="..." highsrc="..." ultrahighsrc="...">, <ul pulltorefresh="true" onrefresh="foo()"> should be part of it already, <button> should have more sane margins, font, contrast, and border radius choices by default, <hr> should be low contrast by default as the article says, and the default background and text colors should be #f2f2f2/#222222, and not #ffffff/#000000. Visual centering should be implemented in CSS with a neural net. Let's get standards with the beat.
>Visual centering should be implemented in CSS with a neural net. Let's get standards with the beat.
Actually, I am utterly baffled that this is not the target of current neural net implementation. I expected some form of automation to emerge in this field first.
Instead, someone decided, that investing in generative "A.I." art and removing the human element from the illustration process is more important.:)
I think the designers are coming from the CMYK world of newspaper printing and such, where, due to alignment issues, text must be printed using a separate black ink ("K" black) even though it could theoretically be produced by mixing Cyan/Magenta/Yellow. This is due to the difficulty of perfectly aligning three different color plates, as well as imperfections in the ink.
In printed photographs, on the other hand, all four inks can be mixed to produce a darker black than is seen in the surrounding text ("rich" black). Thus, in newspapers, the contrast ends up being higher in photos than in text.
But this is due to limitations of paper printing technology--none of this applies to computer displays, where R/G/B components are always perfectly aligned.
Even in digital media, you might want a 10000:1 contrast in photos, videos and games, but you only want 10:1 in text.
It's not reasonable to constantly change your monitor's settings, especially when you want to display both in the same document.
With HDR content, this is already possible, full brightness in an HDR video will be far brighter than #ffffff in css.
But even for regular media, this is an issue, which is why you should configure your screen for the maximum possible contrast and then reduce contrast of text in software.
If you set text to maximum contrast, you need to reduce contrast in your monitor settings, which then also affects photos (which you obviously don't want).
> Decreasing dynamic range, increasing the contrast, is trivial.
How would I do this on MacOS or Windows?
Most people have one adjustment easily available--the screen brightness setting. This setting can decrease the contrast of pure black/white text, but it cannot increase the contrast of off-black/white text. Same with the Night Light setting on Windows 11.
Ideally you'd create a proper icc profile for your monitor. The ideal way is to use a calibration device, but both OS have a wizard where you can manually adjust contrast and brightness and generate a profile out of that.
This can be used to both increase or decrease contrast.
Isn’t the rule "Closer elements should be lighter" a contradiction with "Keep container colours within brightness limits"?
Should a background be darker than the containers it holds? Or should containers be designed as if they are behind a background, basically a hole in the page?
16px is the default text size in most browsers. Text below this size gets harder to read, so it’s safest to avoid it for body text. The higher you go beyond 16px, the easier the text is to read."
Out of curiosity, I played around with HN font size: by default on my monitor is 12px, at 13px is almost the same, at 14px is great, 16px is not better than 14px so it is wasting screen space. I think it depends a lot on the pixel physical size, that means diagonal and resolution.
Hacker News was designed by someone who considers design a waste of time and a distraction from the purity of information, and who made the site ugly and awkward on purpose to keep normies away. Honestly we're lucky it looks as good as it does.
IMO, HN looks better than many sites created by professional designers. It allows you to actually read the content instead of waiting ten seconds for the page to load, then scrolling through kilometers of whitespace and unrelated “hero images”.
>It allows you to actually read the content instead of waiting ten seconds for the page to load, then scrolling through kilometers of whitespace and unrelated “hero images”.
I'm able to read the content on every site I visit even when it has whitespace and images but to each their own. I'm glad Hacker News serves your needs.
Text should have the same size today is it did in the 90s. If your monitor has a higher resolution then please use DPI scaling isntead of wasting screen space for everyone else. That way old websites will still be readable without having to update everything.
HN would have rendered at the equivalent of 16px (exactly, actually) on a 90s computer. The issue here is that Apple and Windows assume two different default DPIs for a 90s computer (72 vs 96dpi), and as result, what 1pt is can differ by 1/3rd.
this is 1) highly useful and 2) says things that can't be encoded into any style tool I've ever used
it seems like standard-of-care tools like tailwind converge to transliterated css in real-world frontends
take something like 'saturate your neutrals' -- to use this automatically, a tool would have to label an element as neutral + figure out the color of the foreground element
'math relationships between spaces' as well -- computers should be great at this (it's math!) but css is doing everything in its power to not run code ever, making it hard
If you can't use pure black and pure white can you at least use "pure black plus 1" and "pure white minus 1"? If not then how far can you go away from the extremes before it becomes permissible?
it seems to be bit too opinionated and kinda overly exact in values, in some places. it's eager to go for some kind of look it prefers, instead of being more general (for it to be more flexible to fit within people's own tastes, preferences, and design systems), mostly going for more 'spacier values/look'. even in the first rule, with the 'near-black' just being...gray. picking #222 and trying to pass that off as 'near-black' when #111 is just right there, is a choice. #f2f2f2 as a "near-white" as well, that is not near-, that's off-, and again, there's #fafafa or #f7f7f7. rather than being general, giving proportional suggestions, it's not so much "rule of thumb" but "make the values this", which seems like the opposite of the kind of 'advice' it claims to give. (and even if those are just 'examples' - for this to be a page of reference, one'd want to steer from giving exacts as much as possible. so, maybe give examples in like, drop downs? and make the visuals into actual visual guides?)
also, not sure why this kinda random assortment of 'rules' was picked out to be comprised of these ones, and for them to be listed in this way. it doesn't come together into a more systematic approach, it's just kinda all over the place. (unlike if it was ordered more like, 'this is about space; this is about shapes; elements; colors; text; alignment; containers; clarity; complexity; etc.)
Does this or something similar exist as a browser plugin? I suck at visual things, and it mostly looks dumb because I don't have an intuition about these things.
I could go over a list like this and apply every tip to each element of what I might be working on but that's annoying. Font-size vs line-height, element alignment, button contrast and padding etc feel like things that could be automated -- even if it just ends in "hey, I drew a bunch of lines over your page, maybe you find something that looks like it could be moved to one of them".
> As elements on the screen get closer to the user, they should get lighter. This applies to both light and dark mode UIs, because it matches how the real world works.
I am looking around and this seems to me to be a straight up lie. In fact, I can clearly see the opposite if I look out the window. Objects further away get LIGHTER, not darker.
Very strange to write something so trivially false with such confidence. Like he would have written "objects fall up"!
That's true for very large spaces/distances (except at night) where atmospheric scattering comes into play, but consider looking at a flat surface with stacks of objects on it. Lower elements are typically more occluded from lighting due to shadows from higher and neighbouring objects (ambient occlusion), with objects closer to you getting more illumination.
The brain is known to make use of such cues to gauge depth, and it's used in several optical illusions. (You can even make use of this principle with flash photography techniques to create approximate depth maps for surfaces. It's quite effective.)
I would argue that a model based on close distances of stacked items (e.g. stack bits of card or paper) is generally a better model than one based on large outdoor spaces, as it is a closer analogy in most situations. (Reading on-screen being reading off a relatively-close surface.)
But both can work. Look at screenshots of a game such as Spelunky: dark backgrounds, light foreground objects. The eye is drawn to the lighter surfaces and can ignore the darker background. But if the background was a distant landscape (e.g. Rastan -- don't know why that was my first thought... showing my age!), rather than a relatively close cave wall, your approach of desaturated lighter backgrounds might work just as well, as it would be more realistic. And at night, the opposite would be true.
Shadows are a very different thing though. The shadow of a playing card lying on top of another playing card does not make the entire lower card darker.
> Pure black looks unnatural on a screen, and pure white is too bright.
Your screen does not reproduce pure black or white. Contrast ratios on LCD displays are already bad enough. No need to make it worse. People have contrast and brightness controls on their displays. Stop making comfort decisions for them. Let the user choose for themselves.
> Your screen does not reproduce pure black or white
The black on my screen is darker than the darkest dark in my environment, and the white is brighter than looking right into my ceiling lamp.
For all intents and purposes, it does reproduce pure black and white.
For readability, the contrast range should be clamped to that of paper – pure black ink on white paper looks the same as using #444444 on #eeeeee on my (calibrated) monitor.
To compensate for people with misconfigured monitors, extending the range to the colors mentioned in the article makes sense, but not any further, as that's going to be painful to look at.
Please properly configure your monitor instead. To be able to accurately represent images, the contrast of #000000 to #ffffff needs to be much larger than the contrast of any text in any reasonable situation.
And before I get the suggestion "just change your screens configuration to only reproduce colors visible on paper":
It's useful to be able to reproduce colors far beyond the range of print. Not everything IRL is colored by reflective pigments. From sunsets to iridescent birds, there's lots of colors and contrast ranges available in real life that your screen should accurately produce as well.
I was hoping someone posted this, you're not alone. I hate when lines are spaced so far apart, I think it's actually harder to read but maybe that's just because of all the scrolling. Decreasing the line height for headings is good advice (I think most of the article is pretty good), but when I compare the leading between books and websites it's as if the internet is formatted like learning-to-read children's books.
If you are interested in diving deeper, there is also a lot of good thinking in the US Web Design System - freely available here: https://designsystem.digital.gov
These are excellent tips for a programmer who's never thought about design to make something that looks workable. Will you get better results for a few hundred dollars from Upwork? Yes. But before you get to that stage, these rules are good.
I'm a frontender in a two men team and we have a backoffice application that doesn't require nice ui but still would like to see wheter I can improve it with those rules.
This is the ABC of UI style. Design, meanwhile, is the process of establishing goals for a user interface and making sure that the artifact you build serves those goals. Readers please be aware of the difference, as there's a traditional confusion among both terms going on.
A UX professional should learn about both perspectives and know how to apply both.
I have an idea for a TV show. Have people preaching their "knowledge" actually use what they create. Every time they can't figure out how to use it have an audience member whack them with a nerf bat.
well this is "safe design rules for developers" so I guess that's where being formulaic it comes from, to which "just pay a designer" is a fair answer.
I doubt that any of these rules are things the author considers to be proprietary opinions. The majority of them are common guidelines that are echoed by any competent graphic or UI designer. Many things like line length and leading have been extensively studied. Human factors researchers take things like readability/legibility seriously. A lot of science goes into signage or other functional uses of text.
While the presentation may have struck you as pompous, as far as I can tell, the author is just trying to save people time of researching these things and make it more likely that people won't keep building terrible websites which are hard to read or use.
There are a few things like using slightly off-black or off-white that can be controversial, but overall this reads to me like a great place to start if you don't know any better.
These are a set of extremely good ‘rules of thumb’. General engineering is full of them. One rule not mentioned though is this; “Break any of these rules sooner than do anything outright barbarous”, to paraphrase Orwell. However, to safely break these rules, it helps to know and understand them in the first place.
He gives the good advice that you should only follow the rules when they make sense, and not otherwise. With that in mind, the two rules I disagree with the most are:
> Measurements should be mathematically related
> Elements should go in order of visual weight
Because, whereas most of the other rules are probably good to follow 90% of the time, these feel sort of arbitrary and opinionated.
I think making measurements mathematically related is a convenience and is often helpful, but for the same reason that optically centering things is better than mathematically centering them, I think you can easily ignore a mathematical relationship between values if it doesn't look as good. There is nothing inherent about humans that makes us prefer magic numbers, it's just that using them gives us an easy way to achieve visual consistency. If it stops doing that, ignore the ratio. If a grid or your font sizes look better nudged by a pixel or two in one direction or the other, do that instead.
With respect to ordering elements by visual weight, my only complaint is that he specifically says "heavier first", rather than "heavier first, or heavier last, both are fine as long as you're consistent". So, it's a nitpick, but it bothered me because it's an easy distinction to make.