Text on a Photo That Reads on a Phone

What it is for

Rules for putting words on an image so they survive the real viewing conditions - a small, dim, moving screen with app interface drawn over the frame. Covers size floors, the scrim built as its own layer under the text, font and colour limits, and the safe areas in full-screen formats. It prevents headlines that look elegant on a desktop and are unreadable where people actually see them.

The skill Copy

Use before you publish any graphic with words on it.

Design for how it will be seen: a phone at arm's length, often at half
brightness, often while walking. Not your laptop.

Rules:
- One idea per graphic. Two sentences means two posts, or a caption.
- Set the headline large enough to read when the image is shrunk to
  thumbnail size. If you squint at the thumbnail, the size is wrong,
  not the reader.
- Never put light text straight onto a busy photo. Put the darkening on
  its own layer underneath - a filled shape or a gradient with its
  opacity pulled down - rather than as an effect applied to the text.
  Kept separate, you can move, resize or recolour the headline without
  rebuilding the backdrop. Outlines and hard drop shadows read as
  amateur and still lose at small size.
- Thin and script fonts die small. Keep them for one large word.
- Two fonts maximum, three colours maximum, the same pair every time.
  A feed that looks like one person made it beats twelve clever posts.

Framing per destination:
- Story and full-screen formats have interface drawn over your picture.
  Keep the top sixth and the bottom sixth clear of anything that
  matters - the headline, the price, the face.
- Feed crops are unforgiving. Never leave a face, a logo or a number
  sitting on the edge of the frame.
- Build the layout once, then export a separate file for each aspect
  ratio and re-place the text in each one. Do not resize the finished
  canvas and call it a second size: the type lands outside the safe
  area and the photo stretches.

Last check before posting: send it to yourself, open it on your phone
inside the app it is destined for, dim the screen. Read the headline in
one second. If you cannot, fix contrast first and size second.

How to install it Copy

1. Open the tool and start a new conversation, project or template.
2. Paste the text below wherever the tool keeps standing instructions
   — usually called system prompt, instructions, or persona.
3. Save it so it applies to every run rather than a single message.

Did it work for you?

Where it came from