Text

A Text layer is used to display one or more lines of text.

Updated over a week ago

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.

You can also apply modifiers like Bold or Italic to further adjust the formatting.

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.

Did this answer your question?