Use three to five words at most, and often fewer. On a 1280×720 canvas, make the smallest important word at least 90–110 pixels tall in a bold, simple sans-serif, with a contrast ratio of 4.5:1 or more against its background. Place text in the top or left part of the frame, away from the bottom-right corner where the duration badge sits, and check that it is readable at 168×94 before you publish.
Why fewer words work better
A viewer scrolling a feed gives each thumbnail a fraction of a second. In that time people can take in a face, a shape and one or two words, not a sentence. Text that repeats the title wastes the space; text that adds a number, a result or a twist gives the viewer a second reason to click.
There is also a size problem. Every extra word makes all words smaller, because the width of the frame is fixed. Going from three words to seven roughly halves the letter height you can afford, and at sidebar size that is the difference between readable and invisible.
Text size: the 168×94 rule
At sidebar size, a 1280×720 thumbnail is scaled to about 13% of its width. Text that is 100 pixels tall on the canvas becomes about 13 pixels tall on screen, roughly the size of normal interface text. Below about 9–10 screen pixels, most people cannot read letters at a glance.
| Letter height on 1280×720 canvas | At 360×202 | At 168×94 | Readable at a glance? |
|---|---|---|---|
| 40 px | 11 px | 5 px | No |
| 70 px | 20 px | 9 px | Barely |
| 100 px | 28 px | 13 px | Yes |
| 140 px | 39 px | 18 px | Yes, easily |
These are cap heights of bold letters. If your font has a small x-height or thin strokes, add 20% to be safe.
How many words fit at a readable size
With letters at least 100 pixels tall and normal letter spacing, a 1280-pixel-wide canvas holds about 10–14 characters per line once you leave margins and keep the right side clear. Two lines of large text is the practical maximum before the image itself has no room left.
| Words | Typical layout | Works for |
|---|---|---|
| 1 | One huge word or number | Results, reactions, numbers (“$0”, “WHY?”) |
| 2–3 | One line, large | Most videos |
| 4–5 | Two lines, large | Comparisons, short claims |
| 6+ | Small text | Rarely works; move it to the title |
Fonts that survive scaling
Choose bold or black weights of simple sans-serif typefaces with open shapes and a large x-height. Avoid thin weights, condensed fonts with tight counters, decorative scripts and outlines without fill. Letters such as e, a and s close up first when an image is scaled; fonts with open counters keep them legible longer.
Use a stroke or shadow to separate text from a busy image. A dark outline about 6–10% of the letter height works on most photos. Keep letter spacing normal or slightly loose; tight tracking makes letters merge at small sizes.
- Bold or black weight
- Large x-height, open counters
- Outline 6–10% of letter height
- Normal or slightly loose tracking
Design readable thumbnail text in six steps
- 01
Decide what the text adds
Write the one fact or twist the image cannot show. If there is none, use no text.
- 02
Cut to five words or fewer
Remove articles, filler and anything already in the title.
- 03
Set it large and bold
Make the smallest important word at least 100 px tall on a 1280×720 canvas.
- 04
Add separation
Use an outline, a shadow or a box until the text passes a 4.5:1 contrast check.
- 05
Place it top-left
Keep it out of the right 22% and bottom 22% of the frame.
- 06
Check at 168 pixels
Open the safe zone checker at the 168px width and read the words without zooming.
Where to place text
Viewers in left-to-right languages tend to scan from the top-left, and eye-tracking studies of web pages find that people focus on the start of lines and the left side of content. The top-left and top-center of the thumbnail are therefore strong places for words. The bottom-right corner is the worst, because the duration badge covers it on almost every surface.
Leave a margin of about 50 pixels around the edges on a 1280×720 canvas, and keep text out of the right 22% and bottom 22% of the frame. Do not put text over the subject’s face; place it beside the face, in an area of calm background.
| Area | Suitability for text | Why |
|---|---|---|
| Top-left | Best | Seen first, never covered |
| Top-center | Good | Visible, but may collide with the subject |
| Left-center | Good | Natural reading start |
| Bottom-left | OK | Watch the progress bar |
| Bottom-right | Avoid | Covered by the duration badge |
Text in other languages
German, French and Spanish words are often longer than English, so a three-word English text can become two long lines. Chinese, Japanese and Korean pack a lot of meaning into few characters, but complex characters need even more size to stay readable: aim for 120 pixels or more on the canvas for characters with many strokes. If you localize thumbnails, re-check each language at 168×94 rather than assuming the English layout still fits.
Numbers, symbols and emoji on thumbnails
Numbers are some of the most effective words on a thumbnail because they are short and specific: “$0”, “30 DAYS”, “1 vs 100”. Digits in bold fonts are wide and clear, and they survive scaling well. Keep currency signs and units the same size as the digits, or slightly smaller, but never tiny.
Symbols such as arrows, question marks and check marks can replace words, but each one adds an element that competes for attention. Use at most one. Emoji are rendered by the editor as images, so they scale like any other graphic; a single large emoji can work as a reaction, but several small ones turn into colored dots at 168×94.
- Prefer numbers over number words
- At most one symbol or arrow
- One large emoji, never a row of small ones
Text, title and accessibility
Text on the image cannot be read by screen readers or translated automatically, and it is not indexed the way the title and description are. That is another reason to keep it short and to put the important words in the title as well, in a fuller form. The thumbnail text should be a hook; the title should be the clear, searchable statement.
Think about viewers with low vision too. Large, high-contrast text in a simple font helps everyone, not only people who use accessibility settings. If your audience watches on TVs, remember that the thumbnail is seen from three meters away; text that is readable at 168×94 on a phone is usually readable on a TV as well.
| Where the words go | Purpose | Length |
|---|---|---|
| Thumbnail text | Hook: a number, result or twist | 1–5 words |
| Title | Clear, searchable statement | Hook in the first 40 characters |
| Description | Context and keywords | First 1–2 sentences matter most |
Worked example: from nine words to three
A tech reviewer’s first draft says “I USED THIS CHEAP LAPTOP FOR 30 DAYS” across the bottom of the frame, set at 64 pixels so it fits. At 168×94 the letters are 8 pixels tall and the last two words sit under the duration badge.
The second draft moves the claim into the title and keeps “30 DAYS LATER” top-left at 130 pixels with a dark outline. At sidebar size the letters are 17 pixels tall, the corner is clear and the audit’s text check turns green.
| Draft | Words | Letter height (canvas) | At 168×94 | Corner |
|---|---|---|---|---|
| First | 9 | 64 px | 8 px | Covered |
| Second | 3 | 130 px | 17 px | Clear |
Common thumbnail text mistakes
Writing a sentence
Long text gets small and repeats the title. Keep three to five words.
Thin or script fonts
They break apart when scaled. Use bold sans-serif.
Text under the badge
The bottom-right corner is covered. Move text up and left.
No outline on photos
Text without separation fails contrast on busy areas.
Text over the face
It hides the expression, the strongest element. Put it beside the face.
Not re-checking translations
Longer words in other languages break the layout. Test each version.
