# Text and type settings

> Add and edit text, style parts of it, pick fonts, and fine-tune case, lists, decoration and number styles.

Source: https://uxdeck.app/guide/text (checked against uxdeck on 16 October 2026)

Text layers hold your headings, labels and paragraphs. The **Typography** section of the Design tab covers what you change most (font, weight, size, line height, letter spacing, alignment), and **Type settings** holds the finer controls: case, underline, lists, truncation and OpenType features.

## Add text

Press <kbd>T</kbd>, then:

- **Click** to start typing. The text grows as you type (its width hugs the words).
- **Drag** a box to set a fixed width. The words wrap inside it and the height follows.

New text takes the font already used in that frame, so a new label matches its neighbours. On an empty page it starts as Inter at 24. Text placed on a dark surface starts light, and on a light one dark, so you can always see what you type; a toast says when that happens.

## Edit text

- Double-click a text layer, or select it and press <kbd>↩</kbd>, to type in it.
- <kbd>Esc</kbd> or <kbd>⌘</kbd><kbd>↩</kbd> stops typing.
- <kbd>⇥</kbd> keeps what you typed and moves straight on to the next text layer; <kbd>⇧</kbd><kbd>⇥</kbd> goes to the one before. Good for filling in a form or a table.
- The words are also in the **Content** field at the top of the Design tab, where you can type them or link them to a variable or a component property.

To type the same words into several text layers at once, see [Edit several layers at once](/guide/edit-several).

## Style part of a text

While typing, select some characters and:

- <kbd>⌘</kbd><kbd>B</kbd> bold, <kbd>⌘</kbd><kbd>I</kbd> italic, <kbd>⌘</kbd><kbd>U</kbd> underline, <kbd>⌘</kbd><kbd>⇧</kbd><kbd>X</kbd> strikethrough.
- Change the colour, font, weight, size or letter spacing in the Design tab. Only the selected characters change.

With no characters selected, the same keys style the whole layer. Fields read **Mixed** when the text holds more than one value.

## Typography

| Setting | What it does |
|---|---|
| Text style | Applies or creates a shared text style. See [Text and effect styles](/guide/styles). |
| Font | Opens the font picker: **All fonts**, and **On this computer** once you press **Use the fonts on this computer** (Chrome and Edge). |
| Weight | The font's weights and their italics. |
| Size | Type a value, or pick from the list beside it (10 to 96). Units: px, rem or em. |
| Line height | A number, or type `auto` for the font's own. Units: px, % or em. |
| Letter spacing | Units: %, px, em or rem. |
| Alignment | Left, centre, right or justify, and top, middle or bottom inside the box. |

Your own uploaded fonts appear in the picker too. See [Your own fonts](/guide/fonts).

Shortcuts: <kbd>⇧</kbd><kbd>⌘</kbd><kbd>&gt;</kbd> and <kbd>⇧</kbd><kbd>⌘</kbd><kbd>&lt;</kbd> step the size up and down; <kbd>⌥</kbd><kbd>⌘</kbd><kbd>L</kbd>, <kbd>⌥</kbd><kbd>⌘</kbd><kbd>T</kbd> and <kbd>⌥</kbd><kbd>⌘</kbd><kbd>R</kbd> align left, centre and right.

## Type settings

Press the **Type settings** button at the end of the alignment row. A panel opens with a live preview and up to three tabs.

**Basics**

- **Letter case:** As typed, Uppercase, Lowercase, Title case, Small caps, Forced small caps. The words you typed stay as they are; only how they show changes.
- **Decoration:** None, Underline or Strikethrough. An underline has a style (Solid, Dotted, Wavy), a thickness, an offset, its own colour and **Skip ink**.
- **Vertical trim:** Standard, or **Cap height to baseline** to drop the space above capitals and below the baseline, so text lines up exactly with its box.
- **List style:** No list, Bulleted list (<kbd>⌘</kbd><kbd>⇧</kbd><kbd>8</kbd>) or Numbered list (<kbd>⌘</kbd><kbd>⇧</kbd><kbd>7</kbd>), with **Paragraph spacing** and **List spacing**.
- **Truncate text:** On ends the text with an ellipsis when it runs out of room. On text with auto height, **Max lines** sets after how many lines.

**Details**

- **Paragraph indent**, **Hanging quotes** and **Hanging lists**.
- **Case-sensitive forms** and **Capital spacing**, for text set in capitals.
- **Fractions**, **Slashed zero**, number position (Superscript, Subscript), **Number spacing** (Proportional or Monospaced, good for prices and timers) and **Number style** (Lining or Old style).
- **Wrap style:** Auto, **Balance** (lines of even length, good for headings) or **Pretty** (avoids a lone word on the last line).
- **OpenType features:** ligatures, kerning, alternates, swashes and stylistic sets. A font without a feature draws as before.

**Variable** appears for variable fonts and gives a slider for each of the font's axes.

## Catches

- **A font missing on this computer shows in a stand-in.** The Typography section says so and offers a fix. See [Your own fonts](/guide/fonts).
- **Fixed width or hug?** Text you clicked to create hugs its words; text you dragged keeps its width. Switch in the **W** menu: **Hug contents** or **Fixed**.
- **Only the selected characters change while you type.** To restyle the whole layer, press <kbd>Esc</kbd> first so the layer, not a range, is selected.
