> For the complete documentation index, see [llms.txt](https://cardstock-studio.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cardstock-studio.gitbook.io/docs/design/templates-design-your-cards/layers/text-layer.md).
# Text Layer
Text layers allow you to put...text on your cards!
***
## Font Styling
You can use any of the Fonts in your system — and the "Fonts" list includes a "favorite" option so you can see your favorite Fonts at the top of the list.
Standard options will apply to the entire text block like "Bold", "Italics", the font size, and the wrap mode.
{% hint style="warning" %}
## Text layers will not be visible without a *Fill*, *Gradient Fill*, or *Image Fill* Component.
{% endhint %}
***
## Additional Options
### Scale to Fit
Use the [Text Scale to Fit](/docs/design/templates-design-your-cards/components/text-scale-to-fit.md) component to automatically scale text up or down to fill the layer area.
### Fit to Text
Use the [Fit Layer to Text](/docs/design/templates-design-your-cards/components/fit-layer-to-text.md) component to automatically grow and shrink the area based on the text.
This is combined with Content Size Fitter to keep the background growing too.
### Letter & Line
These will determine the letter spacing and line spacing for the Text.
### Align & V-Align
This controls the horizontal and vertical alignment for the Text.
***
## In-Line Font Formatting
Want a word in **bold**, a phrase in red, or a footnote-sized superscript? Two routes — pick based on how often the same look recurs.
### One-off: simple tags inline
For a single span you don't expect to reuse, drop the formatting straight into the text. Each tag wraps the chunk you want styled and closes with ``:
{% code overflow="wrap" %}
```
This is important and nuanced.An underlined phrase. Crossed out.
```
{% endcode %}
That covers the four basics. The full set:
| Tag | Effect | Example |
| ---------------------------------- | --------------------------------------------------- | -------------------------------------------------------- |
| `` `` | Bold | `+1` |
| `` `` | Italic | `flavor text` |
| `` `` | Underline | `linked phrase` |
| `` `` | Strikethrough | `old price` |
| `` `` | Text color (any CSS color) | `red`, `blue` |
| `` `` | Text color by Global Value | `` |
| `` `` | Absolute pixel size | `small` |
| `` `.` | Relative to the active font | `BIG` |
| `` `` | Same idea — 140% ≡ 1.4em | `bigger` |
| `` `` | 0.85× shorthand | `fine print` |
| `` `` | 1.15× shorthand | `HEADLINE` |
| `` `` | Font family override | `aside` |
| `` `` | Solid background highlight | `watch out` |
| `` `` | Superscript (0.65× size, shifted up) | `HP+1` |
| `` `` | Subscript (0.65× size, shifted down) | `H2O` |
| ` ` | Hard line break (also accepts ` ` and ` `) | `Line one Line two` |
Tags **nest freely** and combine with each other and with the inline `` and `` forms:
{% code overflow="wrap" %}
```
On turn 3, roll a red die.Each face gives +1 .See p.14 for details.
```
{% endcode %}
{% hint style="warning" %}
**One nesting rule:** close in reverse open order. `foobarbaz` is fine; `foobarbaz` is not — the renderer will close whichever tag was opened last regardless of which closer it sees. Stick to balanced nesting and you'll be fine.
{% endhint %}
***
### Recurring looks: a Text Style Preset
If the same combination shows up on many cards — say, "every keyword is bold magenta with a yellow halo" — defining it once as a **Text Style Preset** is cleaner than retyping the same chain of tags everywhere.
Visit [Text Style Presets](/docs/design/text-style-presets.md) for more details. Presets and inline tags compose freely in either direction:
{% code overflow="wrap" %}
```
This is important: do not lose this card.
```
{% endcode %}
Inside the ``, the surrounding `Callout` preset's font / color / background still apply unless `` overrides them.
### Notes
* **Color values** accept anything CSS understands: `#rgb`, `#rrggbb`, `rgb(...)`, `rgba(...)`, named keywords (`tomato`, `rebeccapurple`).
* **`` units** — bare number is pixels, `em` and `%` are relative to whatever font size is active where the tag opens (so a `` inside a `` compounds with it).
* **`` / `` shifts** are relative to the parent font size, not the post-shrink size — they keep their position correct even when nested inside a `` or another sized span.
* **` `** is identical to a hard newline (`\n`) text. Use whichever reads cleaner.
* **``** uses the same family-name format as the Font dropdown in the properties panel. Misspell the family and the renderer falls back to the platform default.
---
# 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 dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://cardstock-studio.gitbook.io/docs/design/templates-design-your-cards/layers/text-layer.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.
