How to Create and Adjust Text Styles in Flex

In Flex, you can create and apply text styles to any body of text within an experience. Doing so streamlines the content creation process and reduces time spent configuring text layouts. Along with being a time-saver, text styles are vital when creating fully responsive content in Flex.

A text style includes the following unique attributes:

• Text hierarchical label

• Font

• Font weight

• Line height

• Tracking

• Paragraph spacing

• Font sizes for each responsive variant

When a text style is selected, its unique attributes are automatically applied to the target text box.

Applying a Text Style

1. Select the target text box

2. Navigate to the "Text" section of the Inspector Panel while in Design mode

3. Click the Text styles icon located in the top-right corner of the section

4. Select the desired text style from the Text style menu

   1. Hover over the available text styles to preview them on the selected text box

To replace an applied text style:

1. Select the target text box

2. Navigate to the "Selected text style" section of the Inspector Panel while in Design mode

3. Click the Text styles icon to the left of the text style label

4. Select a new text style from the Text style menu

Adjusting a Text Style

1. Hover over the target text style label

   1. Either from the "Selected text style" section (for applied text styles) or the "Text styles" section (after clicking the Text styles icon) in the Inspector Panel

2. Click the Adjustment icon

3. Make the desired adjustments

4. Click Save

Text style adjustments are made globally, so they will apply to all current and future uses of the updated text style. To make adjustments to one instance of the text style, it must be unlinked:

1. Select the target text box

2. Hover over the text style label in the "Selected text style" of the Inspector Panel

3. Click the Unlink icon

The unlinked text style will retain its attributes, but updates will not be applied globally to other instances.

Creating a Custom Text Style

Though you can adjust the pre-built text styles included in Flex, you can also create custom styles for specific use cases. To do so:

1. Select a text box or add a new one to the canvas

2. Configure the new text style's attributes in the "Text" section of the Inspector Panel

   1. Important: The configurations will automatically be attributed to the new text style when created, so setting them up beforehand is key

3. Click the Text styles icon to the left of the text style label

4. Click the + icon to create a new style

5. Name the new style in the field at the bottom of the text style list

6. Press the Enter key to save the style

Once created, a custom text style can be adjusted just like the pre-built styles.

Deleting a Text Style

1. Hover over the target text style label

   1. Either from the "Selected text style" section (for applied text styles) or the "Text styles" section (after clicking the Text Styles icon) in the Inspector Panel

2. Click the Adjustment icon

3. Click the Delete icon located in the bottom-left corner of the Text style menu

Deleting a text style will remove it from all text boxes to which it was applied throughout the entire experience. The affected text boxes will retain the deleted text style attributes.