> ## 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 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: 1. **Autofit**: adjusts the font size so the text fits the layer box. 2. **Text Highlight**: a background color behind the text that follows the text length. 3. **Partial formatting**: bold, color or a different font on only some words. ## 1. Autofit ### 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 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. 4. Optional: set **Min Font Size** and **Max Font Size** (in pixels). Setting 0 (or leaving blank) disables that limit. 5. 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: ```json { "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](https://templated.io/docs/templates/update/). See all text properties in [Create a render](https://templated.io/docs/renders/create/). ### 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 1. Select the text layer. 2. Click **Effects** in the toolbar. 3. Turn on **Text Highlight**. 4. Set the **Color**, **Padding X** and **Padding Y**. 5. 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`: ```json { "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 1. Double-click the text layer to edit it. 2. Select the words you want to change. 3. 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 - `` for strikethrough - `` for inline styles such as color - `
` for a line break ```json { "layers": { "headline": { "text": "Save 50% on all shoes" } } } ``` Do not wrap the text in `

` tags, and do not use `` 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: ```json { "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 ``.