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.
Kerning (the space between letters) is set in code and is universally applied throughout the application.
Avoid using .dfont versions of fonts in your projects as they are not fully supported by You.i Platform. If used, only the Regular font weight will work, and other weights will default to Regular.
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.
The fonts that you export will be the fonts used in the build of your app, so pay close attention to the fonts that appear in the Assets folder when you export your files. If any project fonts are missing from the Assets folder, they will not be used in your build.
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.
Not all text options are supported. Stick to Text Type, Size, Alignment, and the All-Caps toggle.
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.
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.
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.|
||Possible settings include:
You can configure separate dimensions for regular and SDF text atlases, which will result in significant memory savings for your app.
Static text does not change dynamically. All newly created text layers are static by default. For options, see Text Properties.
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.
Dynamic property so that the You.i Engine 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,
See also Naming Conventions.