TikTok vs Reels vs Shorts: where the overlays actually differ

Three players, one canvas, three different collisions

Every major short-form player accepts a 1080×1920, 9:16 file. That shared canvas is why teams ship one master to TikTok, Instagram Reels, and YouTube Shorts. The mistake is assuming the chrome is shared too. It is not. The caption well, the engagement rail, the tab bar, and the subscribe or remix controls occupy different rectangles on each app. A lower-third that is clean on Shorts can sit directly under TikTok’s username. A headline that clears Reels tabs can still be clipped by TikTok’s Following / For You pair.

FramePad reconstructs those rectangles from screenshots on iPhone 15 Pro Max, iPhone 16 Pro Max, and Galaxy S24 Ultra — not from marketing spec sheets, which lag chrome changes by months. This guide records the differences that change a cut, not the trivia. If you only have time for one rule: keep essential type inside a centre rectangle that is 72% of the width and 64% of the height, then check the destination overlay before you publish. The TikTok safe zone checker, Instagram Reels safe zone tool, and YouTube Shorts safe zone previewer load the same file against each HUD.

Caption wells: height, width, and who owns the bottom third

TikTok parks the username, a two-line caption, and a music ticker in a left-aligned stack just above the tab bar. The stack is roughly 68% of the frame wide. When a caption overflows two lines, the client truncates and adds a “more” control that is itself a hit target. Instagram Reels uses a taller caption well because Remix, the audio attribution, and the comment preview compete for the same band. YouTube Shorts puts a title and a channel row lower than TikTok’s username, then a subscribe chip that can expand after the first second.

Practically: burned-in subtitles that sit at y ≈ 78% will collide with TikTok’s native caption on every current iPhone we measured, and with Reels on most Android builds. Raise burned-in titles to sit above y = 71% on TikTok and y = 68% on Reels. Shorts is more forgiving on the left, but the right rail (like, dislike, comment, share, remix) is thicker than TikTok’s disc. Do not park a logo in the lower-right on any of the three.

Native captions are a separate layer. They are good for accessibility and search. They are also the layer most likely to cover your burn-in. If you must burn subtitles, treat them as titles — short, high contrast, centre-safe — and leave the long transcript to the native field. The text overlap notes on the TikTok checker walk through line-count at a given type size.

Action rails and why the right 14% is never yours

TikTok’s rail is a vertical stack: avatar, like, comment, bookmark, share, spinning sound disc. On 1080×1920 that column is about 151 pixels wide. Reels is similar but adds Remix and a Send shortcut; the avatar ring is a gradient, not a plus-badge. Shorts uses like/dislike as a pair, then comment, share, remix, and a more menu. The hit targets are larger on Shorts because YouTube still designs for lean-back thumbs.

A face that is composed on the right third of a 16:9 interview will be bisected by all three rails after a centre crop. That is the most common failure we see when a landscape talking-head is run through a naive 9:16 conversion. Pan the subject into the remaining 72% of width, or use smart blur padding so the 16:9 frame stays intact and the rails sit over empty pad instead of a cheekbone.

Top chrome: tabs, search, and the first 10%

TikTok’s Live / Following / For You / search cluster occupies the top 10% of the frame on notched iPhones, slightly less on some Android builds with a punch-hole. Reels is quieter at the top — a small close or audio affordance — which is why editors who only preview Reels put headlines at y = 4% and then watch them vanish on TikTok. Shorts places a search icon and a camera or Shorts wordmark in the top-right; the title is not at the top, it is in the lower third.

Start display type below y = 12% if the same master will run on TikTok. If the cut is Reels-only you can sit a little higher, but you still need room for the status bar and the Dynamic Island. We do not recommend a TikTok-only top and a Reels-only top unless you are already versioning the file. One conservative master is cheaper than two uploads that drift.

A working order of operations

Load the landscape or vertical source in FramePad. Crop or pad to 9:16 first — geometry before chrome. Then toggle TikTok, Reels, and Shorts without re-importing. If a face or a line of type intersects a control by more than about eight pixels at 1080×1920, move it. Export a clean master and, if a reviewer needs proof, a burn-in sheet with the overlay on.

Do not trust a desktop mock of the player. Desktop web views use different chrome. The measurements in this guide are mobile. Confirm the final cut on a phone, because home indicators, font scaling, and “larger text” accessibility settings can push a caption well up by 40–80 pixels. FramePad is a preflight, not a substitute for a device check.