Text Tool Basics

Creation

To create a Text layer that will automatically resize according to its text content, click the Text tool in the Toolbar or press T, then click on the canvas and begin typing. To create a Text layer with a fixed size, select the Text tool and click and drag on the canvas. To edit the contents of any Text layer, double click the Text layer. You can also select the Text layer and then press Enter.

Sizing

If you select a Text layer, you’ll find a bunch of unique properties in the property panel on the right. One of these is located in the Size panel: the Grow property. This allows you to define how the text layer grows if its contents change.

The left-most option is "auto-size". This means the width and height of the text layer will both be set to "auto", thus will adjust based on the contents within.

The middle option is a shortcut for just "auto-height" and will only affect the height property of your text layer. This is ideal for longer form content, like paragraphs, where you often want the width to be fixed or relative, but the height to depend on the amount of characters.

The rightmost option is a shortcut of "fixed-size", this means both the width and height property will be fixed and up to you to manage. This means you could create a text layer that is 200 x 200 regardless of the contents within.

Applying Styles

You can style a Text layer in one of two ways: by styling all of its text content at once, or by styling specific parts of the layer's text content.

To change its overall style, select the layer and then, on the Properties panel, make your changes to the properties listed under the Text heading. Your changes will apply to all of the layer’s text content. To change the style of a specific part of the Text layer’s content, double click the Text layer to edit its content, then select only the text that you want to style and make your changes on the Properties panel. Your changes will only apply to your selected text.

If you’re looking to re-use your styles, you can create Text Styles.

Pasting Text

You can also bring text from other text elements, other structured text editors, or online resources, and we will match the provided HTML structure with your Text Styles and Inline Styles.

Like in any other editor, when you paste a phrase or a sentence in the same line of existing text, the pasting functionality will retain the HTML, Text Styles, and Inline Styles in that line. On the other hand, when you paste structured text from editors like Notion in a new line or editor, we will respect the HTML structure but map the styling to your Text Styles.

When you have multiple styles for the same HTML tag in the Text editor, we will map it to the first used Text Styles in the editor. This also applies to other editors or even web content. Even though we respect the HTML structure of your pasted text, we recommend reviewing your copy and verifying that you are using the semantic HTML for Accessibility and SEO.

Accessibility

Accessibility is about making your web content available to as many people as possible, independently of their context and abilities. HTML semantics is the foundation of web accessibility and helps assistive technologies like screen readers convey meaning to their users.

In the case of text, it is essential to remember that each page should only contain one H1. A webpage with more than one is considered to have invalid HTML. Keep an eye on subsequent copy sections and use the proper H2 to H6 for headlines, p’s for paragraphs, or plain old divs for decoration text. You can easily do this in the Accessibility Panel. You can select the text from the Text Tool that you want to change and pick a tag in the Accessibility Panel.