remotion-dev / skills

remotion-markup

Structure Remotion scenes with markup patterns for layout, typography, and reusable video UI.

View source Video Remotion

Install

npx skills add https://github.com/remotion-dev/skills --skill remotion-markup

metadata: tags: measure, text, layout, dimensions, fitText, fillTextBox

Measuring text in Remotion

Prerequisites

Install @remotion/layout-utils if it is not already installed:

Measuring text dimensions

Use measureText() to calculate the width and height of text:

Results are cached - duplicate calls return the cached result.

Fitting text to a width

Use fitText() to find the optimal font size for a container:

tsx

import { fitText } from "@remotion/layout-utils";
const { fontSize } = fitText({  text: "Hello World",  withinWidth: 600,  fontFamily: "Inter",  fontWeight: "bold",});
return (  <div    style={{      fontSize: Math.min(fontSize, 80), // Cap at 80px      fontFamily: "Inter",      fontWeight: "bold",    }}  >    Hello World  </div>);

Checking text overflow

Use fillTextBox() to check if text exceeds a box:

tsx

import { fillTextBox } from "@remotion/layout-utils";
const box = fillTextBox({ maxBoxWidth: 400, maxLines: 3 });
const words = ["Hello", "World", "This", "is", "a", "test"];for (const word of words) {  const { exceedsBox } = box.add({    text: word + " ",    fontFamily: "Arial",    fontSize: 24,  });  if (exceedsBox) {    // Text would overflow, handle accordingly    break;  }}

Best practices

Load fonts first: Only call measurement functions after fonts are loaded.

tsx

import { loadFont } from "@remotion/google-fonts/Inter";
const { fontFamily, waitUntilDone } = loadFont("normal", {  weights: ["400"],  subsets: ["latin"],});
waitUntilDone().then(() => {  // Now safe to measure  const { width } = measureText({    text: "Hello",    fontFamily,    fontSize: 32,  });});

Use validateFontIsLoaded: Catch font loading issues early:

Match font properties: Use the same properties for measurement and rendering:

tsx

const fontStyle = {  fontFamily: "Inter",  fontSize: 32,  fontWeight: "bold" as const,  letterSpacing: "0.5px",};
const { width } = measureText({  text: "Hello",  ...fontStyle,});
return (  <div style={fontStyle}>    Hello  </div>);

Avoid padding and border: Use outline instead of border to prevent layout differences:

Design engineering

Frameworks & libraries