A lower-third is the banded graphic that sits in the bottom portion of your frame to show your name, topic, or a call to action. Done well, it reinforces your brand and guides viewers without stealing attention from the action. Done badly, it clutters the frame, clashes with your scene, and screams “default template.” This guide covers layout, typography, animation timing, and the safe zones that keep your lower-thirds looking professional on every screen.
What a lower-third is for
The job of a lower-third is quick, glanceable information: who is talking, what segment is running, or where to find you. It is not a billboard. The best ones occupy roughly the bottom 20–25% of the frame, use one or two lines of text, and disappear when they are no longer needed. Persistent name tags can stay up, but promotional lower-thirds should animate in, hold for 6–10 seconds, and animate out.
Safe zones and sizing
Different platforms and devices crop edges differently, so keep text inside a title-safe margin of about 5% from each edge. On a 1920×1080 canvas that means keeping content at least 90–100 px from the sides and bottom. Mobile UI elements like chat bubbles and progress bars also cover the bottom edge, so leave breathing room.
| Element | Recommended size (1080p) | Notes |
|---|---|---|
| Primary name text | 40–56 px | Bold weight, high contrast |
| Secondary/subtitle text | 24–32 px | Lighter weight or muted color |
| Bar height | 90–140 px | Roughly 8–13% of frame height |
| Side/bottom margin | 90–100 px | Title-safe zone |
| Animation in/out | 0.3–0.6 s | Ease, not linear |
Typography and color
Pick one sans-serif family and use two weights: bold for the name, regular for the subtitle. Avoid decorative fonts that lose legibility at small sizes. Maintain a contrast ratio of at least 4.5:1 between text and its backing bar. If your scene is visually busy, add a solid or 70–85% opacity backing so text never fights the background. Match your accent color to your overall brand palette rather than adding a new hue.
Animation without the cheese
Motion should feel intentional. A short slide-in from the left with an ease curve over 0.3–0.6 seconds reads as polished; a bouncing, spinning entrance reads as amateur. Stagger the bar and the text by about 0.1 seconds so the container appears first and the text follows. Keep exit animations symmetrical to the entrance.
Building it in your broadcaster
You can create lower-thirds as transparent PNG overlays, as browser sources with HTML and CSS animation, or with dedicated stream graphics tools. Browser sources are the most flexible because you can trigger them with hotkeys and update text live. Whatever you use, render at your full canvas resolution to avoid soft, upscaled edges, and export with an alpha channel so the background stays transparent.
FAQ
Should my lower-third stay on screen the whole time?
A small, static name tag can stay up permanently if it is subtle. Promotional or informational lower-thirds should be temporary, holding for 6–10 seconds so viewers can read them, then animating out to keep the frame clean.
What resolution should I design lower-thirds at?
Design at your stream’s canvas resolution, typically 1920×1080. If you stream at 1080p but design at 720p, the graphic will be upscaled and look soft. Vector or HTML-based graphics scale cleanly, which is another reason browser sources are popular.
Testing across real devices
A lower-third that looks crisp on your editing monitor can fall apart on a phone in a bright room. Before you commit a design, preview it on an actual mobile screen and check three things: text stays inside the safe zone, contrast survives outdoors, and the animation is not so fast it becomes a distracting flicker. Watch how your platform’s own interface overlaps the bottom edge, because usernames, reaction buttons, and progress bars routinely cover the exact zone lower-thirds occupy. If your graphic collides with that UI, raise it a little. Consistency also matters more than novelty: pick one lower-third style and reuse it, so viewers learn to recognize your brand at a glance rather than being surprised by a new look every segment. Restraint and repetition read as professionalism.
Bottom line
Keep lower-thirds inside the title-safe zone, use two text weights with strong contrast, and animate in and out over roughly half a second. Match your existing brand colors instead of inventing new ones. A restrained, well-aligned lower-third does more for your professionalism than any flashy motion effect ever will.
