From within the editor, select Text from the + menu in the top bar, or use the hotkey T.
Select a point in the project body by selecting between rows, click + dragging within, or selecting a point inside a column.
Enter text content by typing in the container.

Text settings

While selecting a Text element, the right sidebar will display the available settings for styling both the text container and the text content itself.

Sizing

Controls the width and height of the text container.

Spacing

Adjusts the padding within the text container.

Text

Defines the style of the text content, such as the font family and weight, text size, leading, etc. Upload fonts, create or assign Text Styles, and control text justification and case in this section. The Responsive Scaling ****toggle ****causes text to automatically scale to fit different screen sizes.

Fill

Controls the color of the text content, as well as the background of the text container. Select Add media to display an image in the container beneath the text, or simply apply a background color to the text container. Lastly, you can edit the corner radius of the text container.

Stroke

Gives the option of adding a border to any sides of the text container.

Accessibility

Provides the ability to assign an HTML content tag to the entire text element layer. This data may be used by browsers and search engines to infer the hierarchy of text content without visual cues, and may effect how the text is displayed on screen readers or in other environments.

<aside> 💡 Tip: when setting text over a media background, use the Sizing settings to adjust the height of the container from Auto to Aspect Ratio and choose a preferred size.

</aside>

Text decoration

Double-click the text to highlight it and begin editing the text content. From this state, contextual UI appears allowing you to add a link, or apply styling to individual passages within the text content. The style options include text color, bold, italics, strikethrough and underline.

<aside> ⚠️ Note: Standards can only apply bold or italics if the corresponding font weight or style has been uploaded and assigned properly. For instance, if there is no italic font style uploaded to the project with the same family as the upright style, then the setting to italicize will have no effect.

</aside>

Fonts

Standards offers a small catalog of fonts available to choose from out of the box, as well as the ability to upload custom fonts for your specific brand.

Supported font formats

.woff (preferred)

.woff2 (preferred)

.otf

.ttf

Uploading fonts

Adding a new font to Standards is a simple process.

Open a project, or create a new one.
Navigate to the Files **tab in the top righthand sidebar in the editor.
Select Upload and choose your desired font file, or drag and drop directly into the editor.
Once the upload is complete, select the fonts in the Files sidebar and ensure the data is correct.
If the font data is not correct after uploading, manually correct any errors using the examples provided below.

✅ Correct font data example

Family: Helvetica

Subfamily: Bold

Weight: 600 (Bold)

Style: Oblique

❌ Incorrect font data example

Family: HelveticaBoldObliq

Subfamily: None

Weight: 300 (Normal)

Style: None

Google fonts

Google fonts are open source and may be freely used anywhere on the web, including Standards. However, Google fonts must first be downloaded locally as a supported font file format, then uploaded directly to Standards.

<aside> ⚠️ Note: Currently we do not support online type activation services such as Adobe Fonts. Standards requires the reading of font metrics to allow for precise text alignment and control, which means uploading your font files.

With most branding projects, your client will be required to purchase a font license regardless, so if using Adobe Fonts or a similar service, we recommend purchasing licenses and uploading the font files.

</aside>

Advanced text features

Some fonts come with advanced features such as variable functionality, OpenType features, stylistic sets, etc. Standards can detect when a font contains advanced data, and provides additional settings if applicable.

OpenType features

If a font supports advanced opentype features, the Text settings group will include a button labeled OpenType features which leads to a list of settings contextual to that font.

Variable fonts

If a font supports variable data, the Text settings group will include sliders for each variable matrix supported by the font. Additionally, if the font has styles assigned to key figures within the matrix, these styles will be accessible from the Weight dropdown.

Accessibility

Adding content tags to text provides data that may be used by browsers and search engines to infer the hierarchy of text content without visual cues, and may effect how the text is displayed on screen readers or in other environments.

Learn how to add content tags to text:

Accessibility

Related guides

Links

Editor overview

Files & Downloads