I find myself confused about what this is actually about. User interfaces, or general web content? It seems to skip blithely from one to the other, when they often have quite different requirements.

I’ve glanced at a few sections of it too, and although there’s definitely some solid stuff in this, there’s also some straw-manning, implausible assignation of virtue, and unwise recommendation.

Some examples from a handful of pages I went through.

• Grouping: under the Rectangle heading, the problem is not at all that there are two rectangles, it’s just a severely unbalanced second paragraph.

• Anchor points: ugh, mostly nasty examples that show why this is something easy to do that produces tolerable results, but it’s normally a long way off the best that you could produce if you just ignored the “rule”. But instead of trying to teach to produce excellent results, you can legitimately try to teach not to produce bad results. Maybe that’s the goal instead? Anchoring is perhaps a little more dependable than freeforming it if you don’t know what you’re doing. But it’s no panacea or even always usable.

• Lines of force: look, most of those examples only need them to claw back some semblance of reason since they made a chaotic layout. And as for that numbered thing… I don’t find it “compelling” and would like it to remain “unusual”.

• Rhythm and variety: what’s suggested at the start is very risky. Monotonous is reliable. Monotonous works. Users understand monotonous. I also want to draw attention to some broken rhythm and painful variety on the page itself: from the paragraph beginning “Generally” to the paragraph beginning “Just” is a mess, with inconsistent spacing and unclear grouping. It’s bad on small and large viewports, in two different ways. Some background shading on the figures would help a lot (one of many possible solutions).

• Modular scales (sizing text based on geometric sequences): oh no. This is just plain bunk, genuinely having no redeeming features and just being arbitrary mediocrity at best. I expanded on this at length six months ago in https://news.ycombinator.com/item?id=36000879 and the following comments. I will also rail against this page’s suggested applications of sizes: do not go below 16px as much as it suggests doing, and never go below 12px. Buttons? 16px. Form labels? 16px. Small text? Avoid it, but I will begrudgingly allow 14px in very specific, very restricted situations. Tags, labels, badges, statuses? C’mon, 14px is probably just fine for you.

• Vertical rhythm: I was going to say “oh no” again, because for general web content rhythm is not only roughly impossible to get strictly correct and has no demonstrated value, but even though that’s what the term means, that’s not what the article is about. It shows a dodgy example of an overcomplicated baseline grid, then goes to talking about sizing gaps as multiples of some scale, and thinking a little about hierarchy in the values you choose. So instead I’ll say “oh no” about misuse of a well-known term.

I’ve spent long enough on it for now. I really should get round to finishing off a new section for my website where I go through these sorts of reviews in more detail, rather than tending to publish them just on HN.

—⁂—

Let me add one useful user interface design guideline: the document title should have the most specific piece at the start, not the end. This site currently has its endianness the wrong way round.

BAD: UI Typography | Principles | Responsive typography
GOOD: Responsive typography | Principles | UI Typography

(You could also drop the middle hunk likely with no ill effects, and I’d suggest -, – or — instead of | as a divider these days. | fell out of fashion over a decade ago.)