Text Autofit Feature
Autofit automatically adjusts the font size of a text layer so the text fits inside the layer box. It is made for dynamic text sent via the API, Zapier, Make, n8n or a spreadsheet, where the length changes from one render to the next.
Autofit changes only the font size. It does not change the size or position of the text box.
Turn on autofit in the editor
- Select the text layer.
- Click AUTOFIT in the toolbar.
- Choose a Text AutoFit Mode:
- Off: the font size stays as you set it. Long text can overflow or get cut off.
- Fill Height (Recommended): the font size is adjusted so the text fills the height of the box. The text wraps onto several lines. Best for long or variable text (titles, descriptions, quotes).
- Fill Width: the font size is adjusted so the text fills the width of the box on one line. Best for short text (names, labels, prices).
- Optional: set Min Font Size and Max Font Size (in pixels). A value of 0 disables that limit.
- Save the template.
How autofit works
- Fill Height finds the largest font size at which the wrapped text fits the box height. It can shrink long text and also grow short text. Without a Max Font Size, short text can grow up to about twice the font size set in the editor.
- Fill Width finds the largest font size at which the text fits the box width on one line. Short text can become very large, so set a Max Font Size.
- Min Font Size and Max Font Size are applied to the result. If the text needs a smaller size than the minimum to fit, it stays at the minimum and can overflow. In that case make the box bigger or shorten the text.
- Autofit runs when the text changes: when you type in the editor, when you change the autofit mode, and at render time when you send
textfor that layer.
The font size field while autofit is on
While autofit is on, the font size is calculated automatically. A size you type in the toolbar's font size field is replaced the next time autofit runs (for example when the text changes). To control the size, use Min Font Size and Max Font Size instead of the font size field.
Autofit via the API
Autofit set in the editor is applied automatically when you send new text for the layer. You can also set or change it per render:
{
"template": "YOUR_TEMPLATE_ID",
"layers": {
"headline": {
"text": "Your dynamic title of any length",
"autofit": "height",
"min_font_size": 24,
"max_font_size": 72
},
"price": {
"text": "$49.90",
"autofit": "width",
"max_font_size": 60
}
}
}Property | Description |
|---|---|
|
|
| Minimum font size in pixels. |
| Maximum font size in pixels. |
| Optional. Overrides the box size defined in the editor, which autofit uses. |
Do not send font_size with autofit
An explicit font_size in the API request takes precedence over autofit: the text is rendered at that exact size and autofit does not apply. Omit font_size when you want autofit to control the size.
To keep a consistent size across renders while still shrinking text that is too long, use max_font_size instead of font_size:
{
"layers": {
"title": {
"text": "Short or long title",
"max_font_size": 48
}
}
}With autofit on in the template, short titles never go above 48 px and long titles shrink to fit.
You can also save min_font_size and max_font_size on the template itself with Update template. Full reference: Create a render.
Which mode should I use?
Situation | Mode |
|---|---|
Paragraphs, descriptions, titles that may wrap | Fill Height |
Single-line names, labels, prices, buttons | Fill Width |
Fixed-size text that never changes length | Off |
Same look on every render, shrink only when too long | Fill Height + Max Font Size |
Troubleshooting
Autofit is not working via the API
- Make sure you are not sending
font_sizefor that layer. Remove it and usemax_font_sizeif you need a size limit. - Check that the layer name in your request matches the template exactly, and that you send
textfor it. - Check that autofit is turned on for the layer (AUTOFIT menu) and the template is saved, or send
"autofit": "height"in the request.
Short text becomes too big
Set a Max Font Size in the editor or send max_font_size.
Text becomes too small
Make the text box larger in the editor, set a Min Font Size, or shorten the text. Fill Height usually gives larger text than Fill Width for long text.
A word breaks in the middle
The font size is too large for the box width. Set a Max Font Size or make the box wider.
Text still overflows
The text needs a size smaller than your Min Font Size. Lower or remove the minimum, or make the box bigger.
Other layers overlap when the text grows
Autofit does not move other layers. Use Anchor to keep layers positioned relative to the text (see "Anchor: Keep Layers Positioned Relative to Each Other").
I need a background that follows the text length
Use Text Highlight (Effects > Text Highlight). See "Text That Grows: Autofit, Text Highlight and Partial Formatting".
Render differs slightly from the editor
Different fonts have different letter widths. Test the template with your shortest and longest expected texts in the Playground.
FAQ
Q: How do I make text fit automatically in its box?
A: Select the text layer, click AUTOFIT in the toolbar and choose Fill Height (or Fill Width for one-line text). Save the template.
Q: What is the difference between Fill Height and Fill Width?
A: Fill Height wraps the text on several lines and fits the box height. Fill Width keeps the text on one line and fits the box width.
Q: Why is autofit ignored in my API render?
A: You are probably sending font_size. An explicit font_size takes precedence over autofit. Remove it, and use max_font_size to limit the size.
Q: Can I change the font size while autofit is on?
A: The font size is calculated automatically. Use Min Font Size and Max Font Size to control it.
Q: Does autofit make the text box bigger?
A: No. It only changes the font size inside the box.
Updated on: 01/10/2026
Thank you!