Design Basics
Safe Areas and Aspect Ratios Across Devices
Notches, Dynamic Islands, punch holes, gesture bars — every measurement you need to keep screenshot copy from being clipped on real devices.
Most clipped screenshots are caused not by sloppy design but by copy that drifts past the safe area. Every device has its own notch, Dynamic Island, punch-hole, and home indicator positions, and that means each screen has a different "free to use" region. This article consolidates the per-device numbers and the copy-placement rules that make them practical.
iPhone safe areas by display category
Safe area on iPhone depends on display size and whether the device has a notch or Dynamic Island. The four most relevant categories today look like this:
- iPhone 16 Pro / 15 Pro (6.1"): top safe area ~59pt (Dynamic Island), bottom ~34pt
- iPhone 16 Pro Max / 15 Pro Max (6.7"): top ~59pt, bottom ~34pt
- iPhone 14 / 13 (6.1", notch class): top ~47pt, bottom ~34pt
- iPhone SE (3rd gen, 4.7"): top ~20pt, bottom 0pt (home button)
Android — punch holes and system bars
Android shows much wider variance across OEMs and models. The following are safe defaults to start from:
- Pixel 8 Pro / Galaxy S24 Ultra (6.7-6.8"): top ~24-32dp, bottom gesture bar ~16-24dp
- Mid- and low-end phones: punch-hole position varies (left, center, right) — never start copy in the top 8% of the canvas
- Foldable outer displays: closer to 21:9 ratio, requires more horizontal padding
Practical rules of thumb
Memorising every per-device value is not productive. These two rules cover almost every device:
- Keep copy and important visuals at least 8% inside every edge (~100-110 px on a 1290 × 2796 canvas).
- For top copy, add another 5% to clear notches and punch-holes.
Aspect ratios that actually matter
Five aspect ratios cover almost the entire device landscape:
- 19.5 : 9 — most modern iPhones (12 through 16 series)
- 16 : 9 — most Android phones
- 4 : 3 — most iPads in landscape (3 : 4 in portrait)
- 21 : 9 — some cinema phones and foldable outer displays
- 1 : 1 — smartwatches (rarely needed for the app itself)
Driving multiple ratios from one master
To support multiple ratios from one master, design at the tallest ratio (19.5:9, 1290 × 2796) and crop top and bottom for shorter ratios after a safe-area check.
The reverse direction is dangerous. Stretching a 16:9 master into 19.5:9 leaves empty bands at top and bottom. Always work tall-to-short, never short-to-tall.
SSHOT preserves the master canvas safe area as device size changes, so copy aligned once stays inside the safe region across exports.
Safe areas are not numbers to memorise — they are a rule to encode once into your design system so it enforces itself afterwards. Honouring the simple "8% inside every edge" rule alone removes most clipping incidents across the device matrix.