Instagram story size, safe zones and text size

The frustrating thing about designing a story is that the canvas you work on is not the canvas anyone sees. You lay out 1080 by 1920 pixels of clean rectangle, and then the app draws a profile picture, a username, a timestamp, a close button, a reply field and a share icon on top of it, and your carefully centred footer is underneath a text box.

The numbers

A story is 1080 by 1920 pixels, a 9:16 ratio. That is the working canvas here, and it is the size the platform expects.

Exports run at twice the canvas, so a story file leaves at 2160 by 3840. There is no dots-per-inch involved, because nothing is being printed. The extra pixels exist so the file still looks clean after the platform re-encodes it on upload, not because a story needs 3840 lines of detail.

The ratio is doing more work than the pixel count. Phones are not all the same shape, so the app scales your 9:16 frame to fill whichever screen it lands on. Give it the right shape and the pixel count can vary; give it the wrong shape and no pixel count saves you.

Safe zones: what sits on top of your design

Meta publishes safe zone guidance for stories in its Business Help Centre, expressed as percentages of the frame rather than pixels, and those percentages have been revised as the interface has changed. Rather than quote a number that may already be stale, it is worth being clear about what the overlay structurally is, because that part does not move:

• A strip along the top carrying the account avatar, the account name, the timestamp, the progress bars for the current set of stories, and a close or menu control.
• A deeper strip along the bottom carrying the reply field, the share and like controls, and on some story types a sticker or link chip.
• A margin down each side, narrower than the other two, where a thumb reaches for the tap-to-advance target and where a rounded screen corner cuts the frame.

The bottom strip is consistently the deepest of the three, because a text input field is taller than a title row. Check the current published percentages before you finalise a layout, then convert them to pixels against 1920 and mark them as guides on the canvas.

Where the layouts actually put their content

Here is the part nobody publishes. Every one of the 172 flyer designs is authored natively at all eight canvas sizes, so there are 172 story layouts to measure. The table below is what that measurement shows: for each band of the frame, how many of the 172 place a piece of readable content inside it. Readable content means text, lists, logos, QR codes, tables or icons, and deliberately excludes full-bleed background images, which are meant to run under the overlay.

The headline result is that 160 of the 172 place readable content inside the top 14% of the frame, and 169 of them inside the bottom 20%. The median clear space above the first readable element is 80 pixels, or 4.2% of the height. Below the last one it is 56 pixels, or 2.9%.

Read that as a warning, not a scandal. These layouts are composed to fill a rectangle, which is the right instinct for a design and the wrong instinct for a surface with furniture on it. The practical consequence: whatever layout you start from, expect to pull the top and bottom content inwards yourself. Nothing does it for you.

The side margins are healthier. The median smallest side margin is 60 pixels, about 5.6% of the width, though 119 of the 172 come in under 65 pixels on at least one edge.

Text: how small can it get

A story frame is displayed on a phone screen roughly 65 to 70 mm wide, so one pixel of your 1080 wide canvas is about 0.06 mm of physical glass.

That conversion is the whole story of story typography. Across all 1,803 text slots in these 172 layouts, the median size is 26 pixels, which is about 1.6 mm of em height, or roughly 4.7 points. The median largest element per layout is 79 pixels, about 5 mm, or 14 points.

Where is the floor? A letter at the threshold of 20/20 acuity subtends five arcminutes, which at a phone held 300 mm away is a cap height of about 0.44 mm. Threshold is not comfort, and comfortable continuous reading is conventionally taken as around three times threshold, which lands at roughly 1.3 mm of cap height, or about 30 pixels of the 1920 frame, a little over 1.5% of the height.

163 of the 172 layouts contain at least one text slot below that floor. In almost every case those slots are the handle, the caption or the footnote, which is a defensible place for small type. It is not a defensible place for the offer. Nielsen Norman Group’s work on legibility makes the same point from the other end: people scan rather than read, and the first few words carry the weight, so the words that must survive a glance need to be the large ones.

A simple working rule: the one thing you want remembered should be at least 5% of the frame height, around 96 pixels, and it should sit between the two interface strips rather than fighting them.

Story ads are a different brief

An organic story and a story ad are the same shape and not the same job. An ad carries an additional call to action element supplied by the platform, sits in a different part of the bottom strip, and is governed by the ad specification rather than by the app’s story interface. Meta publishes those requirements separately, and they include limits on primary text length that do not apply to an organic post at all. Design the organic story first and treat the ad as a variant with less room, never the other way round.

Reusing an A4 design as a story

An A4 flyer is 1240 by 1754, a ratio of about 1:1.41. A story is 1:1.78. There is no crop of one that is a good version of the other, because the story is proportionally much taller and narrower and the middle third has to carry everything.

Two honest options. Switch the design to the story canvas, which swaps in the layout that was authored for that shape rather than stretching the A4 one, so text reflows into the new frame. Or, where the design is mostly a photograph with generous margins, refit the pixels with the flyer size resizer and accept that it cannot move type for you. Dense layouts need the first route. The trade-offs across every canvas are set out in the flyer sizes guide, and the rest of what changes between a printed sheet and a feed is in print flyer vs digital flyer.

Seeing one

Every finished flyer in the examples library was built at A4 and carries native variants at the other seven canvases, including the story. The summer sale flyer is a good one to look at for how much copy survives the move from a sheet to a vertical frame: the answer is usually the headline, the offer and one line of detail, and nothing else.