What Is Fitts's Law?
In 1954, psychologist Paul Fitts modelled the time it takes to move a pointer, or a finger, to a target: T = a + b × log₂(2D/W), where D is the distance to the target and W is the target's width. The practical reading is simple: targets that are larger and closer are faster and easier to hit.
"The time to acquire a target is a function of the distance to and size of the target." - Laws of UX
Why It Still Matters
Fitts derived the model from physical pointing tasks, but it maps almost exactly onto touch screens, where fingertip imprecision amplifies every sizing mistake. On a 390px-wide phone screen, the gap between a 32px and a 48px button is the gap between a clean tap and a mis-tap that lands on the wrong row.
Touch Target Sizing: What the Guidelines Actually Say
The numbers get repeated so often that the source is worth being precise about - they aren't interchangeable, and they aren't all mandatory.
- Apple Human Interface Guidelines: a minimum 44×44pt hit target for every interactive control, sized to match an average fingertip.
- Google Material Design: a minimum 48×48dp target - roughly 9mm regardless of screen density - because Google's own accessibility guidance argues for erring toward a larger spectrum of users.
- WCAG 2.2, Success Criterion 2.5.8 (Target Size - Minimum, Level AA): the actual compliance floor. Targets must be at least 24×24 CSS pixels, with defined exceptions for inline text links and equivalent controls placed elsewhere on the page.
- WCAG 2.2, Success Criterion 2.5.5 (Target Size - Enhanced, Level AAA): a stricter, optional bar of 44×44 CSS pixels - the number most design systems actually design toward, even though it isn't the AA requirement.
In practice: 24×24px is the legal minimum you need to clear for AA compliance. 44×44px (Apple, WCAG AAA) or 48×48px (Material) is what you should actually design toward for anything a user has to hit reliably, especially on mobile. The visual size of a control can stay smaller than its tap target - pad the hit area invisibly around a small icon rather than inflating the artwork.
The Corner and Edge Advantage
Screen corners behave like infinite targets: a cursor or finger moving toward a corner can't overshoot past the edge of the screen. That's why macOS anchors the Apple menu at the top-left and the Dock along the bottom edge. Edges are similarly forgiving along one axis. Put your most frequent actions at edges or corners wherever the interaction model allows it.
Practical Applications
- Primary CTAs: make them wide - full-bleed on mobile - rather than small and centred.
- Navigation bars: a bottom nav bar sits inside a thumb's natural reach on mobile; a top nav bar forces a stretch.
- Destructive actions: keep "Delete" small and physically distant from the primary action - Fitts's Law doubling as a safety mechanism.
- Form fields: tall inputs (48px or more) cut missed taps and improve mobile completion.
Key Takeaways
- Target acquisition time is a function of distance and size - closer and larger always wins.
- 24×24 CSS pixels is the WCAG 2.2 AA minimum; 44×44 (Apple, WCAG AAA) or 48×48 (Material) is the practical target for anything important.
- Screen corners and edges are effectively infinite targets - reserve them for primary actions.
- Grow the tap target with invisible padding instead of inflating the visible control.
