Skip to main content

measureText()

Part of the @remotion/layout-utils package.

Calculates the width and height of specified text to be used for layout calculations. Only works in the browser, not in Node.js or Bun.

Example​

tsx
import { measureText } from "@remotion/layout-utils";
 
const text = "remotion";
const fontFamily = "Arial";
const fontWeight = "500";
const fontSize = 12;
const letterSpacing = "1px";
 
measureText({
  text,
  fontFamily,
  fontWeight,
  fontSize,
  letterSpacing,
}); // { height: 14, width: 20 }
tsx
import { measureText } from "@remotion/layout-utils";
 
const text = "remotion";
const fontFamily = "Arial";
const fontWeight = "500";
const fontSize = 12;
const letterSpacing = "1px";
 
measureText({
  text,
  fontFamily,
  fontWeight,
  fontSize,
  letterSpacing,
}); // { height: 14, width: 20 }

API​

This function has a cache. If there are two duplicate arguments inputs, the second one will return the first result without repeating the calculation.

The function takes the following options:

text​

Required string

Any string.

fontFamily​

Required string

Same as CSS style font-family

fontSize​

Required number / string

Same as CSS style font-size. Since v4.0.125, strings are allowed too, before only numbers.

fontWeight​

string

Same as CSS style font-weight

letterSpacing​

string

Same as CSS style font-spacing.

fontVariantNumericv4.0.57​

string

Same as CSS style font-variant-numeric.

textTransformv4.0.140​

string

Same as CSS style text-transform.

validateFontIsLoaded?v4.0.136​

boolean

If set to true, will take a second measurement with the fallback font and if it produces the same measurements, it assumes the fallback font was used and will throw an error.

additionalStylesv4.0.140​

object, optional

Additional CSS properties that affect the layout of the text.

Return value​

An object with height and width

Important considerations​

See Best practices to ensure you get correct measurements.

See also​