Text Autofit Feature

Automatically adjust font sizes to fit text within layer boundaries. Perfect for dynamic content where text length varies.

Autofit Modes

Height Autofit

Adjusts font size so text fits vertically within the text box:

In the Editor:

Select a text layer → Text panel → Autofit → Height

Via API:

{
  "layer": "headline",
  "text": "Your Dynamic Title",
  "autofit": "height"
}

Width Autofit

Adjusts font size so text fits horizontally on a single line:

In the Editor:

Select a text layer → Text panel → Autofit → Width

Via API:

{
  "layer": "title",
  "text": "Fit This On One Line",
  "autofit": "width"
}

Font Size Constraints

Control the range of automatic sizing:

• Min Font Size — Smallest allowed size (prevents unreadable text)
• Max Font Size — Largest allowed size (prevents oversized text)

{
  "layer": "headline",
  "text": "Dynamic Content",
  "autofit": "height",
  "min_font_size": 12,
  "max_font_size": 72
}

When to Use Each Mode

How It Works

Height Autofit

1. Starts with the current font size
2. Reduces size until all text fits vertically
3. Respects line height and line breaks
4. Stops at min font size if set

Width Autofit

1. Starts with the current font size
2. Reduces size until longest line fits horizontally
3. Considers letter spacing
4. Stops at min font size if set

Tips for Best Results

1. Set appropriate constraints — Use min/max font sizes to ensure readability
2. Consider the content range — Test with shortest and longest expected text
3. Height for multi-line — Use height autofit for text that wraps
4. Width for titles — Use width autofit for single-line headers
5. Line height matters — Height autofit considers line height in calculations

Example: Product Cards

For product cards where titles vary in length:

{
  "layers": [
    {
      "layer": "product-name",
      "text": "{{product.name}}",
      "autofit": "height",
      "min_font_size": 16,
      "max_font_size": 32
    },
    {
      "layer": "price",
      "text": "{{product.price}}",
      "autofit": "width"
    }
  ]
}

Autofit vs Fixed Font Size

If you set font_size explicitly in the API request, it takes precedence over autofit. The autofit will not override a specified font size.

{
  "layer": "title",
  "text": "Fixed Size",
  "font_size": "48px",
  "autofit": "height"
}

In this case, the font size stays at 48px — autofit is ignored.

Troubleshooting

Text too small?

• Check min_font_size isn't set too low
• Reduce text length or increase box size
• Consider using height autofit instead of width

Text overflowing?

• Make sure autofit mode is enabled
• Check that font_size isn't explicitly set
• Verify the text box has sufficient dimensions

Inconsistent sizing?

• Different fonts have different character widths
• Set consistent min/max constraints across similar layers

Documentation: https://templated.io/docs/renders/create/

Updated on: 11/01/2026