The 4px rule

Brand identity project by Wolfsrudel

Continue exploring ideas in web design and beyond.

I build spacing with a 4px system because it keeps the layout clean and consistent. Margins, paddings, gaps and sizes feel more balanced when they follow one clear rhythm.

More articles

Less is more

Every design starts with addition. A headline, then a line to support it, then an icon so the line is clearer, then a border to hold the whole thing together. Each decision is defensible on its own. Together they bury the one thing the page was built to say.

Less is more is the most quoted line in design and one of the most misused. It is not an instruction to make things sparse, and it did not come from the architect it is famous for. What it actually argues is harder and more useful: every element on a page has to earn the space it occupies.

The phrase does not belong to Mies

Ludwig Mies van der Rohe gets the credit, and he earned the association. But the words appear half a century before his career, in Robert Browning’s 1855 poem Andrea del Sarto, spoken by a Renaissance painter to his wife about work that achieves more by attempting less.

The better story is how Mies heard it. According to Philip Johnson’s 1950 monograph, Mies was in his early twenties, working under Peter Behrens in Berlin on the AEG turbine factory. He showed his drawings to Behrens. Behrens looked at them and said it: less is more. It was not a manifesto. It was an older architect telling a young one that his drawing was doing too much.

That origin matters, because it reframes the phrase as feedback rather than philosophy. It was said about a specific drawing that had a specific problem. Most of the time when the line gets quoted in a meeting, that is still what it means.

Mies took it much further than Behrens intended, and the profession pushed back. Robert Venturi answered with Less is a bore, which is a fair criticism of what the idea becomes when it is applied as a style rather than a method. Both men were right about different things, and knowing that is the difference between using the principle and reciting it.

Rams made it precise

The version we actually work from is German, and it is sharper. Dieter Rams learned Weniger, aber besser from his grandfather, a carpenter, long before he ran design at Braun. Less, but better.

Weniger, aber besser.

Dieter Rams

Those two extra words fix the problem with the English version. Less is more can be satisfied by deleting things. Less, but better cannot. It requires that whatever survives the cut is improved by the space you freed. Remove four competing headlines and the survivor should get bigger, bolder, more certain. If it stays exactly the same size in a quieter room, you have not designed anything. You have only tidied up.

Rams put it into his ten principles as the last one: good design is as little design as possible. Not as little content. As little design — as few decorative decisions standing between the person and the thing they came for. Jony Ive named Rams his most important influence, and the family resemblance between the Braun T3 radio and the first iPod is not subtle.

There is a local footnote worth knowing if you work in Baden-Württemberg. The Braun design language did not appear from nowhere. It came out of a collaboration with the Hochschule für Gestaltung in Ulm, an hour and a half down the road from us, where Hans Gugelot was teaching a systematic approach to form. The most influential minimalism of the twentieth century was worked out in a state most people associate with cars and machine tools.

What the research says, and where it stops

The evidence people reach for is the jam study. In 2000, Sheena Iyengar and Mark Lepper set up a tasting table in a Californian supermarket. Some days it held six varieties, other days twenty-four. The large table drew more people — around sixty percent stopped, against forty for the small one. Then the numbers reverse. Of the people who stopped at the small table, about thirty percent bought a jar. At the large table, three percent did.

More choice attracted. More choice then paralysed. That is the finding, and it maps neatly onto a homepage with four calls to action.

Here is the part that usually gets left out of design talks. In 2010, Scheibehenne, Greifeneder and Todd pooled fifty studies of the same effect and found the average result close to zero. Choice overload is real, but it is conditional. It shows up when the options are hard to tell apart, when the decision feels consequential, and when the person choosing does not know the field well enough to have a shortcut.

We think that qualification makes the principle more useful, not less. It tells you exactly when to cut. A visitor landing on an agency site for the first time is the textbook case: the options look similar to them, choosing wrong feels expensive, and they have no expertise to fall back on. Cut hard. A returning client comparing two service packages has none of those problems. Give them the detail.

