The name and job title that slide in under someone on the news, the animated logo before a YouTube video, the opening titles of a film, the words that pop on screen in time with a speaker: all of these are motion graphics, graphic design with time added. Every rule from print still applies (hierarchy, contrast, alignment, a limited set of typefaces), but now there are new questions. How long does the viewer need to read it? Where on the screen is it safe to put it? And how does it arrive and leave without distracting from what it is there to support?
Lower thirds
A lower third is the graphic that identifies a speaker or place, so called because it sits in the bottom third of the frame, below the face. It usually has two lines: the name in a heavier weight, and a role or location beneath it in a lighter one. It exists to answer 'who is this?' without interrupting the speaker, so it must be readable at a glance and must not compete with the face above it. In broadcasting it is also called a 'super' (short for superimposed text) or a 'chyron', after the Chyron character generator that produced them for television stations from the 1970s.
- Same position every time, aligned to the title-safe edge, so viewers know where to look.
- A backing bar or shadow behind the text, so it stays readable over any background.
- Quick in, quick out: about 10–15 frames each way, with easing. The text should be still while it is being read.
- On screen long enough to read twice, typically 3–5 seconds.
- Clear of captions: closed captions also use the bottom of the frame, so leave them room or move the lower third when captions are on.
Title-safe and action-safe areas
Not every screen shows the whole frame. Older televisions cut off the edges (overscan), some still do, and on phones the platform's buttons and captions cover parts of the picture. Two guide rectangles protect against this. Important action stays inside action safe; all text and logos stay inside the smaller title safe. For HD video, the SMPTE standard sets action safe at 93% of the frame's width and height and title safe at 90%; older standard-definition guides used 90% and 80%. Most editing and motion-graphics programs can display both guides over the viewer. To find title safe for any frame size, multiply each dimension by 0.9; the margin on each side is half of what is left over.
| Area (1920 × 1080 frame) | Percentage | Size | Margin on each side |
|---|---|---|---|
| Full frame | 100% | 1920 × 1080 px | 0 |
| Action safe | 93% | about 1786 × 1004 px | about 67 px left and right, 38 px top and bottom |
| Title safe | 90% | 1728 × 972 px | 96 px left and right, 54 px top and bottom |
Kinetic typography
Kinetic typography is text that moves in time with speech or music, so the words carry rhythm and emotion as well as meaning. The effective pieces follow a few rules. Show one idea at a time, timed so each word arrives on the frame its sound begins. Use scale, weight and colour for hierarchy: the stressed word in a sentence gets the biggest, boldest treatment. Use easing and a consistent direction of travel, so the motion feels designed. Above all, leave text still long enough to be read. Moving words are much harder to read than still ones, so the motion should happen between reading moments, not during them. Sync points are easiest to find by looking at the audio waveform on the timeline, where each word starts as a visible bump.
Animated logos, templates and consistency
An animated logo (a 'sting' or 'logo reveal') usually lasts two to five seconds. It is built from the vector layers of the logo itself, often assembling the mark from its own shapes, and it must finish on the logo exactly as the brand style guide shows it, held still for a moment so it registers. A series of videos (a school news show, a YouTube channel) uses the same graphics over and over, and consistency is what makes it look professional. That is the job of a motion graphics template: the design, timing and animation are locked, and only the text fields are editable. Premiere Pro's Motion Graphics templates (.mogrt files) are one example.
- Durations: how long lower thirds, titles and transitions stay on screen.
- Easing: the same ease-in and ease-out curves for every move.
- Typefaces, sizes and colours, taken from the brand style guide.
- Positions: every element aligned to the title-safe guides.
- Direction of motion: for example, everything enters from the left and exits to the left.