In the properties panel you decide how a text looks and how it behaves when it gets longer or shorter. This matters most when the text comes from an input field and you don't know how much your users will type. How to add a text is described in Design elements (images, text, shapes).
You see the properties as soon as you select a text on the canvas or in the layers panel. They are in the sections Position & Size, Text, Appearance and Transforms.
Origin
At the top of the Position & Size section:
- Origin: the point in the text box where the text sits. The first three buttons set it horizontally (left, center, right), the other three vertically (top, middle, bottom). Top left by default.
- Position: where the Origin is on the canvas (X and Y).
- Size: width and height of the text box (W and H). The text always stays inside this box.
When the text is smaller than its box, it stays at the Origin. When it gets longer, it grows from there:
- Origin in the center: the text grows evenly to both sides.
- Origin bottom left: the text stays in the bottom-left corner and grows upwards and to the right.
This keeps text from a text input field in place the same way, no matter how much users write. The horizontal Origin and Align are linked: a left, center or right Origin is the same as left, centered or right alignment. If you change one, the other changes too.
Content
- Content: the text itself. When you make the text changeable with an input field, this content becomes the input field's default value.
Font
- Font Style: the weight and style of the font, for example Bold or Light italic. The list only shows what the chosen font has.
- Font Family: the font. The button shows its name, and a click opens the list of all fonts. The text switches to the chosen font right away. Inter by default.
To use your own brand font, see Upload a font: use your own fonts in templates.
Max Font Size
- Max Font Size: the largest size the text can have. If the text does not fit its box at this size, it gets smaller until it fits. It never gets bigger than the Max Font Size. 52 by default.
This lets one design hold text of any length. Longer entries from an input field get smaller on their own instead of spilling out of the box. How the text gets smaller depends on Wrap.
Align
- Align: aligns the lines left, center or right. Left by default. The text box stays where it is. Align also sets the horizontal Origin, so a longer text grows in the matching direction.
Spacing
Spacing has two fields. Type a number or drag on the field.
- Left field: the line height. At 100 the lines have the font's normal spacing. Higher values add room between lines, lower values move them closer. 120 by default.
- Right field: the letter spacing. 100 is the font's normal spacing. Higher values spread the letters apart, lower values pull them together. 100 by default.
Wrap
In the Text Settings row:
- Wrap: decides what happens when a text is wider than its box. On by default.
- On: the text breaks onto new lines to stay inside the box. If there is still not enough room, it gets smaller.
- Off: the text keeps the line breaks you typed and never breaks on its own. Instead, the whole text gets smaller until it fits the box.
Either way, the text stays inside its box and starts at its Max Font Size. With Wrap on, long text uses more lines. With Wrap off, it gets smaller.
Enforce Uppercase
- Enforce Uppercase: shows the text in capital letters only. The text you typed stays unchanged, only the display changes. This also works for text from an input field: whatever your users type shows in capitals. Off by default.
Curved Text
- Curved Text: makes the text run along a path. Off by default. When it is ticked, these appear below it:
- Path: the path the text follows.
- Baseline: how the letters sit on the path: Baseline, Middle or Hanging. Baseline by default.
- Offset: the distance of the text from the start (left) and the end (right) of the path. 0 by default.
How it works is described in Put text on a curve.
Color and background
In the Appearance section:
- Fill Color: the color of the letters. Black by default. Without the tick, the text has no fill.
- Stroke Color: an outline around the letters. Off by default.
- Background Color: a background behind the text. Off by default.
- Background Stroke Color: an outline around the background. Off by default.
As soon as the background has a color or an outline, more properties appear:
- Background Corner Radius: rounds the corners of the background.
- Background Clip: how far the background reaches. Text Frame fills the whole text box (default). Text puts one rectangle tightly around all lines. Per Line gives every line its own background.
- Background Padding: makes the background bigger by this distance.
For gradients, see Set colors and gradients.
Turn and slant lines
At the end of the Transforms section. If the section is closed, click Transforms. All values are in degrees and 0 by default.
- Rotate Text, Line °: turns each line on its own. The whole element stays straight.
- Rotate Text, Char °: turns each letter on its own. The line itself stays straight.
- Skew Lines, X ° and Y °: slants each line sideways (X) or up and down (Y).
Turned or slanted lines can reach past the text box. To turn the whole element, use Rotate further up in the same section.