Thumbnail text: 8 rules that keep it readable

A thumbnail sits next to dozens of others in a feed, often at under 200 pixels wide. If the words can’t be read at that size, they don’t exist. These rules come from how people actually see thumbnails.

Design · 5 min read

1. Use three to five words

If you can’t say it in five words, say less. The thumbnail’s job is to add to the title next to it, not repeat it.

2. Make the text big

As a guide, a letter’s height should be at least 8% of the image height on a thumbnail. In itistitle the size slider scales the template’s preferred size, and the layout shrinks text only when it has to to fit.

3. Chase contrast, not colour

The brightest colours aren’t always the most readable. What matters is the difference in lightness between text and background. Aim for a contrast ratio of at least 4.5:1; the Colour tab shows you the number and rates it. Over a photo, add the readability overlay and judge in the preview.

4. Choose a heavy font

Thin and ultra-light fonts disappear when shrunk. Bold sans fonts (Anton, Bebas Neue, Archivo Black, Montserrat) hold up best. Keep delicate serifs for larger formats like posts and covers.

5. Keep it away from the edges

Platforms crop, round corners and overlay buttons. On YouTube the video length badge covers the bottom-right corner. Leave a comfortable margin on every side; the templates already do.

6. One focal point

A face, an object or a word, not all three fighting. If you add a photo, put the text where the photo is quiet, using the drag handles to move it.

7. Don’t repeat the title

Show a different angle: if the title is “How I Edit Videos in Half the Time”, the thumbnail might say “HALF THE TIME”.

8. Test at thumbnail size

Shrink the preview in your browser (zoom out) until it’s tiny. Can you still read it? If not, make the text bigger or shorter.

Keep reading

Questions, ideas or a design you’d like to see?

Write to us and we’ll reply by email. You can also write directly to hello@itistitle.com.