1---
2name: measuring-text
3description: Measuring text dimensions, fitting text to containers, and checking overflow
4metadata:
5  tags: measure, text, layout, dimensions, fitText, fillTextBox
6---
7 
8# Measuring text in Remotion
9 
10## Prerequisites
11 
12Install @remotion/layout-utils if it is not already installed:
13 
14```bash
15npx remotion add @remotion/layout-utils
16```
17 
18## Measuring text dimensions
19 
20Use `measureText()` to calculate the width and height of text:
21 
22```tsx
23import { measureText } from "@remotion/layout-utils";
24 
25const { width, height } = measureText({
26  text: "Hello World",
27  fontFamily: "Arial",
28  fontSize: 32,
29  fontWeight: "bold",
30});
31```
32 
33Results are cached - duplicate calls return the cached result.
34 
35## Fitting text to a width
36 
37Use `fitText()` to find the optimal font size for a container:
38 
39```tsx
40import { fitText } from "@remotion/layout-utils";
41 
42const { fontSize } = fitText({
43  text: "Hello World",
44  withinWidth: 600,
45  fontFamily: "Inter",
46  fontWeight: "bold",
47});
48 
49return (
50  <div
51    style={{
52      fontSize: Math.min(fontSize, 80), // Cap at 80px
53      fontFamily: "Inter",
54      fontWeight: "bold",
55    }}
56  >
57    Hello World
58  </div>
59);
60```
61 
62## Checking text overflow
63 
64Use `fillTextBox()` to check if text exceeds a box:
65 
66```tsx
67import { fillTextBox } from "@remotion/layout-utils";
68 
69const box = fillTextBox({ maxBoxWidth: 400, maxLines: 3 });
70 
71const words = ["Hello", "World", "This", "is", "a", "test"];
72for (const word of words) {
73  const { exceedsBox } = box.add({
74    text: word + " ",
75    fontFamily: "Arial",
76    fontSize: 24,
77  });
78  if (exceedsBox) {
79    // Text would overflow, handle accordingly
80    break;
81  }
82}
83```
84 
85## Best practices
86 
87**Load fonts first:** Only call measurement functions after fonts are loaded.
88 
89```tsx
90import { loadFont } from "@remotion/google-fonts/Inter";
91 
92const { fontFamily, waitUntilDone } = loadFont("normal", {
93  weights: ["400"],
94  subsets: ["latin"],
95});
96 
97waitUntilDone().then(() => {
98  // Now safe to measure
99  const { width } = measureText({
100    text: "Hello",
101    fontFamily,
102    fontSize: 32,
103  });
104});
105```
106 
107**Use validateFontIsLoaded:** Catch font loading issues early:
108 
109```tsx
110measureText({
111  text: "Hello",
112  fontFamily: "MyCustomFont",
113  fontSize: 32,
114  validateFontIsLoaded: true, // Throws if font not loaded
115});
116```
117 
118**Match font properties:** Use the same properties for measurement and rendering:
119 
120```tsx
121const fontStyle = {
122  fontFamily: "Inter",
123  fontSize: 32,
124  fontWeight: "bold" as const,
125  letterSpacing: "0.5px",
126};
127 
128const { width } = measureText({
129  text: "Hello",
130  ...fontStyle,
131});
132 
133return <div style={fontStyle}>Hello</div>;
134```
135 
136**Avoid padding and border:** Use `outline` instead of `border` to prevent layout differences:
137 
138```tsx
139<div style={{ outline: "2px solid red" }}>Text</div>
140```
141