Text and type settings

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 T, 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 ↩, to type in it.
• Esc or ⌘↩ stops typing.
• ⇥ keeps what you typed and moves straight on to the next text layer; ⇧⇥ 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.

Style part of a text

While typing, select some characters and:

• ⌘B bold, ⌘I italic, ⌘U underline, ⌘⇧X 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.
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.

Shortcuts: ⇧⌘> and ⇧⌘< step the size up and down; ⌥⌘L, ⌥⌘T and ⌥⌘R 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 (⌘⇧8) or Numbered list (⌘⇧7), 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.
• 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 Esc first so the layer, not a range, is selected.