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.

Picking a color

Every color control in the editor opens the same picker, so you only have to learn it once: text Fill and Stroke, each gradient stop, shadow color, shape fill and stroke, QR code foreground and background, and the shadow colors on photo layers — including the bulk panel when you have several photo layers selected.

The color picker open beside the properties panel, showing the Team colors grid, tints and shades, neutrals, the custom saturation area with hue slider, and the hex field

Under the Fill and Stroke swatches on text and shape layers sits a row of eight quick swatches — the colors you reach for most, one click away. Click the swatch itself to open the full picker.

The picker is grouped:

Team colors — the 18 named uniform colors: White, Silver, Graphite, Black, Navy, Royal, Columbia, Teal, Kelly, Forest, Scarlet, Cardinal, Maroon, Orange, Gold, Vegas Gold, Purple, Pink.
Tints & shades — lighter and darker steps of ten base hues, for accents and complements rather than for matching a uniform.
Neutrals — a white-to-black gray scale.
Custom — a saturation and brightness area with a hue slider beneath it, for anything that isn't on the grids.
Recent — the colors you've most recently mixed in the Custom area or typed by hand. These are remembered in that browser only, so they don't follow you to another computer or another person's login.

Below the custom controls is a hex field. Type or paste an exact value there — #17274A, say — when a client has given you a specific color.

The named team colors are the point of the picker. Poster work is a matching problem: the color has to agree with something already in the photo, and the same navy uniform comes back week after week. When two designers can both ask for Navy by name, they land on the same value on different days — something a freeform color wheel can't promise. The picker also stays open after you click a swatch, so you can flip between Navy and Royal against the photo behind it without reopening it each time.

The picker works from the keyboard: Tab moves through the swatches and Enter or Space picks the focused one. In the Custom area, the arrow keys move the point (left/right for saturation, up/down for brightness) and, on the hue slider, left/right shift the hue — hold Shift for larger steps.

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.