The short version
- The most reliable way to make text readable on photos is to place the words over the calmest, most even area of the picture.
- A gradient scrim, a soft fade from transparent to dark at one edge of the photo, gives text contrast without a visible box.
- Tinting a photo in one or two colours lowers its contrast and detail, which makes any text on top easier to read.
- Heavier, larger type survives a busy photo far better than thin or small type.
- Text over photos should still meet contrast guidance, roughly 4.5 to 1 for small text and 3 to 1 for large headlines.
On this page
To make text readable on photos without putting it in a box, start with placement: find or create the calmest area of the picture and set the words there. If that isn't enough, add a gradient scrim, a soft fade from clear to dark along one edge, then lower the photo's own contrast with a tint, and finally make the type heavier and larger. Used in that order, these keep the photo intact and the words clear. A box is a last resort, not a starting point.
This page is about the no box approach specifically. For every technique including boxes, bands and cut outs, see text over image.
Why text gets lost on photos
Text needs a difference in lightness between letters and what's behind them. A photo changes lightness constantly: a white shirt next to a dark doorway, leaves against sky. Wherever a letter crosses from light to dark, part of it disappears. Fine detail makes it worse, because the eye can't separate the letter's edge from the texture behind it.
The problem on a Mark background: words laid straight over a busy area lose letters where the ground turns light.
The same words with a calm, even area behind them, the effect you want from a well chosen crop. No box, and every letter reads.
Six ways to make text readable on photos
1. Choose and crop for negative space
The best fix happens before you type a word. Pick photos with an empty area: sky, a wall, a tabletop, a blurred background. Then crop so that area sits where the headline goes. A portrait post at 1080×1350 gives you room to push the subject down and leave the top third calm. Shoot for it if you can: step back and leave space above the subject. Type on busy backgrounds covers patterns and textures that behave like busy photos.
2. Add a gradient scrim
A scrim is a gradient laid over the photo, dark at the edge where the text sits and fading to fully clear. Because it fades, the eye reads it as light falling off rather than as a shape. Keep it to the third of the image that holds the words, and use a dark tone taken from the photo rather than pure black.
3. Tint the photo
Tinting a photo in one or two colours narrows its range of light and dark, so text on top has an easier time everywhere. A dark duotone, such as deep blue to soft lilac, works especially well behind white type; duotone effect shows how to build one. Tinting also makes a set of mismatched photos look like they belong to one brand.
4. Darken or lighten locally
Most photo editors let you lower exposure or highlights in one area. Pulling down a bright sky by a stop, just behind the headline, is often enough on its own and invisible to anyone who hasn't seen the original.
5. Make the type sturdier
Thin, small type is the first to vanish. Use a semibold or bold weight, go up a size, and open the letter spacing slightly on small lines. A heavy sans at 110 px will hold over a photo where a light serif at 70 px never will. Bold fonts lists dependable faces.
6. Put the photo beside the words
Sometimes the honest answer is not to overlap at all. Crop the photo into a circle, arch or half the frame and set the words on a plain or gradient ground next to it. The photo stays whole and the words get perfect contrast.
Which technique suits which photo
Start with
Then
Start with
Then
Start with
Then
Start with
Then
Start with
Then
Start with
Then
How to add a gradient overlay to an image in CSS
On a website, layer the scrim and the photo in one background declaration. The gradient goes first so it sits on top. This keeps the effect in CSS, so it adapts to any crop the layout makes.
.hero {
min-height: 70vh;
display: grid;
align-items: end;
padding: 4rem;
color: #fafaf9;
background:
linear-gradient(0deg, rgb(12 10 9 / 0.85) 0%, rgb(12 10 9 / 0.4) 35%, rgb(12 10 9 / 0) 65%),
url("/images/terrace.jpg") center / cover no-repeat;
background-color: #1c1917; /* fallback while the image loads */
}Check the result against contrast guidance: roughly 4.5 to 1 for normal text and 3 to 1 for large headlines, as set out in WebAIM's contrast guide. Test the lightest point behind the words, not the average. Colour contrast and accessibility explains the numbers.
Mistakes to avoid with text on photos
Avoid
- Glows or blurry halos around each letter
- A heavy black overlay over the whole photo
- Thin script type over a detailed scene
- Placing text across a face
- Fixing a bad crop with ever stronger effects
Prefer
- A soft scrim on one edge only
- A tint that keeps the photo's mood
- A sturdy weight at a generous size
- Words in the space beside the subject
- Recropping, or choosing another photo
Halos and glows around letters are the most common rescue attempt and the one that looks cheapest. They blur the letter edges, which is the opposite of what reading needs. If you're tempted, read text shadows and better alternatives first.
In Gradiently, photos can be tinted in the Mark's colours as mono, duotone or a wash, and cropped into arches, circles and blobs to sit beside the words. On designs where the Mark shows through, it moves its calmest area behind the text and Auto ink picks light or dark type for each line, without boxes, shadows or blur.
Questions people ask
How do I make text stand out on a busy photo?
Place it over the calmest area, add a soft gradient scrim on that edge, tint the photo to lower its contrast, and use a heavier, larger weight.
What is a scrim in design?
A scrim is a gradient overlay that darkens or lightens one part of an image, fading to clear, so text placed there has enough contrast.
Should I use a text shadow to make text readable on a photo?
A soft glow or halo usually looks cheap and blurs the letters. Placement, a scrim or a tint gives cleaner results.
What contrast ratio does text on a photo need?
Aim for about 4.5 to 1 for normal text and 3 to 1 for large headlines, measured at the lightest point behind the words.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile