Best Fonts for UI Demo Videos

The fonts in your demo video serve a different purpose than the fonts in your product. Product fonts need to work at 14px on a 27" monitor. Video fonts need to work at whatever size they end up being on a phone screen watching a compressed Twitter video. Different constraints, different choices.

Two distinct font jobs in demo videos

1. Text overlays — titles, feature labels, callout text that you add in post-production to explain what's happening on screen.

2. The product's own UI text — whatever your app already displays, which you're recording or animating.

You control the first. The second is fixed. The goal: make your overlays complement your product's typography without competing with it.

Best fonts for video overlays

Optimized for readability at small sizes, brief viewing duration, and video compression:

Inter — The default choice for a reason. Tall x-height, open apertures, designed specifically for screens. Works from 12px to 72px. Weight recommendation: Medium (500) for body, Semibold (600) for headings.

SF Pro / SF Pro Display — Apple's system font. Excellent at small sizes due to its optical size variations. Use SF Pro Text below 20pt, SF Pro Display above. Note: requires Apple ecosystem or licensing.

Geist — Vercel's font. Clean, modern, slightly narrower than Inter. Works well for technical/developer-focused products.

DM Sans — Geometric but friendly. Slightly more personality than Inter. Good for consumer-facing products.

Manrope — Semi-rounded, warm. Bridges the gap between technical and approachable. Works well for overlays that need to feel friendly.

Fonts to avoid in video overlays

Thin weights (100-300): Disappear completely after video compression. You need at least Regular (400), preferably Medium (500).
Condensed faces: Tight spacing becomes illegible at small sizes, especially on mobile.
Decorative/display fonts: Distract from the product. Your overlay text should be invisible infrastructure, not a design statement.
System defaults (Arial, Times New Roman): Signal "I didn't think about this," which undermines the production value you're trying to build.

Weight recommendations by use

Use Case	Weight	Size (at 1080p)
Main title/heading	Bold (700)	48-72px
Feature labels	Semibold (600)	28-36px
Descriptions/body	Medium (500)	20-24px
Captions/subtitles	Medium (500)	18-22px
Fine print/timestamps	Regular (400)	14-16px (avoid if possible)

Matching overlays to your product's font

Three strategies:

Same font, different weight: If your product uses Inter Regular for body text, use Inter Semibold or Bold for overlays. Creates visual cohesion without confusion between product text and annotation text.

Same family, different style: If your product uses a sans-serif, your overlays should be sans-serif. Don't mix a serif overlay with a sans-serif product — it looks like two different brands.

Complementary contrast: For a highly technical product with a monospace font (like a code editor), use a clean sans-serif overlay. The contrast signals "this is commentary" vs "this is the product."

Caption-specific typography

Captions/subtitles have unique requirements:

Minimum size: 18px at 1080p (appears as ~12px on mobile — already borderline)
Background: Always add a semi-transparent background (black at 60-80% opacity) or text shadow. White text on variable backgrounds is unreadable.
Line length: Maximum 40 characters per line. Two short lines beat one long line.
Font: Use a slightly wider font for captions than headings. Inter, Roboto, or Noto Sans work well. Avoid fonts with ambiguous characters (l vs I vs 1).

Performance tip: fewer fonts, more confidence

Limit your entire video to 2 fonts maximum: one for your product (whatever it already uses) and one for all overlays/annotations. Using 3+ fonts in a product video makes it feel like a college presentation rather than professional marketing.