How to Enable Autofit on a New or Existing Text Box
Autofit allows text to automatically adjust in size so it fits within a fixed text box width. This is helpful when you want users to enter different amounts of text without the text extending outside the intended design area.
Autofit can be enabled directly from the left menu when working with a text box.
When to use this
Common use cases include:
- Keeping user-entered text within a set space
- Maintaining consistent template layouts
- Allowing flexible text entry without manual font size adjustments
- Reducing overflow issues in editable templates
How Autofit works
When Autofit is enabled, Design Huddle adjusts the font size as needed so the text stays within the text box. The text box width remains fixed, and the text scales down when more content is added.
Autofit can also be configured with additional limits, including maximum line count, maximum height, font size limits, and a truncation suffix.
How to enable Autofit
To enable Autofit on a text box, follow these steps:
- Open the Project or template in the editor.
- Select the text box you want to update.
- In the left menu, locate Auto Fit.
- Toggle Auto Fit on.
- Click the settings icon next to Auto Fit.
- Configure the available Autofit settings.
Once enabled, the selected text box will automatically adjust the font size to help keep the content within the text box boundaries.
Autofit settings
The following settings may be available when configuring Autofit:
- Max Line Count: Sets the maximum number of lines allowed in the text box.
- Max Height: Sets the maximum height that the text content can use.
- Font Size Limits: Sets the minimum and maximum font size Autofit can use when resizing text.
- Truncation Suffix: Adds a suffix, such as ellipses, when text is truncated due to minimum font size limit being hit.
When Max Height is enabled, the current height of the text box is used as the starting value. When Max Line Count is enabled, the current line count is used as the starting value.
Changing or disabling Autofit
To change Autofit settings, select the text box, open the Auto Fit settings, and update the available options.
To disable Autofit, select the text box and toggle Auto Fit off.
Best practices
For best results, set a minimum font size that keeps the text readable.
This can help prevent text from becoming too small when users enter longer content.