> For the complete documentation index, see [llms.txt](https://help.craftsmanplus.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.craftsmanplus.com/play/layers/text.md). # Text Add text to your playable, edit it on the canvas, mix styles inside one layer, and choose from your own fonts or Google Fonts. A Text layer is a container for editable text. Use Text layers for headlines, calls to action, instructions, scores, and any other written content in your playable. A single Text layer can mix styles. Make one word bold, color a phrase, or set a price in a larger size, all without stacking separate text layers. ### Adding a Text Layer Click the **+** button to open the **Add Layer** menu and choose **Text**, or press the **`T`** hotkey. New Text layers start with the text "Insert Text…" in white **Roboto** at size **40**, centered, with **Auto-Size** on. You can also add a font from the Asset Library as a layer. PLAY creates a Text layer that uses that font. ### Editing Text on the Canvas Double-click a Text layer on the artboard to edit its text in place. A caret appears where you clicked, and you can type, select, and style text directly. * **Select text** by dragging. Double-click selects a word, triple-click selects a line, and four clicks select everything. * **Move the caret** with the arrow keys. Hold **Shift** to extend the selection. * **Copy and paste** work as plain text. Pasted text takes on the style at the caret. | Shortcut | What it does | | --------------------------------------------------------- | ------------------------ | | **Enter** or **Shift + Enter** | Inserts a line break | | **Esc**, or **Cmd + Enter** (**Ctrl + Enter** on Windows) | Finishes editing | | **Cmd + B** / **Ctrl + B** | Bold | | **Cmd + I** / **Ctrl + I** | Italic | | **Cmd + A** / **Ctrl + A** | Selects all text | | **Cmd + Z** / **Ctrl + Z** | Undo | | **Cmd + Shift + Z** / **Ctrl + Y** | Redo | | **Alt + Arrow** (Mac) / **Ctrl + Arrow** (Windows) | Moves the caret one word | Clicking anywhere outside the text box also finishes editing. While you're editing, the editor's other shortcuts are paused, so **Backspace** deletes text rather than the layer. ### Text Properties The **Text** section of the Properties panel holds everything specific to typography. Controls apply to the whole layer, or to just the selected text while you're editing (see [Styling Part of the Text](#styling-part-of-the-text)). * **Font -** The font family. Click it to open the font picker. See [Fonts](#fonts) below. * **Style -** The weight and style of the font, like Regular, Medium, Bold, or Bold Italic. The list shows only the styles the chosen family includes. It sits next to the font size. * **Font Size -** Sets the size of the text from 1 to 400. Enter a value, or open the dropdown to pick a preset size. Typing a value turns **Auto-Size** off for the current orientation. * **Auto-Size -** A toggle below the font size. With it on, your text scales to fit its text box. See [Auto-Size](#auto-size) below. * **Alignment -** Six buttons set how text sits in its box. The first three set horizontal alignment (**left**, **center**, **right**) and the last three set vertical alignment (**top**, **middle**, **bottom**). These position the text inside the box, and are separate from the layer alignment controls in the Transform section. * **Color Fill -** The color of the text, as a solid color or a gradient. Click the swatch to open the [Color Selector](/play/general/color-selector.md), and use the opacity input next to it to adjust transparency from 0 to 100. Open **Advanced** for finer typography controls: * **Line Spacing -** The space between lines, as a percentage of the font's standard line height. **100%** matches the font's natural spacing. Ranges from 0 to 1000%. * **Letter Spacing -** The space between characters, as a percentage of the font size. Ranges from -100 to 1000%. * **Letter Case -** Shows the text as typed (**Manual Case**), in **Upper Case**, or in **Lower Case**. * **Position -** Sets selected text as **Subscript**, **Baseline**, or **Superscript**. Only available while text is selected. ### Styling Part of the Text To style only some of the text, double-click the layer, select the words you want, and change them in the Text section. Everything else in the layer stays as it was. These controls can apply to a selection: **Font**, **Style**, **Font Size**, **Color Fill** and its opacity, **Line Spacing**, **Letter Spacing**, and **Position**. **Alignment**, **Letter Case**, and **Auto-Size** always apply to the whole layer. The Text section follows what you're working on: * **Layer selected, not editing:** changes apply to the whole layer. * **Editing with text selected:** changes apply to the selection only. * **Editing with just a caret:** the panel shows the style at the caret, and changes apply to the whole layer. When the text you've selected has more than one value for a setting, like two different fonts, that control shows **Mixed**. {% hint style="warning" %} Changing a setting with the whole layer selected replaces that setting everywhere in the layer. For example, setting the layer's Color Fill to white resets any words you'd colored differently. Style the whole layer first, then style the individual words. {% endhint %} {% hint style="info" %} With a caret and no selection, **Cmd + B** or **Cmd + I** applies to the next characters you type. {% endhint %} ### Orientations Some text settings are shared between portrait and landscape, and some are set separately for each. | Shared across orientations | Set per orientation | | --------------------------------------------- | ---------------------------------------------- | | The text itself | Font Size | | Font and Style | Auto-Size | | Color Fill | Alignment | | Line Spacing and Letter Spacing (whole layer) | Line Spacing and Letter Spacing on a selection | | Letter Case and Position | | A size you set on part of the text keeps its proportion to the layer's font size. Change the layer size and the styled words scale with it. ### Fonts Click the **Font** field to open the font picker. It has two tabs: * **Library** lists the fonts in your company's Asset Library and the global CRAFTSMAN+ fonts. * **Google** lists a curated set of Google Fonts, ready to use without downloading or uploading anything. Each font family appears once, with a preview of how it looks. Type in **Search Fonts...** to filter by name. Click a family to apply it. The picker closes, and the text keeps the closest weight and italic to what it had. Choose the family's weight or italic from the **Style** dropdown next to the font size. If a family has only one style, it's the only option. To use your own font, upload it to the Asset Library and it appears in the **Library** tab. See [Uploading Assets](/asset-library/uploading-assets.md). {% hint style="info" %} Every font a playable uses is embedded in the export, including Google Fonts, so the playable never loads fonts from the internet. Each font family adds its full file size to your playable. Keep to one or two families to save space. {% endhint %} ### Auto-Size With **Auto-Size** on, the text box acts as a safe area that your text always fits inside. Resize the box with any handle, or change its width and height in the Transform section, and the font size recalculates so the text fills the new box without overflowing it. Editing the content works the same way: type, paste, or delete text and it refits automatically. The **Font Size** field shows the current calculated size. New Text layers are created with Auto-Size on. Text layers from before Auto-Size existed keep it off until you turn it on. With Auto-Size off, resizing only changes the bounds of the text box, and the font size stays where you set it. Entering a font size for the whole layer turns Auto-Size off for the current orientation. Sizes you set on part of the text keep their proportion to the layer size as Auto-Size scales it. Rotating a layer never changes the size of the text. {% hint style="info" %} *Auto-Size is saved independently for each orientation. Turning it off in portrait, for example, leaves it on in landscape until you change it there as well.* {% endhint %} {% hint style="info" %} Once part of the text has its own size, font, style, or spacing, Auto-Size fits each line you typed onto a single line instead of wrapping it. Long lines can shrink the whole layer. Press **Enter** to break long lines where you want them. {% endhint %} ### Gradient Text A gradient on text with a single style stretches across the whole text block. When part of the text is styled differently, the gradient restarts on each line and at each change of style. See [Color Selector](/play/general/color-selector.md) for how to build a gradient. ### Animated Banners In Animated Banner projects, text is edited in a popup instead of on the canvas, with **Bold** and **Italic** buttons. Banner text uses one style for the whole layer, and Color Fill is solid only. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://help.craftsmanplus.com/play/layers/text.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.