Subtitle Font & Style Guide

Introduction

The visual appearance of subtitles is just as important as the text itself. Poorly styled subtitles — wrong font, bad color contrast, no outline on bright scenes — can make content unwatchable even when the timing and translation are perfect. This guide covers everything you need to know about subtitle typography and styling.

Best Fonts for Subtitles

Sans-Serif (Recommended)

Arial — The industry standard. Used by Netflix and most streaming platforms. Clean, highly readable at all sizes.
Helvetica — Similar to Arial with slightly refined proportions. Common on Apple platforms.
Roboto — Google's default. Used in YouTube auto-captions. Modern and clean.
Verdana — Wider character spacing, excellent readability on low-resolution screens.
Open Sans — Popular web font with great readability. Good for online video.

Serif (Occasionally Used)

Times New Roman — Classic look, sometimes used for period dramas or formal content.
Georgia — Screen-optimized serif, more readable than Times New Roman on displays.

Fonts to Avoid

Comic Sans — Unprofessional appearance
Impact — Too heavy, hard to read at subtitle sizes
Decorative/Script fonts — Poor readability at speed

Font Size Guidelines

| Platform | Recommended Size | Notes | |----------|-----------------|-------| | Netflix | 28-32px | Based on 1080p resolution | | YouTube | 24-28px | Varies by player size | | Broadcast TV | 26-30px | Depends on safe area | | Mobile viewing | 30-34px | Larger for small screens | | Cinema/Theater | 36-42px | Must be visible from distance |

Color and Contrast

White Text on Dark Scenes

The most common and readable combination. Use pure white (#FFFFFF) for maximum contrast.

Yellow Text

Classic DVD/VHS style. Yellow (#FFD700) stands out well on most backgrounds but can look dated. Still popular in some regions (particularly East Asia).

Colors to Avoid

Light gray on dark backgrounds (too low contrast)
Bright colors on bright backgrounds
Neon/saturated colors (eye strain over long viewing)

Outline vs Background Box

Text Outline (Text Shadow)

Best for: Dark scenes, cinematic content
Appearance: Clean, minimal, professional
Downside: Can be hard to read on very bright or busy backgrounds
Use black outline (1-2px) around white text

Semi-Transparent Background Box

Best for: Mixed content, bright scenes, accessibility
Appearance: High contrast, always readable
Downside: Can obscure more of the image
Use rgba(0,0,0,0.75) for good balance

Both Combined

Many modern platforms use both a light outline AND a background box for maximum readability in all conditions.

Platform-Specific Styles

Netflix

Font: Proprietary (similar to Arial)
Size: ~28px at 1080p
Color: White with semi-transparent black background
Outline: Yes, subtle

YouTube

Font: Roboto
Size: ~24px
Color: White with dark semi-transparent box
Outline: No (uses box only)

BBC iPlayer

Font: Reith Sans (BBC proprietary)
Size: ~26px
Color: White with opaque black background
Outline: No

Prime Video

Font: Amazon Ember
Size: ~26px
Color: White with semi-transparent background
Outline: Light

Testing Your Styles

Always test subtitles against:

Dark scenes — Most common, verify outline is visible
Bright scenes — Ensure text doesn't disappear on white/light backgrounds
Busy backgrounds — Action sequences with lots of movement
Mixed scenes — Scenes that transition between light and dark

Our Style Previewer lets you test against all these conditions before publishing.

CSS for Web Players

For HTML5 video players using WebVTT, style subtitles with the ::cue selector:

::cue {
  font-family: "Arial", sans-serif;
  font-size: 28px;
  color: #FFFFFF;
  background-color: rgba(0, 0, 0, 0.75);
  text-shadow: #000 -2px -2px 0, #000 2px -2px 0, #000 -2px 2px 0, #000 2px 2px 0;
}

Our Style Previewer generates this CSS for you automatically.

Try our Free Subtitle Style Previewer today!

Subtitle Font & Style Guide - Best Fonts, Colors, and Sizes for Readability