> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.templated.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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

1. Select the text layer.
2. Click **AUTOFIT** in the toolbar.
3. 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).
4. Optional: set **Min Font Size** and **Max Font Size** (in pixels). A value of 0 disables that limit.
5. 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 `text` for 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:

```json
{
  "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 |
|----------|-------------|
| `autofit` | `"height"` or `"width"` |
| `min_font_size` | Minimum font size in pixels. `0` removes the minimum. |
| `max_font_size` | Maximum font size in pixels. `0` removes the maximum. |
| `width` / `height` | 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`:

```json
{
  "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](https://templated.io/docs/templates/update/). Full reference: [Create a render](https://templated.io/docs/renders/create/).

## 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_size` for that layer. Remove it and use `max_font_size` if you need a size limit.
- Check that the layer name in your request matches the template exactly, and that you send `text` for 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.