Text layers: formatting and styling

This tutorial covers everything in a text layer's properties panel: adding and editing text, choosing fonts and colors, alignment, auto-scale, word wrap, and the typographic fine-tuning controls — tracking, glyph stretch, and line spacing.

Add and edit text

Click Text in the editor toolbar. A new layer appears in the center of the canvas with placeholder text, centered, at 32 px.
Double-click the layer on the canvas to type directly, or select it and edit the Content field in the properties panel.

If you check Dynamic value, the layer's text is filled in per design (by name, roster data, or your integration) and the Content field becomes Placeholder Text — what you type there only shows while designing. For most decorative text, leave Dynamic value off.

Font, size, and color

A text layer selected with the properties panel showing font, size, fill color, and alignment controls

Font — click the font name to open the Font Manager, where you can pick a Google font or one of your uploaded fonts. See Using custom & Google fonts (Font Manager).
Size — set the font size in pixels (8–400). The field is disabled while Auto Scale is on, because the editor is choosing the size for you.
Fill — choose Solid for a single color, Gradient for a multi-color blend, or Pattern to fill the letters with an image. Gradients have their own article: Text fill gradients.
Stroke — an outline color and width around the letters; set the width to 0 for no outline.
Shadow — toggle the Shadow section on for a drop shadow with color, blur, and offset controls.

Alignment and case

Align — Left, Center, or Right within the layer's frame. New text layers default to Center.
V-Align — where the text sits vertically inside the frame: top, middle, or bottom.
Case — force the display case: Aa (as typed), AA (uppercase), or lowercase. Handy when roster data arrives in mixed case but the design calls for all-caps.

Auto Scale and word wrap

Auto Scale sizes the text automatically so it always fits the layer's frame — the go-to setting for names and other dynamic text, where "SAWYER-WILLIAMSON" has to fit the same space as "LI". With Auto Scale on:

Long text shrinks to fit; short text fills the frame.
Dragging the layer's resize handles rescales the text live — resize the frame and the text follows.

Word Wrap controls what happens when text is wider than the frame:

On — text breaks onto multiple lines.
Off — text stays on a single line (and, with Auto Scale, shrinks to fit instead of wrapping). This is usually what you want for player names.

Fine-tuning: tracking, stretch, and line spacing

Tracking, H Scale, V Scale, and Line Spacing controls in the text properties panel

Tracking — the spacing between characters. Positive values spread letters apart; negative values tighten them. Useful for spaced-out all-caps headlines.
H Scale / V Scale — stretch or compress the letterforms horizontally or vertically (50–200%). H Scale below 100% condenses text to fit narrow spaces; V Scale above 100% gives tall, athletic lettering.
Line Spacing — the gap between lines in multi-line text (0.5×–3×). Double-click the slider to reset it to the default.

All of these apply live on the canvas and carry through identically to the final render.

Slanting text (skew)

Text layers can also be slanted (skewed) on the canvas for an italic, forward-leaning look. To skew a layer:

Select the text layer so its handles appear.
Hold Shift and drag one of the side handles — the square handle in the middle of an edge, not a corner.
Dragging the left or right side handle slants the layer vertically (the classic italic lean); dragging the top or bottom handle slants it horizontally. Release the mouse when it looks right, then release Shift to return to normal resizing.

Skew is saved with the layer, works with undo (Cmd Z / Ctrl Z), and renders exactly as you see it in the editor. Photo (dynamic image) layers can't be skewed — their side handles are hidden — so skew applies to text, shape, and graphic layers.

A text layer being skewed on the canvas by holding Shift and dragging a side handle, slanting the letters forward like italics

Text tokens

In Studio, text layers can include tokens — placeholders in curly braces that fill themselves in. Click the {} button on a text layer to insert one:

{designName} — the design's name.
{Photo.filename} — the file name of the photo in the layer named Photo.

Tokens resolve live while you edit a design in Studio and in the finished render. In the template editor they stay literal — there you're designing the rule, not one result. A token that doesn't match anything is left exactly as typed.