A listing image is drawn at 1600 × 900 and almost never seen at 1600 × 900. On a phone it is the width of the phone. In a category row it is a card. In the gallery on a laptop it is smaller than the design tool it was made in. Every word on it has to survive that reduction, and most words do not.

Design at the size, not at the file

The one habit that fixes most of this: zoom the canvas out until the image is the width of a phone, and only then decide whether the headline is large enough. Designing at 100 per cent on a 27-inch screen is designing for a viewer who does not exist.

What comes out of that discipline is bigger type than feels right and less of it. A headline that looks oversized in the file is usually the one that is readable in the gallery.

Five to seven words, once

An image gets one line of attention. Say one thing in it.

Five to seven words is the working limit for a headline, and the supporting line under it should be one sentence you could say out loud without pausing. If it needs a comma and a subordinate clause, it belongs in the description, where a merchant is already reading rather than scanning.

The words also have to be the app's own. A headline in marketing language sitting above an interface that uses different labels reads as two products.

Nothing that is a number

Requirement 4.3.4 forbids stats, data and unsubstantiated claims such as guarantees in images. That removes the copywriter's favourite tool - the specific figure - from the one place it works hardest.

What replaces it is a verb. "Recover the carts that leave" instead of "recover 23% of abandoned carts". The verb says what the app does, and unlike the number it cannot be asked to prove itself.

Text over a screenshot needs a plate

An interface is not a background. It has its own light and dark areas, and a word laid straight over it is legible in one corner and gone in another.

Two ways out, both honest. Put the words in their own area of the image, beside the interface rather than on it. Or set the interface behind a solid or near-solid panel, so the text sits on a colour you control.

Either way, check the contrast of the words against what is actually behind them, at the darkest and lightest point of it. Thin light type over a screenshot is the most common failure in this category and it is invisible on the machine it was drawn on.

Check the fit in a browser, not in the design tool

A design tool renders text with its own engine and its own font file. A browser may not have the same font, and a translation may not have the same length. The only way to know whether a line fits is to lay it out at the real pixel size and measure the box it lands in.

Every set drawn here is measured that way before it is sent: each line of text is rendered in a browser at 1600 × 900 and checked against the box it sits in. A headline that fits in English and overflows in German is not a thing you can catch by looking at the English one.

The thumbnail test

When the set is finished, do this once. Export the six images, put them in a row, and scale the row down until each image is about the size of a postage stamp.

You should still be able to tell the six apart, and you should still be able to read the first one's headline. If the row is six grey rectangles with pale marks on them, the type is too small, too thin, or too pale - and that is what a merchant scrolling a category page on a phone is looking at.