Text over a photograph is the most common design job on the internet and one of the easiest to get wrong, because the thing you are putting text on refuses to hold still. A headline that sits beautifully over a dark corner becomes unreadable the moment somebody swaps the picture.
The good news is that this is a solved problem. There are about five techniques, they all work, and the skill is knowing which one the photograph is asking for.
First, look for the quiet part
Before reaching for any effect, ask whether the picture already has somewhere for the text to live. Skies, walls, road surfaces, blurred backgrounds, water. Any large area with low detail and consistent brightness is free real estate.
If it exists, use it. Text placed in a genuinely calm area needs no scrim, no shadow, no treatment at all, and it will look better than any of the fixes below. Choosing the right photograph is the most powerful move available and it costs nothing.
When shooting or briefing a photograph specifically for this, ask for room. Photographers call it negative space, marketing people call it copy space, and it is the difference between a picture you can use and a picture you have to fight.
The five fixes, from most to least invisible
1. The gradient scrim
A black shape at partial opacity, fading from solid at one edge to nothing at the other, sitting between the photograph and the text.
This is the one I reach for most. It darkens the area under the text while leaving the rest of the picture alone, and because it fades, there is no visible boundary. Two rules: make the fade long, over a third of the image at least, and set the darkest end higher than feels necessary. Around 70 per cent black at the text end is normal.
Put it on its own layer. Then when the picture changes, you move the gradient rather than rethinking the design.
2. The overall tint
Darken the entire photograph slightly, either with a black layer at low opacity or with a curve. It reads as a deliberate mood rather than a fix, and it makes the whole frame safe for text rather than one corner.
Best when the photograph is atmosphere rather than information. Worst when somebody needs to see the product clearly.
3. The solid panel
A rectangle, or a shape with rounded corners, sitting on the photograph with the text inside it. Honest, extremely readable, and instantly the safest choice when the picture is busy everywhere.
Give the panel generous internal padding. A panel with text pressed against its edges looks cheap no matter what color it is.
4. Text effects: shadow, outline, glow
Applied to the type itself rather than the background. A soft drop shadow at low opacity is the subtle version and it works surprisingly well: not visible as a shadow, just enough to lift the letters off whatever is behind them.
Outlines and hard shadows are the loud version, and they have a place, particularly for thumbnail-sized text that has to survive at any size. The Effects tab has ready-made styles for exactly this, and every one of them stays editable text, which matters when the headline changes.
5. Change the crop
Sometimes the answer is not to treat the photograph but to reframe it. Crop tighter so the busy part is gone, or wider so a calm area comes into shot. Cheapest fix in the list and the one people forget because it does not feel like design.
Measure it instead of arguing about it
Readability is not a matter of taste, it is a contrast ratio: at least 4.5 to 1 for body text against its background, 3 to 1 for large text.
Over a photograph, the tricky part is that the background is not one color. The honest way to check is to sample the lightest pixel underneath the text, because that is where it will fail first. If white text passes over the brightest spot in its area, it passes everywhere.
The Contrast Check under Tools audits the text layers in a document against the WCAG rules and shows which combinations are hard to read, which is faster than sampling by hand and considerably faster than discovering it from a user.
Typographic details that matter more over pictures
Weight beats size. A medium or bold weight holds up over a busy background far better than a larger light weight. Thin type over texture is where readability goes to die.
Fewer words. Text over an image is competing for attention with the image. Six words survive that competition, thirty do not.
Shorter lines. Long lines are harder to track when the background is varying underneath them.
Left aligned, usually. Centered text over a photograph has no consistent starting point for the eye and needs the composition to genuinely be symmetrical to work.
The test that catches everything
Three checks, fast, in this order.
Shrink it. Look at the design at thumbnail size. If the headline is not readable there, it will not be readable in a feed.
Squint. Blur removes the detail and leaves the tonal relationship. If the text merges into the background when squinting, it merges for anybody glancing.
Swap the photograph. This is the one that matters if the design is a template. Drop in the busiest, brightest picture you can find. A design that survives that is a design you can hand to somebody else.
That last test is why I build the scrim as its own layer and why I use text size ranges. Not because this photograph needs it, but because the next one will, and the next one is usually being chosen by somebody in a hurry.
