Text Design

It’s important to establish and follow design patterns to remain consistent when setting type. Many designs follow style guides for headers, sub-headers, and body copy. Consider the font size and leading (space between lines of text) when setting your styles.

Installing Fonts

Once you’ve chosen fonts, ensure that they are installed on your system prior to starting work on a project. Best practice is to pass these same fonts on to any other designers or developers who will be working on this project. This will prevent multiple copies of the same font being added to the project, which can create issues with the project files.

Any fonts you use in After Effects will be automatically exported to the AE Assets folder when you export your project files. Exported fonts will appear in the Assets folder with “yi_” before the name of the font file, for example: yi_Gotham-Black.otf.

If you see font files with two names in your Assets folder, that is a sign that the required fonts for the project you are working on were not installed on your computer. After Effects selects a default font in place of the missing required font, and the yi_ name will be appended with the name of the default font.

Example: yi_Gotham-Black.otf if replaced with Myriad Pro Regular as the default, would show as yi_Gotham-Black_MyriadPro-Regular.otf. The images below illustrate this example:

This is the correct font: Gotham-Black.otf. The window to the right displays the full character set.

This example shows the result of a default font being substituted for a required font: the name of the font is appended with the default font, MyriadPro-Regular, and the window on the right shows the character set for the default font.

Applying Text Styles

The text in a text box can have only one stylistic appearance. For example, a sentence that needs to have one word in the middle underlined cannot be implemented in a single text box. To implement such a sentence, you need to implement three text boxes: one for the first part of the sentence with regular text, a second for the underlined word, and a third for the rest of the sentence. Rich text formatting is only supported through layer comments.

Text can be formatted or constrained using layer comments. To set a Leading value, use the Leading field in the Properties panel. See Text Properties. Once applied with the Properties panel, the setting appears in the layer comments.

Text Types

There are two types of text. We recommend using Paragraph text if possible.

| Paragraph text | Populates along a straight line from its anchor point | | Point text | Populates along a straight line until it reaches the end of its bounding box. It then breaks onto the next line. Paragraph text is best for text that goes on multiple lines or text that changes dynamically |

To create Point text, select the Text tool from the toolbar and click the area of the composition where you want to add text and release the mouse button.

To create Paragraph text, select the Text tool from the toolbar. Click and drag the area of the composition where you want to add text. This creates a text box. While still holding the mouse button down, drag the text box to the desired size.

To convert from one type to the other, select the Text tool from the toolbar. Right-click the text layer, select Convert to…, and select the type.

Text Properties

To access text properties, select a layer containing text.

Text properties include:

Dynamic		When checked, converts static text to dynamic text. See Static Text Versus Dynamic Text.
Leading		Specifies the amount space to use between lines of text. Leave blank to use auto-leading.
Ellipsis		If checked and the text is larger than its bounds, an ellipsis is displayed.
Rendering	Possible settings include: Default: The default setting is SDF. Atlas: Calculates a visual representation of a text glyph and stores it. This approach can be more efficient, but there some limits. Text rendered this way cannot be rotated or scaled, and cannot be animated on the Z-axis. Bitmap: Renders the full text into a bitmap image which is automatically applied to its texture. It’s the fastest of the rendering types, but there are no memory savings across instances, unlike Atlas and SDF rendering. SDF: May be preferable when text needs to scale up or down. SDF text rendering is the default and is supported across all platforms.

Static Text Versus Dynamic Text

Static Text

Static text does not change dynamically. All newly created text layers are static by default. For options, see Text Properties.

Dynamic Text

Dynamic text is dynamically populated by the app when a call is made to the server. Some examples are titles, descriptions, and tables of contents.

Set the Dynamic property so that You.i Platform recognizes the text as dynamic text. See Text Properties.

It’s good practice to name dynamic text such that others can recognize your intent; for example, Text-Title and Text-Title-Pressed.

See also Naming Conventions.