Text & Typography
Adding a text element
Section titled “Adding a text element”Press T or click the Text tool in the toolbar, then click the canvas. A text box reading “Add text here” appears where you clicked and is selected, with the Text Content box in the Properties panel ready for typing.
The Typography section
Section titled “The Typography section”Select a text element and scroll to the Typography section of the Properties panel. It sits below the Variable and Text sections and above Position & Size; there are no tabs.
Choose from 57 curated Google Fonts in the Font dropdown. The font name is rendered in its own typeface for easy identification. All 57 cover Latin; 49 also cover Latin Extended (Polish, Czech, Turkish, …), 33 Vietnamese, 27 Cyrillic and 13 Greek. The Noto Sans families (Noto Sans plus nine script-specific companions) cover CJK, Arabic, Hebrew, Thai, Devanagari and Bengali; a few other fonts happen to include one of those scripts too. See Character support below for what happens with a character a font doesn’t cover.
Character support
Section titled “Character support”Not every font’s glyph set covers every character. When the chosen font is missing a glyph, a shared fallback chain is tried in order — Noto Sans, Noto Sans SC, Noto Sans KR, Noto Sans Arabic, Noto Sans Hebrew, Noto Sans Thai, Noto Sans Devanagari, Noto Sans Bengali, Noto Emoji, Noto Sans Symbols, Noto Sans Symbols 2, ending in Adobe’s NotDef glyph — and the character is drawn from the first font in that chain that has it. The designer and the generated image use the exact same chain, so what you see while editing matches what gets rendered; the designer never falls back to a system font.
The Typography panel reports this per element, below the Font section:
- “Not in <font>, rendered with a fallback font: …” — characters drawn from a fallback font rather than the one you picked.
- “Cannot be rendered (shown as ☐): …” — characters with no glyph anywhere in the chain. They render as the empty ☐ box (Adobe’s NotDef glyph), both in the designer and in the exported image.
A few things worth knowing about the fallback chain:
- Emoji — an emoji built from a ZWJ sequence or a VS16 variation selector (e.g. a family emoji, or a symbol followed by the U+FE0F variation selector) resolves through Noto Emoji, which is monochrome only — there is no colour emoji. A sequence Noto Emoji doesn’t recognize falls back further and shows its component glyphs separately instead of one combined emoji.
- Fallback weights — most fonts in the chain ship only the 400 (regular) and 700 (bold) weights (Noto Sans Symbols 2 and Adobe NotDef ship a single Regular face only). Text set to another weight (e.g. 300 or 900) that needs a fallback glyph snaps to the closest available weight, so that glyph can look very slightly different between the designer and the rendered image.
- Long unbroken CJK/Thai text — Auto-Fit and word wrapping look for spaces to break a line on. CJK or Thai text with no spaces stays on one line under the default
wordwrap; give the element acharwrap instead so it can break between characters. (wrapis a schema/API property; it isn’t exposed as a Typography panel control yet.) - Han characters (Chinese/Japanese/Korean) — a font with no CJK glyphs of its own falls back to Noto Sans SC, which draws Han characters in their Simplified Chinese form. For Japanese, Traditional Chinese, or Korean regional forms, pick Noto Sans JP, Noto Sans TC, or Noto Sans KR directly as the element’s font instead of relying on fallback.
Auto-Fit Text
Section titled “Auto-Fit Text”Auto-Fit automatically scales the font size to fill the text box. This is especially useful when the text is a variable (e.g. {{product_name}}) and the content length is unpredictable.
Toggle: The Auto-Fit Text button shows ON / OFF.
When ON, the following fields become available:
| Field | Description |
|---|---|
| Min Size | Minimum font size in px (the text never shrinks below this) |
| Max Size | Maximum font size in px (the text never grows above this) |
| Weight | Font weight (same as without Auto-Fit) |
| Overflow | What happens if text still doesn’t fit: Visible (allow overflow), Clip (cut off), Ellipsis (…) |
| Ellipsis Character | The character shown for Ellipsis mode (default: …) |
When OFF: Size (px, 8–200) and Weight fields appear directly.
Internal Padding
Section titled “Internal Padding”Four fields (Top, Right, Bottom, Left in px) add space between the text and the edge of the text box. Useful for keeping text from touching the edges of a colored background shape.
| Control | Options |
|---|---|
| Align | Left / Center / Right / Justify |
| Style | Bold, Italic, Underline, Strikethrough (multi-select) |
Spacing
Section titled “Spacing”| Control | Description |
|---|---|
| Line Height | Multiplier (0.5–3, default 1 = normal line height) |
| Letter Spacing | Extra spacing between characters in px (−10 to 50) |
A color picker sets the text fill color.
Editing text content
Section titled “Editing text content”The Text section, above Typography, holds the Text Content box. Type or paste your text there. Changes are reflected on the canvas immediately.
For variable-bound text the box is labelled with the {{variableName}} badge and edits the variable’s default value: what the canvas shows, and what a render uses when a request sends no value for that variable. See Variable Settings.