--- title: What Spacing Rules Create Better Mobile App Layouts? description: Mobile app spacing guidelines shape how layouts feel, guide touch targets and build user trust across iOS and Android. image: https://weareaffective.com/hubfs/learning-centre-images/what-spacing-rules-create-better-mobile-app-layouts.webp --- [Skip to content](https://weareaffective.com/learning-centre/what-spacing-rules-create-better-mobile-app-layouts#main-content) [![we\_are\_affective\_logo\_200](https://weareaffective.com/hs-fs/hubfs/we_are_affective_logo_200.png?width=175&height=48&name=we_are_affective_logo_200.png "we_are_affective_logo_200")](https://weareaffective.com) - [Home](https://weareaffective.com) - About Us - [Our Story](https://weareaffective.com/about) - [How We Work](https://weareaffective.com/how-we-work) - Our Services - [App Planning & Strategy](https://weareaffective.com/app-planning-strategy) - [App Design](https://weareaffective.com/app-design-agency) - [App UX Design](https://weareaffective.com/app-ux-design) - [App UI Design](https://weareaffective.com/app-ui-design) - [App Technical Architecture](https://weareaffective.com/app-architecture) - [Existing App Audits](https://weareaffective.com/app-audit) - [Case Studies](https://weareaffective.com/case-studies) - [Pricing](https://weareaffective.com/pricing) - [Learning Centre](https://weareaffective.com/learning-centre) - [Get Started](https://weareaffective.com/get-started) Expert Guide Series # What Spacing Rules Create Better Mobile App Layouts? Table of Contents Two app screens can carry the same words, the same buttons and the same photographs, and one of them will feel calm while the other feels like hard work. The gaps are doing that. Sensible [mobile app spacing guidelines decide](https://weareaffective.com/app-ui-design) how fast someone reads a screen, how sure they feel about pressing a button, and whether the product earns a second visit. Spacing usually gets handled last, by whoever is closest to the deadline, with values picked by eye and nudged until a screen looks balanced in a design file on a large monitor. > Spacing is the first thing people read, long before they read a single word. Then it ships to a phone held in one hand on a train, and the balance goes. Labels drift away from the thing they label. Two unrelated blocks sit the same distance apart as two related ones, so the user has to work out the grouping themselves. That work is small, and it happens on every screen, and it adds up into a feeling people describe as the app being annoying without being able to say why. This piece sets out the rules we use, the reasoning behind them, and the places where rules bend because of what the user is feeling at that moment. Spacing is a psychological tool as much as a visual one. ## The Base Unit: Why 4px and 8px Grids Work Pick one small number and build everything from multiples of it. That's the whole idea. Most teams land on 4 as the smallest step and 8 as the step they reach for most, so the usable values become 4, 8, 12, 16, 24, 32, 48 and 64. Nothing in between. No 13, no 22, no "that looks about right". Two things make this work. The first is practical, because screen densities multiply those values cleanly and nothing lands on a half pixel and blurs. The second is human. A designer who has eight legal values makes a decision in a second, and a developer reading the design knows the answer before measuring. App layout spacing stops being a negotiation and becomes a lookup. #### Four for detail, eight for layout Inside a component, 4 is the useful step. The gap between an icon and its label, or between a price and the small grey line underneath it, is fine at 4 or 8. Between components and between sections, work in 8s and jump in bigger increments, because small differences there read as mistakes rather than decisions. The grid isn't there to make screens look mathematical. It's there so the differences a user notices are the ones you meant them to notice, and every other gap sits quietly in the background doing its job. ## Margins, Gutters and Safe Areas on Small Screens The outer margin is the strip of empty space down the left and right of every screen, and it sets the tone for everything inside it. Go too tight and the content feels pressed against the glass. Go too wide and a phone-sized column of text turns into a narrow ribbon with four words a line. #### Mobile app spacing guidelines for margins The standard margin for mobile UI sits at 16 points, and 20 or 24 works well for calmer, reading-heavy products where the content wants air. The number matters less than holding it steady. One margin across the whole app means every screen feels like the same app, and the eye stops re-calibrating each time something loads. Set the outer margin once as a single value in code, then build every screen against it. Teams that re-type 16 on each screen end up with a 12 and a 20 somewhere, and nobody finds them until a user does. Gutters are the gaps between columns in a grid of cards or products, and 8 or 16 covers nearly everything. Safe areas are separate and non-negotiable. The notch, the camera cutout, the rounded corners and the home indicator all claim space, and a sticky button sitting flush against the bottom gesture bar gets mis-tapped constantly. Clear the safe area, then add a real gap on top of it. ## UX/UI design built around *real* psychology We design app interfaces around how people actually think and behave. User research, psychology-driven UX/UI design and technical specs delivered as one complete package. [See how we work](https://weareaffective.com/how-we-work) [Get started](https://weareaffective.com/get-started) No commitment ## Proximity: How Gaps Tell Users What Belongs Together People group things by distance before they group them by anything else. Put two items close together and they read as one unit. Push them apart and they become two separate things with no relationship. This happens instantly and below conscious thought, which is why a wrong gap is so hard to argue with. The common failure is a label with more space below it than above it, so it visually attaches itself to the wrong field. A user fills in their delivery date in the box meant for their birthday, corrects it, and quietly loses a bit of faith in the form. Nobody reports that as a bug. > A gap of eight pixels and a gap of thirty-two are telling the user two different things, whether you meant them to or not. The fix is to work in three tiers and keep them far enough apart to be obvious. Inside a unit, use your smallest step. Between units in the same group, use roughly double. Between whole sections, use double again. If a designer has to squint to tell two tiers apart, the user has no chance. Dividing lines get used to patch this, and mostly they're covering for spacing that was never resolved. Set the gaps correctly first, then see whether the lines are still doing anything. Usually a chunk of them can go, and the screen gets quieter without losing any structure. ## Spacing as Hierarchy: Making the Next Action Obvious Every screen in a product has one thing the user is most likely to want next. Space is how you say so without shouting. An element with generous empty room around it reads as more important than an identical element crammed between its neighbours, even when the two are the same size and colour. This is useful because the alternatives are louder. Making the primary button bigger and brighter than everything else works, and it also makes the screen feel like it's selling. Isolating that button with space achieves the same pull and keeps the tone calm, which matters a great deal for [beauty, wellness and hospitality products](https://weareaffective.com/learning-centre/what-the-first-thirty-seconds-of-a-hospitality-app-teach-us-about-the-three-laye) where the brand is built on feeling unhurried. #### Give the main action room A practical rule is that the gap above a primary action should be the largest vertical gap on the screen. Everything above it reads as context, and the button reads as the conclusion. Secondary actions sit closer to the content they relate to, or further down with less room around them, and the ranking becomes readable in a glance. The same logic runs in reverse. Where a screen has a destructive option, like deleting an order history or cancelling a subscription, pushing it away from everything else with real space slows the hand down. Hierarchy through spacing works in both directions, and the second direction gets forgotten. ## Touch Targets and the Space Between Them A finger pad covers a lot more of the screen than the little dot people imagine, and the person tapping can't see what's underneath their thumb. Platform conventions land at roughly 44 points square on iOS and 48 density-independent pixels on Android, and that's a floor rather than a target. The size of the target is half the problem. The gap between targets is the other half, and it's the half that gets skipped. Two buttons that each meet the minimum but sit flush against each other will produce mis-taps, because the boundary between them is invisible to a thumb. Eight points of clear space between adjacent controls removes most of that, and more is better near anything with consequences. Test the bottom corners of the screen with the hand you actually hold your phone in. Thumb reach drops off sharply at the top of a tall device, so a frequently used control up there is a control people press with two hands or stop pressing. Icon-only buttons are the usual offender. A 24 point icon looks right in the design, and the tappable region ends up 24 points too, so the user taps three times before it registers. Keep the icon small and the hit area large. The visual weight and the touch area are separate decisions, and a tap area can extend invisibly past the thing you can see. ## Line Height, Paragraphs and Reading Rhythm Text on a phone is read fast, in bad light, while something else is happening. Line height carries more of that than font size does. Set the leading at around 1.4 to 1.5 times the font size for body copy and the eye tracks from the end of one line to the start of the next without losing its place. Headings want tighter leading, closer to 1.2, because a two-line heading with body-copy leading breaks into two unrelated statements. Small print wants looser leading, because people read it slowly and reluctantly, and cramped terms copy is the fastest way to make someone suspicious of what they're agreeing to. #### Space between paragraphs The gap between paragraphs has to beat the gap between lines clearly. Something near 16 points under a paragraph of 16 point text gives a clean break. Where that gap is too small, paragraphs merge into a wall and people skim instead of reading, which matters for supplement ingredient lists, skincare usage instructions and anything explaining what a product does to a body. Line length counts too. A phone column at a 16 point margin gives a comfortable measure for body copy at normal sizes. Push the font much smaller to fit more in and you get long lines, small letters and a paragraph nobody finishes. ## Spacing Decisions That Build or Break Trust Crowding reads as hiding. When a screen packs information tightly, with small type and thin gaps, people assume something in there is being slipped past them, and that assumption forms before they've read a word of it. The reverse holds as well, where information given room feels like information being offered rather than disclosed. > Tight, crowded screens make people suspect something is hidden, even when nothing is. We worked on a [travel booking product where we](https://weareaffective.com/learning-centre/what-legal-issues-should-i-consider-when-building-a-travel-booking-app) initially wrapped the platform's Stripe booking fee into one total price, on the reasoning that travellers want a single clean number. What we found was the opposite. Users expected to see a platform fee as its own line, because that matches how they understand apps and platforms to work, and by folding it in we created a fear that a hidden charge was waiting further down the booking. So we broke every fee out as a separate line, each with enough space around it to be read on its own. Users were seeing more information and more rows, and their confidence went up. Showing more gave them more trust, and the spacing was what made the longer breakdown feel like openness rather than clutter. That's the test worth applying at any screen asking something of a user, whether it's a payment, an address book, a photo library or a set of terms. Where the stakes rise, the spacing opens. ## Deciding What Earns a Place on the Screen Space on a phone is the scarcest thing you have, so treat it as a budget. Every element on a screen is spending some of it, and the question for each one is what the user gets back for that spend. Elements that survive this get room to breathe. Elements that don't survive it come off, which is the only reliable way to create space. Go through a screen item by item and ask what someone is doing at that moment, what state they're in, and whether this particular piece of information helps them do the thing or only adds complexity. A surprising amount of what sits on a first screen belongs three steps later, at the point where the user has a reason to care about it. #### Move it rather than shrink it The instinct when a screen is full is to shrink everything by two points and tighten the gaps. That buys a little room and costs a lot of comprehension. Moving a block to a later point in the journey buys far more and costs nothing, because the content still exists where it's relevant. Before adding anything to a busy screen, name what comes off to make space for it. Screens only ever grow when nobody is required to answer that question. Doing a small number of things properly beats cramming more in at lower quality, and spacing is where that choice becomes visible. ## Adjusting Density for the User's Emotional State The right density for a screen depends on what the person is feeling when they arrive at it. Someone browsing a fashion app on a Sunday afternoon handles a dense grid of products happily, because they're relaxed and they want range. Someone checking a health result, [chasing a late delivery or](https://weareaffective.com/learning-centre/the-hidden-complexity-of-delivery-apps-what-every-business-owner-should-know) cancelling a hotel booking is in a different state entirely, and the same density now reads as noise. For anxious or stressed moments, strip the screen back and give the few remaining things real room. Fewer items, bigger gaps, one clear action. The aim is to bring the stress level down through simplification and plain explanation, so the person can take in what's in front of them. Once that drops, they become far more receptive to detail, and that's the moment to introduce it. Gamified elements follow the same logic. For someone confident and engaged, showing a run of upcoming rewards and what's ahead works well. For someone anxious, keep the visible scope small and show only the next achievable step, because a long ladder of unreached milestones reads as a list of failures. None of this is a single global setting. A fitness app can run dense browse screens and sparse result screens in the same product, as long as the density follows the emotional state rather than a house style applied evenly to every screen. ## When Spacing Contradicts the Brand Promise Spacing carries brand as plainly as colour does. Wide margins and slow, generous vertical rhythm say considered and premium. Tight margins and dense rows say utility, speed, volume. A brand that spends its marketing budget on one of those and ships the other has a problem at the exact moment it matters most. We worked on a mobile app in the [health and wellness genetics sector](https://weareaffective.com/learning-centre/how-to-spot-the-boundary-where-your-brand-experience-quietly-ends) where that gap was wide open. The packaging and the online presence were luxurious and aspirational, all about transformation and becoming a better version of yourself and reaching your full potential. The app itself was cold and clinical, purely functional in its copy and its layout. Think about the journey that creates. Someone buys into the aspirational marketing, orders a kit, takes a test, waits, then opens the app to see their results and lands in something that feels like a lab report. The [experience broke down entirely at the product touchpoint](https://weareaffective.com/learning-centre/how-to-map-the-emotional-journey-from-first-purchase-to-reorder-and-where-most-l), which was the one touchpoint the whole purchase had been building towards. #### Match the rhythm to the promise The repair work is rarely a rebuild. Opening the vertical rhythm, letting result cards sit alone with room around them, and slowing the pace of the screens brings the product back in line with what the brand said it was. Same information, same features, different feeling. ## iOS and Android: Where the Rules Diverge The underlying maths holds across both platforms, because a 4 and 8 step scale works everywhere. What differs is the conventions users have absorbed from everything else on their phone, and those conventions are strong enough that breaking them makes a product feel slightly foreign without anyone being able to say why. > Shipping one identical layout to both platforms means one set of users gets a slightly foreign app. The practical differences are small in number and easy to hold in your head. | Decision | iOS convention | Android convention | | --- | --- | --- | | Unit | Points, 4 and 8 steps | Density-independent pixels, 4 and 8 steps | | Edge margin | 16 to 20pt | 16dp | | Minimum target | Around 44pt square | Around 48dp square | | Bottom clearance | Home indicator strip | Gesture bar or three buttons | | List rows | Inset groups with separators | Full-width rows, taller padding | Android devices also vary far more in screen size and aspect ratio, so a layout that depends on a fixed vertical gap holding its place will break on something. Build the spacing so content flows and the gaps hold their relationships, then check the extremes at both ends of the size range. Teams working to one shared design system handle this by keeping the scale identical and letting a handful of tokens resolve differently per platform. The maths stays in one place and the native feel survives. ## Building a Spacing Scale Your Developers Will Actually Use A scale only works if the people building the product reach for it faster than they reach for a number off the top of their head. That means it has to be short, named clearly, and present in the code rather than living in a PDF somewhere. 1. Pick the base unit, almost always 4, and write down the full set of legal values. 2. Name each step plainly, so space-2 means 8 and everyone knows it. 3. Assign jobs to the steps, so the team knows which one sits inside components and which separates sections. 4. Build the tokens into the codebase before the first screen is built, not after. 5. Remove raw numbers from the components during review, every time, with no exceptions for one-offs. Seven or eight steps covers an entire product. Where a team ends up with fifteen, the scale has stopped making decisions and started recording them, and designers go back to eyeballing because the lookup is slower than guessing. The exceptions are what kill it. One hard-coded 18 in a hero component gets copied into the next component by someone in a hurry, and six months later the app has forty spacing values and no scale. Hold the line early and the rule enforces itself, because by then the odd number looks wrong to everybody. ## Common Spacing Mistakes and How to Spot Them Most spacing problems show up in the same handful of shapes, and they're easy to find once you know what you're looking at. Scroll through the app slowly with the sound off and watch for these. - Equal gaps everywhere, so nothing groups and the screen reads as one long list. - Labels closer to the field below them than the field above them. - A sticky button pressed against the bottom gesture bar with no clearance. - Generous spacing on the marketing-led screens and cramped spacing on the functional ones. - Padding applied to one side of a card and forgotten on the other. The fourth one deserves attention, because it's a symptom of where the effort went rather than a mistake anybody made on purpose. On a dating app project, heavy work went into onboarding, verification and validation, and the messaging side went through none of that discovery. It got built generically, and it allowed exactly the behaviour the onboarding had been designed to prevent. Spacing fragments the same way. Whichever part of the product got the attention looks considered, the rest looks thrown together, and users read the difference as the company caring about some of their experience and not the rest. ## Testing Spacing on Real Devices and in Real Data Design files lie about spacing, because a screen at 100% on a desktop monitor is physically much larger than the same screen in a hand. Put builds on real hardware early, including a small older phone and a large current one, and look at them at arm's length in daylight. Then turn on the largest system text size. Dynamic type and Android font scaling push text up considerably, and fixed-height rows with tight padding crop their own labels. Products that only get checked at default text size break for every user who has increased theirs, which is a group that grows with the age of your customer base. Record a short video of someone using the app one-handed on their own phone. Mis-taps, re-taps and hesitation at a particular row show up in seconds and never show up in a design review. In the data, go past funnel completion and track time on screen, people entering a screen and coming back to it repeatedly, and repeated up-and-down scrolling through a block of content. Those patterns point at either a lack of comprehension or a lack of trust, and both of them have spacing causes worth ruling out. Playing a revised screen back to the client and asking how it feels to them is a reasonable check too, because everybody in the room uses apps all day. ## Conclusion Spacing rules on mobile come down to a small set of decisions made once and then held. Pick a base unit of 4, work mostly in 8s, set one outer margin and keep it across every screen, respect the safe areas with real clearance on top of them, and use three clearly different gap sizes so proximity does the grouping work for you. Give touch targets room between them as well as size. Set line height for reading rather than for how the paragraph looks as a block. Underneath the numbers sits the part that matters more. Space is how a screen tells someone what belongs together, what to do next, and whether anything is being kept from them. A crowded payment screen reads as evasive. An open one reads as honest, which is why breaking out every fee on that travel product raised confidence instead of lowering it. So the useful habit is to treat each gap as a decision with a reason behind it, and to let the user's state at that moment set the density. If you're working through app layout spacing on a product right now and the screens feel busier than the brand promises, [let's talk about your app's spacing and layout](https://weareaffective.com/get-started). ## Frequently Asked Questions Why use a 4px or 8px base unit instead of just eyeballing the spacing? A fixed base unit gives you a short list of legal values, typically 4, 8, 12, 16, 24, 32, 48 and 64, so decisions take a second rather than a debate. It also means screen densities multiply the values cleanly, so nothing lands on a half pixel and blurs on a real device. When should I use 4px and when should I use 8px? Use 4 for detail inside a component, such as the gap between an icon and its label or a price and the small grey line beneath it. Use 8 and larger jumps between components and sections, because small differences at that scale read as mistakes rather than deliberate choices. What is the right outer margin for a mobile screen? 16 points is the standard, and 20 or 24 suits calmer, reading-heavy products where the content wants more air. The exact number matters less than keeping it consistent, because one margin across the whole app stops the eye re-calibrating on every screen load. How do I stop inconsistent margins creeping into the build? Set the outer margin once as a single value in code and build every screen against that token. Teams that re-type 16 on each screen almost always end up with a stray 12 or 20 somewhere, and it is usually a user who finds it first. What gutter width should I use between cards or product tiles? 8 or 16 covers nearly every case for the gaps between columns in a grid. Pick one, hold it steady across the app, and let the card content rather than the gutter do the visual work. Why do safe areas matter so much on modern phones? The notch, camera cutout, rounded corners and home indicator all claim space that your layout cannot use. A sticky button sitting flush against the bottom gesture bar invites mis-taps, so respect the safe area insets rather than treating them as optional padding. How does spacing actually affect how people read a screen? Spacing signals grouping before anyone reads a word, so a label sitting close to its control reads as belonging to it. If two unrelated blocks sit the same distance apart as two related ones, the user has to work out the grouping themselves, and that small effort repeats on every screen. Why does an app feel annoying when nobody can point to what is wrong? It is usually the accumulation of tiny spacing decisions that force the user to do extra interpretive work. Each instance is too small to name, but across a whole session it adds up into a sense that the product is harder than it should be. Do spacing rules ever need to be broken? Yes, rules bend when the user's emotional state at that moment calls for it, such as giving a destructive action extra breathing room or tightening a dense data view. Treat the grid as the default and any exception as a conscious, documented decision rather than a one-off nudge. ## Related Articles [![How do you fix common App Store rejection problems?](https://weareaffective.com/hubfs/learning-centre-images/how-do-you-fix-common-app-store-rejection-problems.webp)](https://weareaffective.com/learning-centre/how-do-you-fix-common-app-store-rejection-problems) ### [How do you fix common App Store rejection problems?](https://weareaffective.com/learning-centre/how-do-you-fix-common-app-store-rejection-problems) App store rejections hit differently when you've spent months building something. The rejection... by [Simon Lee](https://weareaffective.com/learning-centre/author/simon-lee) [![What Legal Requirements Must My App Meet to Launch in Europe?](https://weareaffective.com/hubfs/learning-centre-images/what-legal-requirements-must-my-app-meet-to-launch-in-europe.webp)](https://weareaffective.com/learning-centre/what-legal-requirements-must-my-app-meet-to-launch-in-europe) ### [What Legal Requirements Must My App Meet to Launch in Europe?](https://weareaffective.com/learning-centre/what-legal-requirements-must-my-app-meet-to-launch-in-europe) We worked on a currency exchange app that let travellers swap leftover foreign notes with each... by [Simon Lee](https://weareaffective.com/learning-centre/author/simon-lee) [![How Do I Design Apps That Kids Can Use Safely?](https://weareaffective.com/hubfs/learning-centre-images/how-do-i-design-apps-that-kids-can-use-safely.webp)](https://weareaffective.com/learning-centre/how-do-i-design-apps-that-kids-can-use-safely) ### [How Do I Design Apps That Kids Can Use Safely?](https://weareaffective.com/learning-centre/how-do-i-design-apps-that-kids-can-use-safely) A child of six doesn't read onboarding copy. They tap the biggest, brightest thing on the screen... by [Simon Lee](https://weareaffective.com/learning-centre/author/simon-lee) [![We Are Affective](https://weareaffective.com/hubfs/we_are_affective_logo_mark.svg)](https://weareaffective.com) 20-22 Wenlock Road London, N1 7GU United Kingdom +44 20 4572 8062 [hello@weareaffective.com](mailto:hello@weareaffective.com) Services [App planning & strategy](https://weareaffective.com/app-planning-strategy) [App design](https://weareaffective.com/app-design-agency) [App UX design](https://weareaffective.com/app-ux-design) [App UI design](https://weareaffective.com/app-ui-design) [App technical architecture](https://weareaffective.com/app-architecture) [Existing app audits](https://weareaffective.com/app-audit) Legal [Privacy policy](https://app.termly.io/policy-viewer/policy.html?policyUUID=b8fa9921-7518-4fb5-8ddd-9dc7f5977ed2) [Terms](https://app.termly.io/policy-viewer/policy.html?policyUUID=8b6a6ad5-91bd-4176-a5f7-6d36b0398f70) Case studies [TravAI](https://weareaffective.com/case-studies/travai) [Meditech](https://weareaffective.com/case-studies/harley) [WorkingWeight](https://weareaffective.com/case-studies/workingweight) [SkinSync](https://weareaffective.com/case-studies/skinsync) [Three Lochs](https://weareaffective.com/case-studies/three-lochs) [Drift](https://weareaffective.com/case-studies/drift) About us [Our Story](https://weareaffective.com/about) [How We Work](https://weareaffective.com/how-we-work) Guides [Creating an app](https://weareaffective.com/how-to-create-an-app) [Building an MVP](https://weareaffective.com/building-an-mvp) [Cost and budgeting](https://weareaffective.com/app-development-cost) [App technology](https://weareaffective.com/app-development) [Planning and strategy](https://weareaffective.com/app-planning-strategy) [User research](https://weareaffective.com/app-user-research) [Onboarding design](https://weareaffective.com/app-onboarding-design) [User psychology](https://weareaffective.com/user-psychology-app-design) [Launch and growth](https://weareaffective.com/app-launch-growth) Copyright © 2026, weareaffective.com. All rights reserved.