Design social posts that read on a phone
Pick the right format, keep text out of the interface, size type for a phone held at arm's length, and design a series that holds together.
Beginner4 min readUpdated 25 September 2026Editor · Presets
On this page
Social graphics are seen for about a second, on a small screen, half covered by buttons, while the thumb keeps scrolling. Design for that and you can reuse the same idea across every platform. This article gives you the sizes, the safe zones and the text sizes that survive.
Pick the format first
| Format | Pixels | Ratio | Notes |
|---|---|---|---|
| Instagram post | 1080 × 1350 | 4:5 | Tall, so it takes more feed space than a square. A safe default. |
| Square post | 1080 × 1080 | 1:1 | Works everywhere, smaller in the feed. |
| Story or Reel cover | 1080 × 1920 | 9:16 | Full screen, heavily covered by the interface. |
| YouTube thumbnail | 1280 × 720 | 16:9 | Seen very small in lists and side panels. |
| LinkedIn banner | 1584 × 396 | 4:1 | Profile photo covers part of the lower left. |
| X header | 1500 × 500 | 3:1 | Profile photo overlaps the lower left; crops on some screens. |
Studio adds X post (1600 × 900), Facebook cover (1640 × 624), WhatsApp flyer (1080 × 1350) and Email header (1200 × 600) as job formats. Full list: Size presets. Platforms revise their sizes and crops from time to time, so check the current spec before paid or high-stakes placements.
Safe zones
Platforms draw their own interface on top of your image: profile names, captions, buttons, progress bars. Anything important under them is lost.
- Stories: Meta's guidance is to keep roughly the top and bottom 14 per cent (about 250 px on a 1920 px canvas) free of text and logos.
- Reels: the caption and buttons take more of the bottom and the right edge. Keep text in the upper-middle area and away from the right side.
- YouTube thumbnails: the video length sits in the bottom right corner. Keep faces and words out of it.
- Banners and headers: the profile photo covers part of the lower left, and different screens crop the top and bottom differently. Keep key content in the centre band.
- Profile grids show a cropped thumbnail of each post. Keep the subject away from the edges if the grid matters to you.
Text size for phones
A 1080 px wide post is shown about 360 to 430 layout pixels wide on most phones, so it is displayed at roughly a third to two-fifths of its size. Text set at 36 px on the canvas appears around 13 px on screen: caption size. Rough minimums on a 1080 px wide canvas:
| Text | Minimum on a 1080 px canvas | Appears on a phone at about |
|---|---|---|
| Headline | 80 to 120 px or more | 30 to 45 px |
| Supporting line | 48 px | 18 px |
| Small print (date, handle, URL) | 36 to 40 px | 13 to 15 px |
- Keep it to about seven words of headline. Nobody reads a paragraph in a feed.
- Use strong contrast. Phones are used outdoors and at low brightness. Aim well above 4.5:1 for anything that must be read.
- Put text on calm areas of a photo, or add a scrim: a dark gradient behind the words.
- Check it small. In the Editor, zoom out with Ctrl+- until the design is about the width of your phone on your screen and read it from arm's length. On a Mac, use Cmd.
One idea, every format
Design the most constrained format first, usually the 4:5 post, then adapt. Adapting is not stretching: a wide banner needs the elements rearranged side by side, and a Story needs them stacked with space above and below for the interface.
- Finish the master design.
- Choose File, Resize for other formats…, tick the formats you need and choose Download N as PNG for a ZIP, or Save as separate designs to fine-tune each one. Backgrounds stretch to fill; everything else keeps its place and scales to fit. Your current design is not changed.
- Open each saved version and move things out of the safe zones.
In a Studio job, the Key visual tab builds every format you owe from one master, and Layer, Formats, Update formats from master carries later changes across. See Resize to every format.
Design a series
A campaign or carousel should be recognisable from any single post. Fix a few things and vary the rest.
- Fix: grid and margins, headline position, fonts and sizes, logo position and size, the colour palette.
- Vary: the photo, the background colour within the palette, the words.
- Save one finished post as a template (File, Save as template) and start every post from it. Opening a template makes a fresh copy.
- Put brand colours and fonts in the Brand kit (Edit, Brand kit…) so they are ready in every design.
- For carousels, let one element cross the join between slides so people swipe.
Export
- Export at 1×. The presets are already at platform size.
- PNG for graphics with text and flat colour; JPG for photo-led posts. Platforms recompress uploads either way.
- Some platforms do not accept WebP uploads. Stick to PNG or JPG unless you know it is supported.