Text layers
A text layer holds words and the type settings that render them. Most of a template's variable content lives here.
Editing the text
Double-click a text layer on the canvas, or draw a new one with the text tool. The Edit text window opens.
Type. The window floats over the canvas and can be dragged by its title bar, so you can see what you are changing.
Click Apply, or press Cmd/Ctrl + Enter.
Cancel discards everything you did in the window, including formatting.
Why the text looks plain while you edit it
The Edit text window is for writing, not for previewing. It always shows your text at one fixed, readable size, in regular weight and in the window's own text color. Only the layer's font family carries over, so you can tell which typeface you are working in.
This means formatting you apply does not change how the text looks in the window. Make a word bold, 120 px or red, and in the window it looks the same as the words around it. The formatting has been applied: the canvas behind the window shows the real result, and it updates as you work. The toolbar also reports the formatting of whatever you select, so select a word to check what it carries.
The one mark you do see in the window is a dotted underline on text whose color comes from a variable. Hover it to see which variable.
Keeping the window neutral means white text on a dark design stays readable while you type, and a very large or very small size does not make the window hard to work in.
Typography
Select a text layer and the properties panel shows a Typography section.
Font
The font family. The list holds Roboto, which ships with Template Builder, plus the fonts imported into your project. See Fonts
Weight & style
Picks one installed face of that family, for example "Roboto Medium Italic". Only faces you actually have appear
Size
Font size in pixels
Color
Text color. The picker includes an eyedropper for sampling a color on screen
Paragraph
The Paragraph section controls how the text sits inside its box.
Three of these work together when the text is longer than its box: wrapping breaks it onto more lines, shrinking reduces the size within the limit you set, and overflow decides what happens to whatever is still too big.
Horizontal
Aligns left, center or right inside the box
Vertical
Aligns top, middle or bottom inside the box
Line height
Line spacing as a multiple of the font size
Letter spacing
Extra space between characters, in pixels
Baseline shift
Lifts or lowers the text from its baseline. Positive raises it for superscript, negative lowers it for subscript
Word wrap
Break word wraps text onto the next line at the edge of the box; None keeps it on one line
Shrink to fit
How much the text may shrink to fit the box, as a percentage from 0 to 90. 0 turns shrinking off
Text overflow
Clip cuts off anything past the edge of the box; Visible lets it spill out
Formatting part of the text
The toolbar inside the Edit text window carries font family, size, weight and style, color, letter spacing and baseline shift, and it applies to whatever is selected.
With text selected, the change affects only that selection. This is how you make one word a different color, or a currency symbol smaller than the number after it.
With the caret on an empty line, the change applies to whatever you type next on that line. There is nothing on an empty line to select, so this is how you start a new line in a different style.
With nothing selected anywhere else, the toolbar is grayed out. To change the whole layer, use the Typography section in the properties panel instead: with nothing selected, a change there applies to every character and clears any per-selection formatting for that property, which is the quickest way back to a consistent layer.
When a selection mixes values, the toolbar shows that: a size field goes empty, a color swatch shows as mixed. Choosing a value applies it across the whole selection.
Inserting a variable
Text is where variables usually go. In the Edit text window, open the Variable menu:
Pick an existing variable to insert it at the cursor. It appears as a chip showing its slug, and renders as the value.
Choose Create new variable... to make one on the spot. If you had text selected, it is used as the new variable's default value.
Whole-layer variables can also be created from the layer's menu in the Layers panel. See Variables.
Where to go next
Fonts to add your own typefaces.
Variables to make the text change per image.
Shape layers for text set inside a shape.
Last updated