Chapter 888: fitText()

Core Idea

_Part of the @remotion/layout-utils package. Available from v4.

Key Concepts

• API
• text
• withinWidth
• fontFamily
• fontWeight?
• letterSpacing?
• fontVariantNumeric?
• textTransform<AvailableFrom v="4.0.140"/>

Code Examples

const text = "Hello World";
const width = 100;
const fontFamily = "Arial";
const fontWeight = "bold";

const { fontSize } = fitText({
  text,
  withinWidth: width,
  fontFamily: fontFamily,
  fontWeight: fontWeight,
  textTransform: "uppercase",
});

// Example markup:
<div
  style={{
    fontSize,
    width,
    fontFamily,
    fontWeight,
    textTransform: "uppercase",
  }}
>
  {text}
</div>;

• What it demonstrates: Usage pattern for fitText() from the official docs.

Key Takeaways

1. Understand api when working with fitText().
2. Understand text when working with fitText().
3. Understand withinwidth when working with fitText().
4. Understand fontfamily when working with fitText().
5. Understand fontweight? when working with fitText().

Connects To

• Best Practices: related page in the Layout Utils (@remotion/layout-utils) section.
• Debug: related page in the Layout Utils (@remotion/layout-utils) section.
• Fill Text box: related page in the Layout Utils (@remotion/layout-utils) section.