Graphic Design Fundamentals for Creators and Marketers · Typography that reads on every screen · lesson 9 of 18 · 7 min
Legibility on mobile, video and thumbnails
Designing for the thumb-scroll
Most social content is viewed on a phone, often briefly, sometimes in bright sunlight, and sometimes by people with low vision. Legibility — how easily individual letters and words can be read — is non-negotiable. If people cannot read it at a glance, the rest of your design work is wasted.
The minimum-size mindset
There is no single universal minimum size for social graphics, because canvases are scaled down to different screen widths. Instead, use tests:
- Phone preview test: send the design to your phone and view it at the size it appears in the feed, not zoomed in.
- Arm's-length test: hold the phone at a normal distance. Can you read every piece of text you intend people to read?
- Thumbnail test: for video thumbnails and carousel covers, view at the small size they appear in search results or grids.
If a piece of text fails, make it larger, shorten it, or remove it. Fine print that must be present for legal reasons (for example ad disclosures or terms) still needs to be readable.
Word count discipline
- Thumbnails: aim for very few words — often three to five — because they compete with the video title that already appears next to them. The thumbnail text should complement the title, not repeat it.
- Story and short-video text: keep each on-screen phrase short enough to read in the time it is visible.
- Carousel slides: one idea per slide; use more slides rather than cramming.
- Ads: the headline should communicate the offer alone; details can live in the caption or landing page.
Text on images and video
Techniques to keep text readable over imagery:
| Technique | When to use | Watch out for | |---|---|---| | Solid text block or card | Busy or colorful backgrounds | Can feel heavy if overused | | Gradient scrim | Photos with a darker or calmer area | Keep it subtle | | Overall darken/lighten | Evenly busy images | Can dull the photo | | Outline or stroke | Bold, playful thumbnail styles | Thin outlines look cheap; keep weight consistent | | Subtle shadow | Slight separation | Heavy shadows look dated |
For video captions and subtitles: use a clean sans-serif, sufficient size, high contrast (for example white text with a dark backing or outline), and position within safe zones so platform UI does not cover them. Burned-in captions help viewers who watch without sound and improve accessibility, but also keep platform-generated or uploaded caption files where available so captions can be read by assistive tech and adjusted by users.
Accessibility considerations for text
- Maintain strong contrast between text and background (covered in detail in the color module).
- Do not rely on very thin weights for important text.
- Avoid placing text over moving or flashing backgrounds.
- Include important information in the caption or alt text as well, because screen readers cannot read text baked into an image. Many platforms let you add alt text to images — use it.
Worked example: a YouTube-style thumbnail
Video title: "How I Edit Videos 3× Faster With Keyboard Shortcuts".
- Weak thumbnail: full title repeated in small text across the top, a screenshot of the editing software, tiny keyboard icon.
- Strong thumbnail: large, bold text "3× FASTER" (two words), a close-up of hands on a keyboard or the creator's expressive face, a high-contrast background, and the text positioned away from where the platform shows the video duration badge (commonly the bottom-right corner).
The text adds curiosity and complements the title rather than duplicating it.
Legibility QA checklist
[ ] Viewed on a phone at real feed/thumbnail size
[ ] Every intended piece of text readable at arm's length
[ ] No important text in thin or script weights
[ ] Text-to-background contrast checked
[ ] Word count minimal for the format
[ ] Text clear of platform overlays (duration badge, buttons, captions)
[ ] Key information also in caption / alt text
Common mistakes
- Designing on a large monitor and trusting how it looks there.
- Repeating the video title in the thumbnail.
- Using thin, elegant fonts for important words on busy photos.
- Forgetting alt text and captions, excluding screen-reader users and people watching on mute.
Standards to know (and how they apply to social graphics)
- WCAG 2.2 contrast (AA): 4.5:1 for normal text, 3:1 for large text (about 24 px regular or 18.66 px bold and above, in web CSS pixels). These were written for web content but are an excellent benchmark for social graphics, ads and slides.
- Images of text (WCAG 1.4.5): on websites and apps, real text is preferred over text baked into images, because it can be resized, translated and read by screen readers. On social platforms, add the key message to the caption and use alt-text features.
- Captions for video: captions help viewers who are deaf or hard of hearing and the many people who watch with sound off.
Hands-on: the legibility QA pass
LEGIBILITY QA — design: __________ channel: __________
[ ] Phone preview at feed size, arm's length — every intended word readable
[ ] Thumbnail test (for covers/thumbnails) at search/grid size
[ ] Contrast: sample the lightest and darkest pixels behind text; ≥ 4.5:1 (normal) / 3:1 (large)
[ ] Word count: thumbnail ≤ 5 words; story phrase readable in the time shown
[ ] Type: no thin/script faces for key info; body ≥ your minimum
[ ] Text on video: inside safe zones; on-screen long enough to read
[ ] Fine print (disclosures, terms) readable, not hidden
[ ] Caption repeats the key message; alt text added where supported
Before/after: a YouTube thumbnail
| | Before | After | |---|---|---| | Words | "My complete honest review of the new budget phone after 30 days" (12 words) | "30 DAYS LATER" (3 words) — the title carries the rest | | Type | Regular weight with thin outline | Heavy condensed sans, solid dark panel behind | | Contrast | White on a light sky | White on near-black panel (passes large-text ratio easily) | | Test | Unreadable at search-result size | Readable at the smallest size in search results |
YouTube's help center recommends 16:9 thumbnails; check it for the current recommended resolution and file-size limits (these differ between desktop and mobile uploads).
Summary
Test on a real phone at real size, keep word counts ruthless, separate text from imagery with scrims or blocks, and support accessibility with captions and alt text.
Video lecture: Legibility on mobile, video and thumbnails
Lecture coming soon · 11 chapters · about 9 minutes. Read the full transcript below.
- Legibility on mobile
- Why legibility is non-negotiable
- The minimum-size mindset
- Word-count discipline
- Text on images and video
- Worked example 1: a YouTube thumbnail
- Worked example 2: pharmacy health stories
- Watch me do it: legibility QA
- Accessibility standards
- Common mistakes
- Recap and try this now
Lecture transcript
Legibility on mobile
Here's a test I want you to try right now. Pick up your phone, open your own feed or channel, and hold it at a normal distance. Not zoomed in. Can you read every word on your last three posts? Most people find at least one they can't. Maybe the text is too thin, too small, too long, or sitting on a busy photo. And if you can't read it, your audience definitely won't, because they're scrolling faster, maybe in bright sunlight, maybe with low vision. In this lecture, you'll learn the minimum-size mindset, word-count discipline, how to put text on images and video, the accessibility standards that apply, and a legibility QA pass. By the end, every word you publish will be readable at a glance.
Why legibility is non-negotiable
Why does legibility matter so much? Because it's non-negotiable. If people can't read your message at a glance, all your other design work is wasted. The colors, the layout, the photo, none of it matters if the key words don't land. On phones, designs are scaled down, often to a third of the screen height or less. Viewers look for a second or two. Some are in sunlight, some have cracked screens, some have low vision. Think of a highway sign. It isn't designed to be beautiful up close. It's designed to be read at speed, from a distance, by everyone. Your social graphics live on a highway of content.
The minimum-size mindset
Here's the minimum-size mindset. There's no single universal minimum font size for social graphics, because canvases get scaled to different screens. So instead of memorizing a number, use three tests. The phone preview test: view the design on your phone at the size it appears in the feed. The arm's-length test: hold the phone at a normal distance and try to read every word you want people to read. And the thumbnail test: for video thumbnails and carousel covers, view them at the tiny size they appear in search results or grids. If text fails, make it bigger, shorten it, or cut it. And remember, fine print that must be there for legal reasons still needs to be readable.
Word-count discipline
Now word-count discipline. For thumbnails, aim for very few words, often three to five, because the video title already appears right next to them. The thumbnail should complement the title, not repeat it. For stories and short video, keep each on-screen phrase short enough to read in the time it's visible. For carousels, one idea per slide. Use more slides rather than cramming. For ads, the headline should work even if it's the only thing people read. Here's the key idea. Every extra word makes every other word smaller and slower. Cutting words is the fastest way to make text bigger.
Text on images and video
Text on images and video needs special care. Place text on calm areas of the image. If there isn't one, add a gradient scrim, a solid panel or a subtle shadow behind the text. Use heavier weights, because thin strokes break up on busy backgrounds and after compression. For video, keep text inside the safe zones, away from captions and platform buttons, and on screen long enough to read comfortably. And check contrast with the WCAG two point two benchmark: four point five to one for normal text, and three to one for large text. Sample the lightest and darkest pixels behind your text, because a photo isn't one color.
Worked example 1: a YouTube thumbnail
Worked example one, simple. A tech reviewer's YouTube thumbnail. The original text reads: my complete honest review of the new budget phone after thirty days. Twelve words, regular weight, a thin outline, white on a light sky. At search-result size, it's a gray smudge. The fix: three words. Thirty days later. The title already explains the rest. A heavy condensed sans. A solid near-black panel behind the words. Now it's readable at the smallest size in search. And a bonus: the three words create curiosity instead of explaining everything. The thumbnail and the title now work as a team.
Worked example 2: pharmacy health stories
Worked example two, a business scenario with illustrative details. A pharmacy chain in Karachi posts health tips as stories in Urdu and English. Viewers keep replying, what does the last line say? The problems: each story frame has a paragraph of text, in a thin font, and the frames advance before people finish reading. The disclaimer is tiny gray text at the bottom, under the reply bar. The redesign: one short phrase per frame in a heavier weight, frames lasting long enough to read twice, the disclaimer moved into the safe zone at a readable size, and the full tip repeated in the caption. And because health content is sensitive, a pharmacist reviews every frame. The replies change from what does it say to thank you.
Watch me do it: legibility QA
Watch me do it. I'll run the legibility QA pass on a carousel cover before posting. I export it and send it to my phone. At feed size, arm's length, I read every word. The subheading is fine, but the small label reading new series is too light. Check two, the thumbnail test: I look at my profile grid, and the headline still reads. Check three, contrast: I sample the lightest and darkest pixels behind the headline. Four point nine to one. Passes. Behind the label, two point eight. Fails. So I darken the label's background. Word count: seven words, fine for a cover. Then I add alt text and repeat the key message in the caption. Done.
Accessibility standards
Let's connect this to accessibility standards. WCAG two point two, which is now also an ISO standard, sets the contrast benchmarks we've used. On websites and apps, WCAG also prefers real text over text baked into images, because real text can be resized, translated and read by screen readers. You can't always avoid text in social images, but you can repeat the key message in the caption, use the platform's alt-text feature, and add captions to video. Captions help people who are deaf or hard of hearing, and the many people who watch with the sound off. Accessible design reaches more people. That's good ethics and good marketing.
Common mistakes
Common mistakes. Thin or script fonts for key information. Too many words. Text on busy parts of photos. White text on light backgrounds. Judging legibility on a big monitor instead of a phone. Story frames that disappear before people finish reading. Hiding legally required fine print. And putting text under platform buttons and captions. Each of these is easy to catch with the QA pass. Make it a habit. Nothing gets published until you've looked at it on a phone, at arm's length, for the time a real viewer would.
Recap and try this now
Let's recap. Design for the thumb-scroll: test on a phone, at arm's length and at thumbnail size. Cut words to make the remaining words bigger. Put text on calm areas or panels, use heavier weights, keep text in safe zones, and check WCAG two point two contrast. Repeat key messages in captions, add alt text, and caption your videos. Try this now. Pick your last three thumbnails or covers and run the legibility QA checklist on each. Redesign the weakest one with fewer, larger words, and compare the before and after side by side at thumbnail size.
Key takeaways
- Test legibility on a phone at feed size, at arm's length and at thumbnail size — there's no universal minimum.
- Cut words: thumbnails around three to five words; one idea per carousel slide.
- Put text on calm areas or panels, use heavier weights and keep it inside safe zones.
- Use WCAG 2.2 contrast (4.5:1 normal, 3:1 large text) as a benchmark, sampling the lightest and darkest pixels behind text.
- Repeat key messages in captions, add alt text and caption videos.
Try it
Pick your last three thumbnails or covers and run the legibility QA checklist on each. Redesign the weakest one with fewer, larger words and compare them side by side at thumbnail size.