How we actually apply it

Decide what has to survive before you remove anything

Every page gets one message and one action written down before layout starts. Everything else is supporting cast, and supporting cast has to look like supporting cast. Once that single line exists, the cuts stop feeling like losses. They become obvious, because you can finally see what each element is competing with.

Delete the box before you delete the content

Borders, cards, dividers and background panels are the first things we remove, and they are almost never missed. Space separates content just as clearly and weighs nothing. A layout held together by rectangles is usually a layout whose hierarchy is not doing its job.

Three type sizes, one rhythm

Most pages need three sizes: the thing you read first, the thing you read second, and everything else. When a fourth becomes necessary, the hierarchy is unclear rather than incomplete, and adding a size will not fix it. We build spacing on a 4px system for the same reason — one rhythm, applied everywhere, removes a thousand small decisions that would otherwise each be made slightly differently.

One accent colour with one job

Our red does exactly one thing on a page. The moment it appears on a heading, a link, a border and an icon, it stops meaning anything and becomes texture. A colour used everywhere emphasises nothing. The discipline is not choosing fewer colours. It is choosing fewer jobs for each one.

Subtract from the process, not only the page

This is where the principle stops being visual. We work in fixed scope with a real deadline, and we say plainly on our own site that we are not for everyone. Both are subtraction. Unlimited revisions sound generous and produce fuzzy work, because a project with no edges has no shape to sharpen. Removing options from how we work is what makes eight days possible.

When less is genuinely worse

Any principle you cannot argue against is decoration. Here is where we do not apply this one.

Pricing pages want more detail, not less. Someone about to spend money is looking for reasons to trust the number, and a page that hides the specifics reads as evasive rather than clean. The same is true of technical specifications, delivery terms and anything a buyer will be held to later.

Filters and search want more too. A person who already knows what they want is not overwhelmed by options — they are slowed down by their absence. That is the expertise condition from the research, working in the other direction.

And empty is not the same as restrained. A stripped page can still feel cheap, and the difference is intent. Empty design has had things taken away with nothing gaining from it. Restrained design has had things taken away so that what remains can be more confident than it could otherwise have been.

The check before anything ships

  • Can someone name what this page wants after five seconds?
  • Is there exactly one element that is clearly the most important?
  • Does every remaining element change what the visitor understands or does?
  • Did the survivors get better when their neighbours were removed, or only lonelier?
  • Would removing any single item make the page worse, or just shorter?

The fourth question is the one that separates Rams from Browning, and the fifth is the one that does the work. If the honest answer is only shorter, the element was never earning its place. Removing it is not a sacrifice. It is the design getting out of its own way.

Sources: Robert Browning, Andrea del Sarto, 1855. Philip Johnson, Mies van der Rohe, 1950. Dieter Rams, Ten Principles of Good Design. Iyengar & Lepper, When Choice is Demotivating, Journal of Personality and Social Psychology, 2000. Scheibehenne, Greifeneder & Todd, Journal of Consumer Research, 2010.

Design needs structure

Creativity works better when it has a system. Grids, typography, spacing and hierarchy help every design decision feel intentional instead of random.

The 4px rule

I build spacing with a 4px system because it keeps the layout clean and consistent. Margins, paddings, gaps and sizes feel more balanced when they follow one clear rhythm.

UI/UX is not decoration

Good design is not only about making things look nice. It is about guiding people clearly, reducing friction and making every interaction feel natural.

Book a meeting

social@wrka.de

+(49) 7243 947 8999

Waldstraße 35,
76133 Karlsruhe

Hertzstraße 36,
76275 Ettlingen

Instagram

WOLFSRUDEL® is more than our name, it’s a symbol
of who we are. In nature, wolf packs move with trust, instinct, and shared purpose. Today, we create bold brands and digital experiences for clients built on strategy, character, and collective strength.