Articles on: Templates and Layers

"Text That Grows: Autofit, Text Highlight and Partial Formatting"

When you send text via the API, Zapier, Make, n8n or a spreadsheet, the length changes from one render to the next. This article explains the three tools for this:

Autofit: adjusts the font size so the text fits the layer box.
Text Highlight: a background color behind the text that follows the text length.
Partial formatting: bold, color or a different font on only some words.

1. Autofit

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 set. Long text can overflow or get cut off.
- Fill Height (Recommended): the font size adjusts so the text fills the height of the box. Text wraps onto several lines. Best for titles, descriptions and any text of variable length.
- Fill Width: the font size adjusts so the text fills the width of the box on one line. Best for short labels, names and prices.
Optional: set Min Font Size and Max Font Size (in pixels). Setting 0 (or leaving blank) disables that limit.
Save the template.

Which mode should I use?

Text that can be long and should wrap: Fill Height.
Text that must stay on one line, or overflows horizontally: Fill Width.
You want all renders to look similar in size: set a Max Font Size so short texts do not become huge.
You want to keep text readable: set a Min Font Size. If the text is still too long at the minimum size, it can overflow, so make the box bigger.

Autofit via the API

You can also set autofit per render:

{
  "template": "YOUR_TEMPLATE_ID",
  "layers": {
    "title": {
      "text": "A title that can be short or very long",
      "autofit": "height",
      "min_font_size": 24,
      "max_font_size": 72
    }
  }
}

autofit: "height" or "width".
min_font_size / max_font_size: in pixels. 0 removes the limit.
The box size is the one defined in the editor. Passing width / height on the layer changes it.

You can also save min_font_size and max_font_size on the template with Update template. See all text properties in Create a render.

Autofit tips

Text too small? Make the text layer wider or taller in the editor, or set a Min Font Size.
Text breaks in the middle of a word? Set a Max Font Size, or make the box wider.
Autofit only changes the font size. It does not change the size of the text box. To make a box or background that follows the text, use Text Highlight (below). To move other layers when the text grows, use Anchor (see "Anchor: Keep Layers Positioned Relative to Each Other").

2. Text Highlight (background that follows the text)

A shape behind a text has a fixed size, so it does not grow or shrink with the text. If you want a colored background (a "pill", label or marker effect) that is exactly as long as the text, use Text Highlight.

In the editor

Select the text layer.
Click Effects in the toolbar.
Turn on Text Highlight.
Set the Color, Padding X and Padding Y.
Save the template.

The highlight follows each line of text, so it gets longer or shorter with the text you send.

Via the API

Change the highlight color per render with text_highlight_color:

{
  "layers": {
    "label": {
      "text": "New arrival",
      "text_highlight_color": "#FFE600"
    }
  }
}

text_highlight_color only works on text layers that have Text Highlight turned on in the template.

If you need a real box whose width matches the text (not a highlight), there is no automatic option. Calculate the width in your own system and send width for the shape layer.

3. Partial formatting (bold, color or font on some words)

In the editor

Double-click the text layer to edit it.
Select the words you want to change.
Change the color, font, font weight, or use bold, italic, underline or strikethrough in the toolbar.

Only the selected words change.

Important: when you replace the text via the API, the new text replaces the old content, including formatting you applied to parts of the text in the editor. To keep partial formatting in API renders, send it in the text (see below).

Via the API: HTML tags

The text property accepts these inline tags:

 or  for bold
 or  for italic
 for underline
<s> for strikethrough
 for inline styles such as color
  for a line break

{
  "layers": {
    "headline": {
      "text": "Save <b>50%</b> on <span style=\"color: #E11D48\">all shoes</span>"
    }
  }
}

Do not wrap the text in  tags, and do not use <a href> for links (use the layer link property for clickable PDFs).

Via the API: secondary style with asterisks

Wrap words in *asterisks* and set color_2 and/or font_family_2. The words between asterisks get the secondary style:

{
  "layers": {
    "headline": {
      "text": "Hello *World*",
      "color": "#000000",
      "color_2": "#FF0000",
      "font_family_2": "Playfair Display"
    }
  }
}

Result: "Hello" in black, "World" in red Playfair Display.

FAQ

Q: My text is cut off or overflows. What do I do?
A: Select the text layer, click AUTOFIT and choose Fill Height (or Fill Width for one-line text). Make the box larger if the text gets too small.

Q: How do I stop short texts from becoming huge with autofit?
A: Set a Max Font Size in the AUTOFIT menu, or send max_font_size in the API.

Q: Can the text box get wider when the text is longer?
A: No. Autofit only changes the font size. Use Text Highlight for a background that follows the text, or Anchor to move other layers.

Q: How do I make one word bold in a sentence via API?
A: Use word in the text value, or wrap the word in *asterisks* and set color_2 / font_family_2.

Q: Text Highlight color does not change via API.
A: Turn on Text Highlight for that layer in the editor (Effects > Text Highlight) and save. Then text_highlight_color works.

Q: Why did the bold word I set in the editor disappear in my render?
A: The text you send via API replaces the whole text, including editor formatting. Send the formatting in the text with tags like .

Updated on: 01/10/2026

Was this article helpful?

Thank you!