Text

With this widget, you can add and edit texts within your project. To add new text, use the shortcut T or push + (W) in the left dock and select Text.

Click on the widget once to open its general attributes on the right side: these include all the settings that affect the entire widget. Here you can align the text, add animations, change position, rotate, or lock it.

Double-clicking on the widget opens attributes that allow you to customize the text itself: changing typography and color, adding links and special symbols, dropping shadows, or splitting the text into columns.

Text styles

Styles make the process of text editing easier and faster. To open the list of styles, double-click the Text widget, select Typography under attributes and click No style (or the title of a style if you’ve already applied one) at the top of the panel. You can use one of the predefined styles or create your own. To do so, click + at the bottom of the panel, select all the properties, and click Save. Double-click its title or the three dots next to it to modify a style, and select Edit.

For SEO purposes, you can apply HTML tags—<h1>, <h2>, <h3>, or <h4>—to any style. As a result, the text in the final code will be wrapped with these tags. By default, the H1 and H2 styles are wrapped with <h1>…</h1> and <h2>…</h2> 

To change the order in which styles are shown in your widget attributes, simply drag and drop them into the desired order. This also works for List styles. 

To navigate through styles, click the three dots at the bottom of the panel and select the desired view: show all styles, only used or only unused ones. Here you can also delete all unused styles together. 

When you add a new Text widget, it automatically remembers the last style you used and applies it to the new text fragment. But in some cases, when you copy your text from a rich text editor, it can inherit formatting from the initial document. To avoid this, use these shortcuts:

For macOS:

• Cmd + C to copy
• Cmd + Shift + V to paste
  (Cmd + С/Cmd + Option + Shift + V for Safari)

For Windows:

• Ctrl + C to copy
• Ctrl + Shift + V to paste
  (Ctrl + С/Ctrl + Option + Shift + V for Safari)

To copy a style from another widget, use shortcuts Cmd + Opt + C/V for macOS and Alt + Shift + Ctrl + C/V for Windows. Learn more about other useful shortcuts for working with text here: Shortcuts.

Global styles

If you create a global style, it will automatically appear across all projects in your account — both existing and new. To do so, switch to the Global tab in style settings, click +, and set a style.

Project styles exist only within the project where they were initially created.

Fonts

To add fonts from Adobe Fonts (Typekit), Webtype, Google Fonts, and type.today to a project, click Typography in the widget controls, then click on the font’s title and select Library.

With paid plans, you can upload custom fonts in TTF, OTF, WOFF, or WOFF2 format to your Library. Click Upload on the Custom tab in the Fonts drop-down, type in a name for your font, pick the weight, and upload the file.

Custom fonts do not transfer when a project is transferred to another account per the user’s request. The destination account owner will have to re-upload any such fonts in the transferred project manually.

Additionally, you can use Google Tag Manager to add a tracking code from your font provider. This feature is available only for projects with a custom domain name.

If you use a lot of fonts, the filtering option may be handy for you. To access it, click the three dots in the top right corner of the fonts panel. Here you can delete all unused fonts at once or select which fonts to display in your text widget attributes: all added fonts, only used or only unused. 

Alignment

Click Align to position the text inside your widget. Besides four basic alignments (flush left, flush right, justified, and centered), you can also select a right-to-left (RTL) orientation for your text in the Writing section.

Additionally, there are two resizing options:

• Auto height—the height of the widget changes automatically according to the length of the text
• Fixed size—set the fixed width and height for your widget and use arrows to select whether the text should be shown at the top or bottom.

Advanced typography

Double-click the Text widget and select Advanced Typography in its attributes. This section offers different options to help fine-tune text.

Transform

Allows you to transform your whole text into upper or lower case, capitalize the first letters of each sentence, or change fonts to bold or italic with just one click.

Decoration

Apply overline, underline, or strikethrough to your text.

Features

Convert text to subscript or superscript, create fractions, add small caps, ligatures, or stylistic sets.

List

Enable this option to convert text to an ordered or unordered list. 

List styles work the same way as text styles: you can make them global and rearrange them by dragging and dropping. By default, all lists inherit the last used text style. You can also customize and create your own list styles. To do so, click ‘Same as text’ in the list of attributes (Advanced Typography) and click +. The settings for a new style will open automatically. Here you can select typography settings and set the width of the list column. 

The Align option defines the position of lines in a list item. When activated, all lines will be aligned with the first line. The lines (except for the first one) will align with the list bullets when not activated.

Click Marker in the list style settings to replace bullets with other symbols and select the preferred glyph. This will display the glyphs that exist for the font you’ve chosen. 

Change the parameters for Baseline shift to alter the positioning of bullets (or glyphs) and text margins.

Outline

Add an outline to your text: specify width and color.

Box color

Select a background color for the text widget and set opacity.

Selection color

Set a display color for when text is selected in the published project.

Non-breaking space and soft hyphens

Adding non-breaking space (&nbsp;) prevents lines from breaking, usually to improve readability. To add it to your text, use the Insert option in the widget attributes or apply these shortcuts:

For macOS:

• Alt + Space

For Windows:

• Ctrl + Shift + Space

On the other hand, a soft hyphen (&shy;) creates a mandatory breaking within a word or line. You can set it either via the Insert option or with the shortcut Shift + Enter for macOS and Windows.

Link

You can add a link to one or several words within a text widget, or turn the entire widget into a link.

Select the text with your mouse cursor and press the Link icon in the right-positioned menu to do so. 

To set the Current Link style, open the Link panel, select Edit Style from the drop-down menu, and go to the Current tab.

Choose one of the provided link types:

• Website URL. Link to an external website.
• Jump to Page. Link to any page within the project. Type in the page number or page custom link. These links are updated automatically when you rearrange pages in the project.
• Email. Standard ’mail to’ URI scheme that creates a new email message to a specified address.
• Phone Number. ‘Tel’ URI scheme that starts a call for mobile devices. The number has up to fifteen digits without spaces, hyphens, or separators: +[country code][national destination (area) code][subscriber number], as per E.164 recommendations.
• Anchor. Link to any particular position on the same page. Click anywhere to set your anchor, or type the height in pixels, e.g. 748 px. The anchor can’t be placed on a different page.
• Scroll to Top. Brings your visitor to the top of the page.
• Go Back. Leads to the previous page of the project.

Push the Arrow button to activate the link settings.

After that, you will see the Open in tab switcher and the option to choose the Link style from ones that already exist in your project or account (Global styles). You can also create a new style by pressing the Plus icon. 

Learn more: Does your text layout follow typographic principles?