Issues with blurry text on mobile

[step325]

Hi everyone! I’ve created some videos, but I’m having issues with the text/captions. They look "pixelated" (or grainy). I’m not sure why. I’ve tried searching online but can’t seem to find a solution.

These are my settings for desktop videos:

• Formato: MP4
• Codec video: H.264
• Pixel format: yuv420p
• Risoluzione: 1920 x 1080
• Risoluzione provata: 1280 x 720
• Aspect ratio: 16:9
• FPS: 30
• Bitrate video: 16M
• Max rate: 20M
• Buffer size: 32M
• Preset x264: slow

Comando tipo:
remotion render output.mp4
--codec h264
--pixel-format yuv420p
--video-bitrate 16M
--encoding-max-rate 20M
--encoding-buffer-size 32M
--x264-preset slow

And these are the settings for mobile:

• Formato: MP4
• Codec video: H.264
• Pixel format: yuv420p
• Risoluzione: 1080 x 1350
• Aspect ratio: 4:5
• FPS: 30
• Qualità: CRF 11
• Max rate: 40M
• Buffer size: 80M
• Preset x264: slow

Comand:
remotion render output.mp4
--codec h264
--pixel-format yuv420p
--crf 11
--encoding-max-rate 40M
--encoding-buffer-size 80M
--x264-preset slow

I’m attaching some screenshots of mobile versions. Honestly, I’m stuck and don't know how to fix this.

[JulyanXu]

Two things stand out from your settings:

1. 1080 x 1350 can still look soft on phones. Many mobile screens are high-density, so a 1080px-wide video may be displayed across roughly twice as many physical pixels. Remotion's quality guide calls this out for text specifically: to get desktop-like sharpness on high-density displays, render at a higher pixel density. Try output scaling:

remotion render ... output.mp4 \
  --codec h264 \
  --pixel-format yuv420p \
  --crf 11 \
  --x264-preset slow \
  --scale=2

That would render your 1080x1350 composition as 2160x2700 while preserving layout proportions. For social platforms, you may later downscale/re-encode, but this is a good diagnostic: if text becomes sharp before upload/platform compression, the issue was source resolution.

2. If the artifacts are already visible in the local Remotion output, also test the frame capture quality. Remotion screenshots default to JPEG quality 80 before encoding. For thin captions, JPEG artifacts can survive into the video. Try either:

--jpeg-quality=100

or:

--image-format=png

PNG is slower, but useful to confirm whether the browser-frame capture stage is causing the grain.

Other checks I would do:

• Make sure text positions/sizes are integer pixels where possible; subpixel transforms can make text shimmer or look soft.
• Avoid very thin font weights on mobile captions.
• Keep yuv420p if you need maximum H.264 compatibility, but be aware that colored text edges can look worse because of chroma subsampling. Test white text on a solid/dark background to isolate that variable.
• If screenshots/stills are sharp but only the encoded MP4 is bad, compare --crf=8 and --image-format=png; if it still persists, then it is likely playback scaling or platform recompression rather than Remotion rendering.

[Akkikens]

This is usually a devicePixelRatio issue — the Player renders at CSS-pixel resolution, so on a 2–3x mobile screen the output gets upscaled and text goes soft.

Fixes that have worked for me:

• Define the composition at 2–3x dimensions and scale the Player container back down with CSS (transform: scale() or just a smaller width) — the canvas then has enough physical pixels.
• If it's an exported video rather than the Player, bump the render resolution with --scale=2.
• Check that the text isn't inside an element with will-change or a 3D transform — that forces the browser to rasterize it at layout size and then scale the bitmap, which blurs it.

The first one is almost always the culprit on mobile.

[JulyanXu]

I'm Junyang. I have already received your letter.