What Game Subtitle Settings Teach About Readable Captions

Turn on subtitles in an older console game and you will often find white text, small enough to need squinting, laid straight over a bright sky with no background at all. Characters talk over each other and the captions flash past before you finish the second line. Plenty of players switch them off in frustration, including people who depend on them.

Subtitles are one of the few places where games and websites face the identical design problem: a block of text that has to be read quickly, on top of moving imagery, by people sitting at very different distances from very different screens. Over the last several years the better studios have quietly worked out a set of rules, and those rules are worth stealing for any video caption, hero banner or text-over-image layout you build.

Why game subtitles failed for so long

The root cause is that subtitles were treated as a localisation deliverable rather than a piece of interface. A translation team produced the text, an engineer dropped it into a default font at a default size, and nobody with a layout background touched it. Games were designed on large monitors at arm's length, then played on a television three metres away, and text that looked fine at the desk turned into specks on the sofa.

The second cause was the background. Designers wanted captions to feel invisible, so they avoided boxes and shadows. That works over a dark cave and fails completely over snow, fire or a sunset. A caption that is readable in eighty percent of scenes is a caption that disappears exactly when something dramatic happens on screen.

What the better games now offer

Look at the subtitle menu in a recent big release and you will see a pattern. The Last of Us Part II, God of War from 2018 and Marvel's Spider-Man all give players a combination of the following controls: text size in several steps, a background box with adjustable opacity, speaker names, and in some cases a colour per speaker. The Last of Us Part II goes further with direction indicators, small arrows that show where an off-screen voice is coming from.

Each of those options exists because a specific failure kept showing up in player feedback. Size covers viewing distance. The background box covers busy scenes. Speaker names cover conversations where three people talk in turn and the viewer cannot see whose mouth is moving. Direction indicators cover the deaf player who otherwise has no idea a guard is shouting from behind.

Translated into layout language, those four options are type scale, contrast layer, attribution and spatial context. None of them is exotic. They are simply the ordinary tools of typography applied to text that moves.

The rules worth borrowing for text over moving images

Over a few projects I have settled on a short set of rules, drawn mostly from game subtitle menus and the broadcast caption guidelines they in turn borrowed from. In order of how often they fix a real problem:

1. Always put something behind the text. A semi-transparent dark box at around 60 to 75 percent opacity behind white text is the most reliable fix there is. A text shadow helps less than people think on bright, detailed footage.
2. Keep lines short. Netflix's timed text guidelines cap a subtitle line at 42 characters for English and allow at most two lines. That keeps each caption to something the eye can take in with one sweep.
3. Give readers enough time. Captions that flash by fail even when they are perfectly legible. Broadcast guidelines aim at reading speeds well under what a fast reader can manage, because viewers are watching the picture too.
4. Size for the furthest likely viewer. A caption on a website hero video will be read on a phone held close, a laptop and a conference room screen. Test at the smallest and most distant of those.
5. Attribute speech when the speaker is unclear. A name in capitals or a consistent colour per speaker. Pick one method and stick to it.
6. Use a plain, open sans-serif. Generous counters and clear distinctions between similar letters such as I, l and 1 matter far more here than personality.
7. Let people change it. On video players, respect the browser and operating system caption settings instead of locking your own styling.

The line length rule is the one I see broken most often on the web, usually in hero banners where a headline runs across a full-width image. I covered the reading side of this in how line length decides whether people keep reading, and moving or busy backgrounds make the effect worse, not better.

The "make it invisible" instinct is the real enemy

Most designers I have worked with, me included, start from the belief that captions and overlaid text should be as discreet as possible so they do not spoil the image. It is an understandable instinct. It is also the reason so much of this text is unreadable.

Games show the cost clearly. When studios began adding background boxes, players did not complain that the boxes spoiled the cinematics. The common reaction in forums was relief, followed by questions about why it took so long. The box became part of the visual language, the same way a lower third became normal on news broadcasts. Once people rely on text, they want it findable more than they want it hidden.

I would go a step further. If a piece of text over an image is important enough to put there, it is important enough to get a contrast layer. If it is not important enough to deserve a contrast layer, it probably should not be over the image at all. That one test resolves most of the arguments I have had with art directors about overlay text.

A practical case: a product video on a landing page

Last spring I reworked a landing page for a small software company. Their autoplaying product video had burned-in captions in thin white type with no background, at about 14 pixels on mobile. Analytics showed most visitors watched with the sound off, which meant the captions carried the whole message.

We changed three things, all lifted from game menus. The text went to a heavier weight at 18 pixels on mobile, it sat on a dark box at 70 percent opacity, and each caption was split so no line ran past about 40 characters. We did not change the video at all. Average watch time on mobile rose by roughly a fifth over the following month. I cannot prove the captions were the only reason, but nothing else on the page changed in that period.

The broader principles behind this are the same ones in typography basics that improve any design. Moving images just make the penalty for ignoring them arrive faster.

One check to run this week

Find every place on your site where text sits on top of a photo or video: hero banners, slider captions, product clips. Screenshot each one at the brightest moment of the image and view the screenshot on your phone at arm's length. If any line takes you more than a second to read, add a background layer behind it and shorten the line to around 40 characters. More lessons from game screens sit in the games section.