# How to make text readable on photos without a box

[Canonical HTML page](https://gradiently.design/guide/readable-text-on-photos)

A solid box behind the headline works, but it makes every post look like a meme. These techniques keep the photo whole and the words clear, with code for the web and settings for social posts.

## 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.

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](https://gradiently.design/guide/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.

A portrait post where the headline runs over a busy, uneven background and parts of the letters are hard to read

The problem on a Mark background: words laid straight over a busy area lose letters where the ground turns light.

The same portrait post with a calmer, more even area behind the headline so every word is readable

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](https://gradiently.design/guide/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.

- Bottom scrim, warm black: `linear-gradient(0deg, #0c0a09d9 0%, #0c0a0973 30%, #0c0a0900 60%)`
- Top scrim, navy: `linear-gradient(180deg, #0f172acc 0%, #0f172a00 45%)`
- Side scrim, for left text: `linear-gradient(90deg, #1c1917d9 0%, #1c19174d 40%, #1c191700 65%)`

Three scrims shown on their own. Laid over a photo, each darkens only the area that holds the words and fades out before the subject.

### 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](https://gradiently.design/guide/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](https://gradiently.design/guide/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

| Photo | Start with | Then |
| --- | --- | --- |
| Clear sky or plain wall | Placement | Nothing else needed |
| Subject in the middle, busy edges | Crop to free one edge | Scrim on that edge |
| Busy all over (crowd, market, foliage) | Tint or duotone | Heavier type |
| Bright, high key product shot | Dark type in the brightest area | Lower highlights locally |
| Night or dark interior | White type over the darkest area | Slight scrim if lights cross the words |
| Detailed photo you can't alter | Photo beside the words | Shared colour to tie them together |

Start with the least visible technique and stop as soon as the smallest line reads.

## 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.

```css
.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 */
}
```

A bottom scrim over a cover photo, with a dark fallback colour so the text reads before the image arrives.

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](https://webaim.org/articles/contrast/). Test the lightest point behind the words, not the average. [Colour contrast and accessibility](https://gradiently.design/guide/color-contrast-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](https://gradiently.design/guide/text-shadow-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.

## FAQ

### 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.