Subtitle guidelines do and don't

Summary

A subtitle-guidelines page that contrasts two stacked examples: an approved caption (green check) centered over a product UI shot with its type specs listed, and a misuse example (red check) where subtitles collide with on-screen typography, struck through with a red diagonal.

Visual description

White page, standard header. The left column holds the title "Subtitle Guidelines" and an intro paragraph. The right two-thirds is a cream rounded panel split into two stacked rows. The top row is labeled "Approved Usage: Subtitles" with a green circular check; a spec block lists DS Indigo, Regular, 32px, 110% line height, -2% tracking, centered, plus a "Background Gradient 25% #000000" note connected by a red leader line to a dark product-UI mockup showing centered caption text. The bottom row is labeled "Misuse of Subtitles" with a red circular icon; its dark frame shows large headline-style typography overlapping caption text and is struck through with a single red diagonal.

Key takeaway

Combining a precise type spec with a do/don't example pair on one page: the approved row shows exact caption settings on a real frame, the misuse row shows the one thing to avoid (subtitles fighting on-screen type) crossed out in red. Green-check / red-strike keeps it instantly legible.

Reuse notes

A reusable template for captioning or on-screen-text rules that need both specs and a visual warning. The "background gradient behind subtitles" note is a practical legibility tip worth carrying. Keep the misuse example obviously wrong so the contrast is unambiguous.