Text and fonts

Add and edit text, pick or upload a font, use variable font axes, style part of a text and add text motion such as a word cycler or a path.

Text has its own sections in the inspector, a font picker with a catalog of fonts, and controls for variable font axes, so the weight or width of the letters can change as they move.

Add and edit text

Click T in the top bar (tooltip Add text) to add a text layer. To change the words, double-click the text on the board, or select it and press Enter. The whole text is selected when the editor opens.

Press Enter inside the editor to start a new line. Press Esc or click outside the text to finish.

A text has no fixed box. Its frame fits the words, and a line ends only where you pressed Enter. Dragging a corner of the selection frame makes the text larger or smaller: it changes the font size.

The Text section

Select a text to open the Text section in the inspector. Its fields fall into four groups:

  • Words and font. The Text field and the Font picker.
  • Size and spacing. Size, Line height and Letter spacing.
  • Look. Text color opens a colour picker with transparency and the colours already used in your project. Rotation, flip, opacity and Blend work as for any other object.
  • Placement. Alignment sets left, centre or right alignment for the lines. Under Position, the dot grid snaps the text to an edge, a corner or the centre of the frame, and X and Y set the exact spot.

Select several texts and the Selection section edits the font, size, colour, spacing and alignment of all of them at once. A field whose values differ shows Mixed.

Choose a font

Click the Font field. It shows the current font in its own letters, with the tags of its variable axes on the right, such as wght.

The list that opens has a Search… field and category chips: All, Sans, Serif, Condensed, Display, Script, Fancy, Mono and Pixel. Only one chip is active at a time. Click a font to apply it. A font that is not loaded yet downloads first, and … shows next to it while it loads.

To browse the catalog outside the editor, see the typefaces page.

Upload your own font

At the bottom of the list, click Upload font… (.ttf/.otf) and pick a file. The font is applied to the text and added to the list. The file is saved in this browser. When you are signed in, it is also stored with your account, so a project that uses it opens with the right font on another device. Uploaded fonts have no category, so they show under All only.

Variable fonts and axes

A variable font can change its shape along axes, such as weight (wght) or width (wdth). The Font axes section under Text has one field per axis of the current font, labelled with its tag.

If the font has no axes, the section says This font has no variable axes. Some fonts have separate styles instead, such as an italic. For those, the section shows a Style list.

To animate an axis:

  • Use a preset. The Variable axes filter chip in the library shows the axis cards. A card animates the axes of your font, and prefers weight when the font has it. See Presets and animators.
  • Or add the layer yourself: Add animator, then Axis. Pick the axis and set To. While From static value is ticked, the motion starts from the value in Font axes.

If the font has no such axis, the layer shows a warning, such as Current font has no wght axis, and keeps its settings for a font that has it.

The Change font animator morphs the letters from one font into another.

Style part of a text

You can give a few letters their own colour, font, axes, decoration and motion. Such a piece is called a span.

  1. Double-click the text and select the letters.
  2. Click Make span next to the selection.
Three letters become a span, and the span gets its own colour in the inspector.

The inspector now shows a Span section instead of Text, with Color and Font for those letters. After you change one, a Reset button takes it back to the value of the whole text. Font axes and Decoration also work on the span, and so do presets and animators you add while it is selected. Decorations are covered in Effects and shaders.

Each span shows up as a numbered row under its text in the timeline's list of layers. Click the row to select the span again. Detach span removes the span and keeps the letters.

Text motion beyond presets

Some text motion has its own inspector section instead of an animator layer.

  • Word cycler swaps the text for a list of words, one after another. Click + next to Word cycler, add words with Word, and pick a Style such as Fade, Slide or Typewriter. It needs at least two words.
  • Path lays the letters along a line: a wave, an arc, a frame, or a curve you draw on the board with Custom (draw) under Shape. Add it with Add animator, then Path, or from the Path chip in the library.
  • Marquee scrolls the text across the frame as an endless line. It comes from the Marquee chip in the library.
  • Repeater makes copies of the object that follow it with a delay, in a stack or a grid. Click + next to Repeater. It works on shapes, images and videos too.

A text can have only one of Path, Marquee and a 3D shape at a time. 3D is covered in Camera and 3D. Custom (draw) under Path needs Pro. Word cycler, Path and Marquee end with a button that removes them, such as Remove cycler.

Open the editor

Esc