captions-and-text-overlay-design

name	captions-and-text-overlay-design
description	Use when adding text to vertical short-form. Captions + text overlays carry content for sound-off viewers.

Captions and Text Overlay Design

Text overlays: highlight key points, retain attention, brand-consistent. Centered upper-third for readability.

Text overlay placement

Safe zones (avoid platform UI):

• Top: 100px margin (where likes, comment, share icons can be)
• Bottom: 200px margin (caption, share button area)
• Sides: 50px margin

Content area: middle 70% of frame. Place key text here.

Text design principles

1. Large enough — readable at 1080×1920 mobile (24-40pt)
2. High contrast — black on white, white on dark
3. Limited font count — 1-2 fonts maximum
4. Brand-aligned — match brand fonts/colors
5. Sparse — don't fill frame with text
6. Hierarchy — main point larger, supporting smaller
7. Movement — animate text in/out (attention)

Animation types

1. Fade in/out — gentle, professional
2. Slide in — direction signals direction (left = next, right = back)
3. Pop/scale — emphasis (one word at time)
4. Type animation — typewriter effect
5. Word-by-word reveal — match speech
6. Glitch/distortion — stylized impact (use sparingly)

Where this fits in the X3 empire

Caption design for CardPrepAI social shorts.