Why is the text in my Remotion video blurry, and how do I render it crisp?

If the text in your exported video looks soft, the reflex is to lower the compression. That is usually the wrong first move. The Remotion quality guide lists the real causes in a deliberate order.

1. Pixel density, the surprising one

Take a 1920 by 1080 video with text in it, and embed it on a web page at width="1920" height="1080". On a high-density display such as a MacBook, the device has 2x pixel density but the video has 1920 by 1080 pixels, so each video pixel is twice as large as a device pixel. The text is less sharp than it would be on a low-density display. To match that sharpness you would need to render a 4K video.

Fix: use Remotion's output scaling to render at a higher pixel density without changing your composition:

npx remotion render --scale=2

The composition stays 1920 by 1080, and the output is 3840 by 2160, rendered at twice the density. This is the single biggest improvement for text-heavy video.

2. CRF, the main compression dial

The Constant Rate Factor controls quality. Lower is better quality and a larger file. Every codec has its own range and its own default, so the same number means different things:

So 23 looks very good on H.264 and terrible on WebM. Set it with --crf on the CLI or Config.setCrf() in the config file.

npx remotion render --crf=14

Hardware acceleration: if you enable it, you cannot set a CRF. Use --video-bitrate instead. The two are mutually exclusive.

3. JPEG quality

By default Remotion screenshots each frame as a JPEG at quality 80 on a scale of 0 to 100. Raise it with --jpeg-quality, or switch to PNG with --image-format=png, which is slower. PNG is also the format you need for a transparent video.

4. Colour accuracy

Export in bt709 for more accurate colours. The docs say this becomes the default in Remotion 5.0.

5. GIFs

GIFs only support a 256 colour palette, which is a large quality loss in itself. Make sure you are on at least v4.0.138 for the best colour accuracy, and choose a different format if the palette is not acceptable.

6. x264 preset

For H.264, --x264-preset controls the tradeoff between quality, speed and compression.

Recipe for crisp text

npx remotion render --scale=2 --crf=16 --jpeg-quality=95

These are starting values, not official recommendations. This renders at 2x density with a better CRF and JPEG quality. Expect a slower render and a larger file, since higher resolutions make renders slower (see why Remotion renders are slow). Tune it down to the point where the text still looks right in the place your viewers will watch.

Check it worked

View the result on the same kind of screen your audience uses, at the size they will see it. A render that looks sharp on a standard monitor can look soft on a Retina display, which is the case this guide is about.