> ## Documentation Index
> Fetch the complete documentation index at: https://docs.visualradioassist.live/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Use the names from the glossary at https://docs.visualradioassist.live/glossary: Audio Manager (two words), command (never commando), on air and off air (never live) for programs and studios, and server apps for the VRA apps installed in the studio.
> Say which app an answer applies to, like VRA Cloud, the Core or the Output Player, and the version when the page names one.
> Only give settings, values and steps that are in these docs. Never invent one. If the docs don't cover it, say so.
> When the docs don't answer the question, send the user to Visual Radio Assist support at https://cloud.visualradioassist.live/support.

# Text styles

> Save the look of a headline as a named text style and reuse it in every visual. Editing the style updates every text layer that uses it.

A text style saves the look of text under a name, like **Heading 1**, so every lower third and title screen uses the same type. A text layer that uses a style is linked to it: edit the style and every layer with that style changes, in every visual of the station.

## Text styles every station starts with

A new station starts with four text styles:

| Style | Size | Line height |
| - | - | - |
| **Heading 1** | 48 | 1.1 |
| **Heading 2** | 36 | 1.2 |
| **Heading 3** | 28 | 1.2 |
| **Paragraph** | 24 | 1.5 |

**Paragraph** is the default style and can't be deleted. A station that already sized its text in custom CSS starts with all four at 24 instead. A website import can replace these sizes with the ones from your site, see [Set up your station branding](https://docs.visualradioassist.live/visual-designer/branding.md#import-your-branding-from-your-website).

## Manage text styles in Branding

Go to **Settings → Outputs → Branding** and click **Open editor** next to **Text styles**. Changes in this editor save on their own, separate from **Save branding**.

* Click **New style** to add a style, then **Save style**.
* Open the menu of a style for **Edit**, **Duplicate** or **Delete**.
* Drag a style to reorder it.

A style marked **Overridden** is restyled by the station's custom CSS, so the CSS wins over the style.

![](https://mintcdn.com/visualradioassist/cfPiQE-fjZkzRKZ8/images/visual-designer/text-styles/1.png?fit=max\&auto=format\&n=cfPiQE-fjZkzRKZ8\&q=85\&s=cd975e1bedbfedee585a36b93a985ef0)

## Text style settings

Each text style stores these type settings.

| Setting | What it does | Values |
| - | - | - |
| **Name** | The name in the style list. | Text |
| **Key** | The name the visual uses to find the style. | Made from the name, like `heading-1`. The four starting styles use `h1` to `h3` and `p` |
| **Font** | The typeface. **Brand fonts** follow the heading or body font in Branding, **Station fonts** are fixed. | Your station fonts |
| **Weight** | How bold the text is. | 100 to 900 |
| **Size** | The font size. | 1 to 400 |
| **Line height** | The space between lines, relative to the size. | 0.5 to 5 |
| **Letter spacing** | Extra space between letters. | -1 to 1 em |
| **Tag** | The HTML tag of the text. | H1 to H6, P |
| **Align** | The text alignment. | Auto, left, center, right |
| **Transform** | The casing of the text. | None, Upper, Lower, Title |
| **Decoration** | A line on the text. | None, underline, strikethrough |
| **Color** | The text color. Can link to a [brand color](https://docs.visualradioassist.live/visual-designer/brand-colors.md). | A color |

> [!WARNING]
>
> Changing the **Key** of a style that is already in use disconnects every
> layer that uses it. Change the **Name** instead. It is only a label.

## Apply a text style to a text layer

Select a text layer and open **Style** under **Typography**. Search or pick a style. The layer takes over the font, size, weight, alignment and color of the style.

Pick **Custom** to style the layer by hand. Only then are **Font**, **Weight** and **Size** shown for the layer itself.

Click **New style** in the list to create a style from the Visual Designer.

## Edit a text style from the Visual Designer

Click **Edit style** under the style picker. The change applies to every layer that uses the style, in every visual. Click **Save style** to keep it.

To change only this layer, click **Detach** instead. The layer keeps the font, weight, size and color of the style and switches to **Custom**.

## Delete a text style

Open the menu of a style in the Branding editor and choose **Delete**. Layers that use it render unstyled. **Paragraph** can't be deleted.

## Related

* [Set up your station branding](https://docs.visualradioassist.live/visual-designer/branding.md)
* [Use your custom font](https://docs.visualradioassist.live/getting-started/use-your-custom-font.md)
* [Brand colors](https://docs.visualradioassist.live/visual-designer/brand-colors.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.