Overview
A Text layer displays text in your app’s interface and defaults to the System Font Family, Body Style, and Default Design.
⬇ Note
Press t on your keyboard to insert a Text layer.
If you need finer control over the size and weight of your text, use the Font modifier to choose from a list of preconfigured Style variants, like Title or Caption, or build a Custom style by inputting the Size and Weight manually.
A Text layer always uses exactly the amount of space it needs to display its rendered contents, but you can affect the its layout. For example, you can use the Frame modifier to propose specific dimensions to the layer. If the Text layer accepts the proposed dimensions but the text doesn’t fit into the available space, it uses a combination of wrapping, tightening, scaling, and truncation to make it fit.
With a Width of 80 points but no constraint on the Height, a Text layer might wrap the text.
Use a modifier like Line Limit to configure how the Text layer handles space constraints. For example, combining a fixed Width and a Line Limit of 1 results in truncation for text that doesn’t fit in that space.
Choosing a Font
With the Font modifier, you can control the font Family, Style, and Design of your Text layers. It defaults to the System Font Family, which is a typeface provided by Apple that supports an extensive range of weights, sizes, styles, and languages.
To add a Custom Font Family, you must first embed the custom font to your Judo file in the Font Manager. You can find this in the Text > Custom Fonts…menu.
The list of pre-defined Styles support Apple's Dynamic Type system, allowing your text to scale proportionally when users change the system text size or make accessibility adjustments like turning on Larger Text in the Accessibility settings.
When using the System Font Family, the Font modifier displays a menu with 4 different designs of the System Font: Default, Monospaced, Rounded, Serif.
Styling a Text Layer
In addition to the Bold and Italic modifier, you can style your Text layer by changing its color with the Foreground Color modifier, adding the Underline modifier, or setting the Text Case.