TikTok slideshow design: the rules that decide readability on a phone

What makes a slideshow readable on a phone?

Slides are judged quickly, on a small screen, partly covered by the app's own buttons and caption. Readability comes down to a few measurable things, not taste.

We found no TikTok design specification for photo posts. As of November 2026 its Creator Academy photo-posting article (opens in a new tab) gives one layout instruction that matters here: crop all photos to the same ratio for a cleaner look. Everything else below is either a benchmark from another standard or our own default, and each row says which.

How should you set the canvas?

Pick one size and use it for every slide. TikTok gives no pixel size for photo posts, so the common default of 1080 by 1920 pixels (9:16) is community guidance, not a spec. The TikTok slideshow size page covers the numbers that exist and a test you can run.

If you plan to publish the same slides on Instagram, design with the crop in mind. Instagram's Help Center says photos 320 to 1,080 px wide keep their original resolution (opens in a new tab) when the ratio sits between 1.91:1 and 3:4, and 4:5 is inside that range. Cropping a 1080 by 1920 slide to 4:5 or 3:4 keeps a band from the middle:

These are plain arithmetic for a centered crop. The repurposing guide and the Instagram carousel size page cover the rest.

How big should text be?

Use a floor and a range. The floor comes from Apple's Human Interface Guidelines (opens in a new tab), which set 17 pt as the iOS default text size and 11 pt as the minimum. Converted to a 1080 px slide, that is roughly 43 px for body text and 28 px as a hard floor. The guidelines are for app interfaces, so this is a rough conversion, not a rule for images; the working is on the words per slide page.

Our defaults follow from it:

• Body or supporting text: 44 px or larger, and 52 to 64 px if you can afford the space.
• Headlines: 72 to 96 px.
• Fine print such as a handle: not smaller than 28 px, and never anything the viewer must read.

How many words fit at each size is worked out on the words per slide page. The measuring method is the thumbnail test. Shrink the slide to roughly a quarter of its size. If you can no longer read the main line, the type is too small or too thin.

What contrast do you need?

WCAG 2.2 success criterion 1.4.3 asks for a contrast ratio of at least 4.5:1 for text, and 3:1 for large text (opens in a new tab). W3C defines large text as 18 point, or 14 point bold. The stricter enhanced criterion (opens in a new tab) asks for 7:1. WCAG covers web content and sets no minimum font size, and neither TikTok nor Instagram is known to require it for photo posts. Treat the ratios as a benchmark: they are the best public yardstick for "readable".

The table shows ratios we calculated with the WCAG formula, so you can see how quickly common choices fail.

On photo backgrounds, measure against the worst patch behind the text, not the average. Three fixes work: a dark or light overlay under the text, an outline around the letters, or a solid label box. A semi-transparent dark overlay across the whole slide is the simplest way to keep contrast steady across a set.

How do you keep key words clear of the interface?

TikTok publishes safe-zone template files for ads, where the zone shrinks as the caption grows, and we found no pixel margins for organic photo posts. The TikTok safe zone page compares the official and community guidance and proposes a conservative box. The design rule is simple: put the hook and every must-read line in the upper-middle of the slide, and treat the bottom third as decoration or a place for the caption to sit on top of.

How do you build a clear hierarchy?

A viewer should know where to look in the first moment. Give each slide one focal element, usually the headline, and make everything else visibly smaller.

• Use at most two text sizes per slide, plus an optional small label.
• Make the headline at least 1.5 times the body size (for example 80 px over 52 px).
• Use weight and color for emphasis, not extra sizes. One accent color used once per slide is enough.
• Leave room around the text. Crowded margins make the same words look smaller.

The squint test finds problems fast. Blur your eyes at the slide: the headline should survive, and a second element should compete only slightly.

How do you make a set of slides look consistent?

Consistency makes swiping effortless. If the text lands where the last slide's text started, the viewer's eye does not need to search. The rule is to fix a grid once and reuse it:

• The same one or two fonts on every slide.
• The same side margins and the same anchor (left aligned at one x position, or centered).
• The same overlay or background treatment.
• The same position for the headline, with cover and call-to-action slides allowed to differ.

Consistency is also the reason to use design templates instead of building each slide by hand. Fyslide ships built-in designs, lets you build your own, and can turn screenshots of a format into a reusable design with a vision-capable AI. Every slideshow in a job then shares the same grid. See the guide to designs and the guide to designs from screenshots. The pillar on hooks covers what goes on the cover once the layout is fixed.

How should images and backgrounds be handled?

Use backgrounds at least as large as the slide, because enlarging a small image softens it. Put text on calm areas, such as sky, a wall or a blurred background, rather than on fine detail. Check the exported file at full size, not in the editor. If a finished post looks soft on your phone, the blurry slideshow page walks through the causes. Fyslide exports slides as PNG or JPG into a folder you choose, and you upload them yourself.

How do you make slides accessible?

Text inside an image is normally not read by screen readers unless the alt text repeats it (a general accessibility point). TikTok said in May 2025 that creators can add alt text to photo posts (opens in a new tab) during upload or after publishing. Instagram generates alt text automatically and lets you replace it (opens in a new tab). Neither platform gave a character limit in the pages we read, so keep alt text short, put the slide's main text first and leave out decoration.

Contrast and size also help every viewer in sunlight or at low brightness, not only people with low vision.

What should you check before exporting?

• All slides have the same pixel size.
• Body text is at least 44 px, and the headline is at least 1.5 times the body.
• Every text block passes 4.5:1 against its worst background patch (3:1 for headline-size text).
• Must-read lines sit in the upper-middle, clear of the bottom third.
• Each slide has one focal element and no more than two text sizes.
• Fonts, margins and text position match across content slides.
• The slide reads at quarter size.
• Alt text or the caption repeats the key text of each slide.