layers

Text Layers

Typography controls in Lega — fonts, size, weight, alignment, and color for text layers, whether AI-generated or added by hand.

Text is usually the first thing anyone touches after generating a layout — a headline needs to change, a call-to-action needs punchier wording, a caption needs to be shorter. Text layers in Lega are ordinary, fully editable layers: whatever the AI generated is exactly as changeable as if you'd typed it yourself.

Adding a text layer

Use the text tool in the bottom toolbar (data-testid="bottom-tool-text") and click or drag on the canvas to place a new text layer. You can also generate text as part of an AI layout — headlines, body copy, and labels are common outputs of a generation — and then edit it exactly as you would a manually placed layer.

Editing content

Double-click a text layer on the canvas to enter edit mode and start typing. Click away, or press Escape, to commit the change. Text layers support multi-line content, so a paragraph of body copy behaves the same as a one-word headline — the layer's bounding box adjusts to what's inside it depending on its sizing mode.

Typography controls

With a text layer selected, the Properties panel (data-testid="right-tab-properties") exposes the typography controls:

  • Font family — Lega ships with a curated set of font pairings rather than an unbounded system-font list, so AI-generated designs stay visually coherent. The default UI and editorial typography draws from the Instrument Serif / Inter family pairing used throughout Lega's own design system — serif for display and editorial moments, a clean sans for body and UI text. See the Layers Panel guide for how to manage text layers alongside the rest of your composition.
  • Size — set numerically or by dragging the layer's resize handles, depending on whether the layer is in fixed or auto-size mode.
  • Weight and style — bold, italic, and any additional weights the selected family supports.
  • Alignment — left, center, right, and justify, applied per text layer.
  • Line height and letter spacing — fine control for headlines that need tightening or body copy that needs more breathing room.
  • Color — opens the same color picker used elsewhere in the editor, with support for solid colors and, on relevant layer types, gradients.

Sizing behavior

Text layers can behave in a couple of different ways depending on how they were created:

  • Auto-width/auto-height layers grow or shrink to fit their content — good for labels and short headlines where you don't want manual box management.
  • Fixed-box layers wrap text within a set width and height, which is what you want for body copy, captions, or anywhere text needs to stay inside a defined area regardless of edits.

If a text edit looks like it's overflowing or getting clipped, check which sizing mode the layer is in before assuming something is broken — a fixed box that's too small will visibly clip rather than resize itself.

Contrast and readability

When the AI places text over an image or a busy background, it accounts for contrast automatically — adding a subtle backdrop or adjusting color so text stays legible rather than disappearing into whatever's behind it. If you manually move a text layer onto a new background after the fact, it's worth a quick visual check: manual moves aren't re-evaluated for contrast the way generation is, so a headline that looked fine over its original background might need a manual color or backdrop adjustment over a new one.

Working with multiple text layers

Larger designs often have several text layers — headline, subhead, body, caption — stacked in a visual hierarchy. A few habits make this easier to manage:

  • Rename each layer in the layers panel so "Headline" and "Subhead" are easy to tell apart at a glance instead of guessing from truncated content previews.
  • Use consistent sizing and weight across similar roles (all captions the same size, for instance) to keep the design coherent as you edit.
  • If several text layers need to move together — say, a headline and its subhead — group them (see Layer Groups) so repositioning one repositions both.

Regenerating text via AI

If a text layer's wording isn't landing, you don't have to rewrite it manually — describe the change you want in the chat pane and let the AI regenerate just that piece, or the layout around it, rather than starting a whole new generation. This keeps everything else in the frame untouched while iterating on copy specifically.