Typography for YouTube & Video

Video typography faces a brutal test: thumbnails display at roughly 168 × 94 pixels in the YouTube feed — about 13% of their designed size. On-screen text appears for seconds while viewers multitask. If your type doesn't survive compression, scale, and motion, it might as well not exist.

This chapter covers thumbnail design, title-safe zones, on-screen text for vertical video, and font choices that hold up on camera.

YouTube thumbnail typography

Thumbnails are 1280 × 720 px (16:9). Design at full resolution, then validate at 25% scale — that's roughly how they appear in the subscription feed on desktop.

Size and word count

The squint test

Zoom your thumbnail to 25% (or use the squint test toggle in the playground). If you can't read the title in under 2 seconds, increase size, weight, or contrast. Thumbnails compete with dozens of others — clarity beats aesthetics.

Text on busy backgrounds

• Add a stroke (3–4px dark outline) or drop shadow when text sits over footage
• Use a solid color block behind text — many top creators use yellow or red rectangles
• Avoid placing text over faces — YouTube's A/B testing often favours face + bold text combo with text in negative space

Safe zones

• Bottom 15% — video duration timestamp overlay
• Bottom-right — may show platform badges on some views
• Keep the title in the left 60% or centre — right edge gets cropped on mobile feed in some layouts

Legible fonts for video

Avoid: thin serifs, script faces, more than two type styles per thumbnail, lowercase-only at small preview sizes.

On-screen text in long-form video

For 16:9 YouTube content, on-screen text supplements narration — it doesn't replace it.

Lower-thirds: place in the bottom 20%, left-aligned, over a semi-transparent bar. Never cover the speaker's face or critical action in frame.

Title-safe zone: keep essential graphics within the inner 90% of frame — TV and some players crop edges.

YouTube Shorts, Reels, and TikTok (9:16)

Vertical video typography is larger and simpler than landscape:

Safe zones for 9:16

• Top 10% — status bar, platform icons
• Bottom 18% — username, caption, like/comment/share buttons
• Safe area — centre band, top-biased for hooks

Switch to YouTube Short preset to test vertical video safe zones.

Stroke, shadow, and effects

When text must sit over video footage:

.thumbnail-title {
  font-size: 96px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

Use effects sparingly — one treatment (stroke or shadow or background block), not all three.

End cards and CTAs

• Subscribe button area — bottom-right; don't place text there in the last 20 seconds
• End screen elements — YouTube reserves bottom-right and top-right for clickable cards
• CTA text — "Subscribe" or "Watch next" at 40px+ if burned into the video (prefer native YouTube end screens)

Caption and subtitle sizing

Platform captions (YouTube auto-captions, uploaded SRT) render at platform-controlled sizes. For burned-in captions:

• 24–32 px at 1080p — readable on mobile without dominating frame
• High contrast — white with black outline, or yellow (common convention)
• Max 2 lines on screen at once

Common mistakes

Production checklist

• Thumbnail title 80–120px at 1280×720
• 3–5 words maximum on thumbnail
• Squint test passed at 25% scale
• Bold weight (700+) for all thumbnail text
• Bottom 15% free of essential text (timestamp zone)
• Stroke or scrim when text over footage
• Shorts/Reels text in top 60% of frame
• End card zones respected in final 20 seconds

Related chapters and tools

• Typography for Social Media — Instagram specs and safe zones
• Typography Posters — display hierarchy and bold type
• Typography Accessibility — contrast for captions
• Medium Typography Playground — thumbnail and Short presets
• WCAG Contrast Checker — verify text/background pairs

Video typography is judged in an instant — at thumbnail scale, on a phone, while scrolling. Design big, test small, and cut every word that doesn't earn its place.