When to zoom in screen recordings (and when not to)
Practical rules for zoom and pan in tutorials and product demos, plus how to use arrows, spotlights and blur without cluttering the screen, and how to keep text readable on a phone.
The FluidEditor team · · 5 min read
A full-screen recording of a modern app is mostly empty space and small text. On the laptop you recorded it on, that's fine. On a phone, which is where a lot of tutorials get watched, the menu you're talking about is a few pixels tall.
Zooming in fixes that. Zooming in everywhere makes people seasick. Here's how we decide.
The test: can they read it on a phone?
Before you add a single zoom, watch your recording on a phone, or shrink the preview to about the width of one. Any moment where the viewer needs to read something they can't read is a moment that needs a zoom.
That's the main rule, and it covers most cases:
- Zoom when the viewer needs to read text that's small at full frame: menu items, form labels, code, settings values.
- Zoom when the action is small: a checkbox, a toggle, a tiny icon button.
- Stay wide when the layout matters: the first time you show a screen, when you move between areas, or when the point is where something is relative to everything else.
A good rhythm for software guides is wide to orient, zoom to act, wide again to move on.
How much to zoom
Less than you think. A 1.3× to 2× zoom is enough for most UI. Going higher hides context, and the viewer loses track of where on the screen they are.
If you need more than about 2.5× to make something readable, the problem is usually the recording, not the zoom. Record a smaller window, increase the app's text size, or record at a higher resolution.
Timing: ease in, hold, ease out
The most common mistake is zooming at the same moment as the click. The viewer's eye needs a beat to land.
- Ease in just before the action — about half a second.
- Hold while it happens and while you're talking about it.
- Ease out once the next thing needs context, not straight away.
Avoid zooming in, out and back in within a few seconds. If two actions are close together on screen, stay zoomed in and pan between them instead.
In FluidEditor, you press Z and drag a box on the preview around the area you want. The zoom eases in, holds and eases out, and it shows up as a segment on the clip in the timeline, so you can drag its edges to change the timing. Because it's built on keyframes, you can fine-tune scale and position afterwards.
Why we don't zoom automatically on every click
Some recording tools zoom automatically wherever you click. That's handy for quick demos. For tutorials it often zooms on the wrong thing: you click to focus a window, to dismiss a notification, or out of habit, and the camera follows.
FluidEditor runs in the browser, and a web page isn't told where you click in other apps, so it couldn't do that even if we wanted it to. Instead, we've made a manual zoom a single drag. The upside is that every zoom is one you chose, aimed at what the viewer should look at.
Annotations: one idea at a time
Zooms show where. Annotations show what. They work best sparingly.
- Arrows for "this button, here". One at a time. Let it draw on as you say the name of the thing it points to, then remove it.
- Step badges (numbered circles) when the order matters. Put them next to the target, not on it, and keep the numbers going across the video so "step 3" means the same thing in the narration and on screen.
- Spotlight when the screen is busy and only one area matters, like a dialog over a full page. Dim the rest by about half; going fully dark feels like a different video.
- Highlight for a phrase or a value in a block of text.
- Callouts when there's a word the viewer needs to remember, like the name of a setting.
- Keyboard chips whenever you use a shortcut. People can't see your hands.
A useful limit: no more than two annotations on screen at once. If you need more, you're trying to say two things, and they should be two moments.
Blur anything private, every time
Screen recordings leak. API keys in a settings page, a colleague's email in a sharing dialog, a customer's name in a list. Someone will pause on that frame.
Before you export, scrub through the whole video looking only for private data. Then cover each piece with a blur or pixelate box. If the content scrolls or moves, keyframe the box so it follows. It's much easier to do this as part of every edit than to explain later why a key ended up on YouTube.
Better still, record with test data. Blurring is the safety net, not the plan.
Make the recording easier to zoom
A few habits make zooms cleaner:
- Record one window or tab, not the whole screen. Less to crop, no notifications.
- Use a sensible window size. Very wide windows put the action at the edges.
- Move the mouse calmly and pause on what you're about to click. Zooms look smooth when the cursor isn't racing.
- Leave a second of stillness at the start and end of each section, so you have room to ease in and out.
Finish with a polished frame
Once the zooms are in, putting the recording inside a frame helps it read as a deliberate video rather than a raw capture: a little padding, rounded corners, a soft shadow and a background colour, optionally with a browser-window title bar. Keep the padding small enough that zoomed text stays readable.
A quick checklist
- Watched at phone size; every unreadable moment has a zoom.
- Zooms between 1.3× and 2×, easing in just before the action.
- No more than two annotations on screen at a time.
- Step numbers match the narration.
- Every email, key and name blurred, and the blur follows moving content.
- Keyboard shortcuts shown on screen.
If you make a lot of these, we wrote up how FluidEditor handles tutorials and software guides from script to export.