Good mobile UI design is not a shrunken version of a desktop layout; it is an experience used with a finger, held one-handed in a distracting environment, and read in changing light. Users often look at the screen while walking, in bright sun, or with only half their attention. That is why mobile design that actually works rests on three foundations: touch targets that are large enough, navigation the thumb can reach comfortably, and typography that stays readable on a small screen. This article covers those three principles with concrete numbers and practical rules.
Touch target size and spacing
A fingertip is a far coarser pointer than a mouse. An adult finger's contact area is roughly 8–10 mm across, so tiny buttons cause constant mis-taps. The platform guidelines give clear recommendations:
- Apple Human Interface Guidelines: tappable targets should be at least
44×44 pt. - Google Material Design: at least
48×48 dp, with at least 8 dp of spacing between targets. - WCAG 2.2 (2.5.8): a minimum target size of 24×24 CSS pixels — but that is an absolute floor, not comfort.
Even if the visible icon is small, you can enlarge the hit area. On the web you do this with padding or an invisible expansion zone:
.icon-button {
min-width: 48px;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
}Spacing between targets matters as much as their size. If you cram two buttons side by side, the user will hit the wrong one even when each is correctly sized. Keep vertical rhythm in list rows and form fields.
The thumb zone and navigation
Most people use their phone one-handed, with the thumb. The bottom-center of the screen is the easiest area to reach, while the top corners — especially on large phones — are hard for the thumb. That is why placing primary actions at the bottom of the screen is a cornerstone of modern mobile design:
- Bottom tab bar: ideal for 3–5 main sections; always visible and thumb-reachable.
- Primary action button: keep main actions like "Send" or "Add to cart" anchored at the bottom, while destructive actions (delete) sit further away.
- Hamburger menu: fine for secondary links but low in discoverability; don't hide your core navigation inside it.
Keep frequent actions — going back, scrolling, switching tabs — where the system has trained users to expect them. Swiping from the left edge to go back on iOS and the system back gesture on Android are behaviors users know by muscle memory; don't break them.
Typography and readability
Readability on a small screen is about contrast and line length as much as font size. Practical starting values:
- Body text: at least
16px(inputs below 16px trigger unwanted zoom in iOS Safari). - Line height: 1.4–1.6 for body copy; cramped lines tire the eye on mobile.
- Line length: ideally 35–45 characters; since the column is already narrow on mobile, keep generous side margins.
- Contrast: WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text.
Respect the system's font scaling. Using scalable units and rem instead of absolute px lets the interface adapt gracefully when a user enlarges their text size:
html { font-size: 100%; } /* respect the user setting */
body { font-size: 1rem; line-height: 1.5; }
h1 { font-size: clamp(1.5rem, 5vw, 2.25rem); }Responsive layout and safe areas
Modern phones have notches, rounded corners, and a bottom gesture bar. To keep content from hiding beneath those areas, use the safe-area-inset variables:
.app-bar {
padding-top: env(safe-area-inset-top);
}
.bottom-nav {
padding-bottom: env(safe-area-inset-bottom);
}Break the layout for content, not for devices. Instead of fixed pixel grids, use flexible flexbox/grid and min()/max()/clamp(). Constrain images with max-width: 100% and optimize touch carousels for swiping.
Performance and feedback are design too
On mobile, perceived speed beats visual polish. On slow networks users abandon after a few seconds of waiting. A few practical points:
- Give every tap visible feedback — a pressed state, a small animation, or a haptic buzz.
- Skeleton screens while content loads cause less anxiety than a blank white page.
- Compress images, use
loading="lazy", and render the above-the-fold area fast. - Don't block the touch response; move heavy work off the main thread.
Design isn't done until you test
Test mobile design not just in a browser emulator but on a real device in a real hand. The emulator won't show mis-taps, one-handed reach, or contrast in sunlight. Try it with your own finger, ideally across a few screen sizes and on both iOS and Android.
Frequently Asked Questions
Exactly how many pixels is the minimum touch target?
Apple recommends 44×44 pt, Google 48×48 dp; WCAG gives 24×24 CSS pixels as an absolute floor. A safe practical rule: even if the visible icon is small, keep the hit area at least 48px and leave at least 8px of spacing between targets.
Should I use bottom navigation or a hamburger menu?
With 3–5 main sections, a bottom tab bar is more discoverable and thumb-friendly. A hamburger menu is fine for more or secondary links — but don't bury your app's core flow inside the menu.
What is the smallest font size for body text?
16px is the safe floor for body text. In iOS Safari, form inputs smaller than 16px zoom in on focus, so keep inputs at least 16px too.
Want to make your mobile interface more usable and faster? From touch targets to navigation and performance, I can overhaul your interface end to end. Get in touch and let's talk about your project.