Made with 🧠 and πŸ«€ by Youssef Bouksim

Back to library
πŸ“

Weber's Law

The smallest change a person can perceive is always proportional to what they are already experiencing β€” not fixed. A 1kg change is obvious when you're holding 2kg and invisible when you're holding 50kg. In design: the same absolute change in type size, spacing, or price produces completely different felt effects depending on the starting point.

5 min readTypography Β· Spacing Β· Pricing

In 1834, German anatomist Ernst Heinrich Weber discovered that the threshold for detecting a difference between two stimuli is not a fixed quantity β€” it is a ratio. He was studying weights: what is the smallest difference between two objects that a person can reliably feel? His answer was not β€œ1 gram” or β€œ5 grams.” It was approximately 1/40th of the original weight. Holding 40g, you can just detect 1g of difference. Holding 400g, you need 10g of difference to notice the same change. The ratio stays constant. The absolute number scales with the stimulus.

Gustav Fechner formalised this into Weber's Law: the just noticeable difference (JND) equals a constant fraction of the original intensity. For visual stimuli β€” size, brightness, spacing β€” the JND is typically somewhere between 10% and 30%. Below that threshold, changes exist but are not perceived. Above it, they register as intentional and meaningful.

The design implication is direct and frequently violated. A 2px size increase on a 12px label is a 17% change β€” perceivable. The same 2px increase on a 48px heading is a 4% change β€” invisible. A $20 discount on a $49 plan is 41% β€” felt as a real deal. The same $20 on a $399 plan is 5% β€” below the threshold of felt significance.

✦ Key takeaways
βœ“
The JND for visual design is approximately 10–30%. A font size step of less than 20% rarely registers as a distinct level of hierarchy β€” it looks like an inconsistency rather than a decision. These thresholds give you a practical floor below which design effort is perceptually wasted.
βœ“
Proportional systems automatically satisfy Weber's Law. A type scale based on a fixed ratio (Γ—1.25, Γ—1.333, Γ—1.5) produces steps that are perceivably equal across the entire range. A linear scale (+4px per level) produces steps that are enormous at small sizes and invisible at large ones.
βœ“
Context resets the baseline for every perception. Users perceive price, size, and value relative to what they have just seen β€” not relative to some absolute standard. A $99/month plan feels expensive in isolation and cheap next to a $499/month plan on the same page.
β€œThe threshold for noticing a change is not a fixed amount β€” it is a fixed fraction of what already exists.”

Type hierarchy

The most common violation of Weber's Law in product design is a type scale where the size differences between heading levels are below the JND. On paper β€” or in Figma at 100% zoom β€” a move from 20px to 24px looks meaningful. In a browser, at normal reading distance, it reads as an inconsistency rather than deliberate hierarchy.

Before β€” Linear steps (14-32px)
Product changelog
Version 3.4
New features
Improved dashboard
Real-time metrics
The new metrics panel updates every 30 seconds without requiring a page refresh.

Gaps between H2 (26px) and H3 (22px) and H4 (18px) are 15-18%. Below the JND at these sizes. Four levels that look almost the same.

After β€” Proportional Γ—1.33 (13-41px)
Product changelog
Version 3.4
New features
Improved dashboard
Real-time metrics
The new metrics panel updates every 30 seconds without requiring a page refresh.

Every step is 33% larger. H2 (31px) vs H3 (23px) vs H4 (17px) β€” each jump is clearly perceivable at any screen size.

The proportional scale looks more extreme β€” particularly the large 41px display size. That is exactly the point. Weber's Law requires the top of the scale to be significantly larger than designers trained on linear systems expect, because the eye needs a proportionally large difference to register a level of hierarchy as distinct.


Spacing

Spacing is where Weber's Law fails most silently. A designer carefully specifies 8px, 12px, and 16px spacing for different levels of visual hierarchy in a component β€” and in the browser, users perceive three identical gaps. The 4px differences are below the JND for spacing at these values.

Before β€” Linear spacing (8/12/16px)
Mia Santos
Product Designer
2h ago
Redesigned the onboarding flow
Reduced the signup form from 9 fields to 3.
143

Header padding (12px) vs body (12px) vs footer (8px). The 4px difference is below the JND. All three sections feel equally weighted.

After β€” Proportional spacing (8/16/24px)
Mia Santos
Product Designer
2h ago
Redesigned the onboarding flow
Reduced the signup form from 9 fields to 3. First session completion rate up 34%.
143Review

Header (10px), body (20px), footer (8px). Each zone is perceivably different β€” the content area has breathing room the eye registers as primary.


Pricing

Price perception follows Weber's Law precisely. A $20 discount on a $49 product is a 41% saving β€” strongly felt. The same $20 on a $399 product is 5% β€” below most users' threshold of significance. Anchoring a high-price tier next to a target tier exploits the proportional nature of value perception: the Enterprise plan's job is often perception, not conversion.

Before β€” No anchor
Pro Plan
$49
per month
Unlimited projects, team features, analytics dashboard, priority support

$49/mo feels expensive in isolation. No reference point.

After β€” High anchor present
Enterprise
$199
per month
SSO, SLA, dedicated support
Most popular
Pro
$49
per month
Everything you need

$49/mo looks proportionally affordable next to $199/mo. Same plan, different felt value.


Applying this to your work

Weber's Law is not a design heuristic β€” it is a psychophysical constant. The JND for visual design is approximately 10–30% depending on the dimension. Any intentional difference below that threshold is perceptually wasted. Any unintentional difference above it looks like a mistake. The law gives designers a precise tool for auditing their own decisions: check every delta as a percentage.

βœ“ Apply it like this
β†’Use a modular type scale (x1.25 minimum, x1.5 for strong hierarchy) -- every level will be clearly distinct at every size.
β†’Use a doubling or 1.5x spacing scale -- 4, 8, 16, 32px. Each step is 100% or 50% larger than the last.
β†’Place a high-anchor price tier before your target tier -- the Enterprise plan makes the middle plan feel proportionally affordable.
β†’Check every intentional difference as a percentage before shipping -- if below ~15%, ask whether the distinction needs to exist.
βœ— Common mistakes
β†’Type scales with steps under 20% -- 'H1 at 32px, H2 at 28px, H3 at 24px' looks like the same size in production.
β†’Spacing systems where adjacent values differ by 4px at larger sizes -- 48px vs 52px is 8%, below the JND.
β†’Discounts below 10% of the price surfaced as promotional copy -- users do not feel the difference.
β†’Button hover states with changes too subtle to register -- a 3% brightness shift or 1px border change is below the JND.

Weber, E. H. (1834). De Pulsu, Resorptione, Auditu et Tactu. Leipzig: Koehler. Fechner, G. T. (1860). Elemente der Psychophysik. Stevens, S. S. (1957). On the psychophysical law. Psychological Review, 64(3), 153-181.