> For the complete documentation index, see [llms.txt](https://docs.scaleflex.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scaleflex.com/studio/template-builder/building-a-template/text-layers.md).
# 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
1. Double-click a text layer on the canvas, or draw a new one with the text tool. The **Edit text** window opens.
2. Type. The window floats over the canvas and can be dragged by its title bar, so you can see what you are changing.
3. 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.
| Property | What it does |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Font** | The font family. The list holds Roboto, which ships with Template Builder, plus the fonts imported into your project. See [Fonts](/studio/template-builder/building-a-template/fonts.md) |
| **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 |
{% hint style="info" %}
Weight and italic come from the font file, not from a bold or italic button. A family only offers the faces you have imported, so if "Bold" is missing from **Weight & style**, import the bold file. See [Fonts](/studio/template-builder/building-a-template/fonts.md).
{% endhint %}
### 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.
| Property | What it does |
| ------------------ | ---------------------------------------------------------------------------------------------------------------- |
| **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](/studio/template-builder/variables.md).
### Where to go next
* [Fonts](/studio/template-builder/building-a-template/fonts.md) to add your own typefaces.
* [Variables](/studio/template-builder/variables.md) to make the text change per image.
* [Shape layers](/studio/template-builder/building-a-template/shape-layers.md) for text set inside a shape.
