---
title: "SubtitleStyles (legacy)"
canonical_url: https://docs.zvid.io/docs/structure/properties/subtitle-styles/
source: docs/structure/properties/subtitle-styles.md
content_revision: 6338386a1dd87e4a
---

# SubtitleStyles (legacy)

`SubtitleStyles` is the **legacy** style block for subtitles. It is still
accepted by the renderer, but new projects
should use the flat fields on [`Subtitle`](https://docs.zvid.io/docs/structure/subtitle/) (`animation`,
`font`, `stroke`, `background`, `position`, `margin`, …). A subtitle object
cannot combine `styles` with the flat style fields.

```typescript
interface SubtitleStyles {
  color?: string;
  background?: string;
  backgroundPadding?: number;
  backgroundRadius?: number;
  isBold?: boolean;
  isItalic?: boolean;
  fontSize?: number;
  fontFamily?: string;
  textTransform?: "uppercase" | "lowercase" | "capitalize";
  outline?: {
    width: number;
    color: string;
  };
  position?:
    | "top-left"
    | "top-center"
    | "top-right"
    | "bottom-left"
    | "bottom-center"
    | "bottom-right"
    | "center-center"
    | "center-left"
    | "center-right";
  marginV?: number;
  marginH?: number;
  mode?:
    | "normal"
    | "none"
    | "one-word"
    | "karaoke"
    | "progressive"
    | "highlight"
    | "fill"
    | "pop"
    | "bounce"
    | "fade"
    | "typewriter"
    | "slide";
  slideDirection?: "up" | "down" | "left" | "right";
  activeWord?: {
    color?: string;
    background?: string;
    radius?: number;
  };
}
```

| Property             | Default            | Flat equivalent on `Subtitle`   | Notes                                                                          |
| -------------------- | ------------------ | ------------------------------- | ------------------------------------------------------------------------------ |
| `color`              | `#FFFFFF`          | `font.color`                    | Hex with optional alpha.                                                       |
| `background`         | none               | `background.color` (+`opacity`) | Hex with optional alpha.                                                       |
| `backgroundPadding`  | `0`                | `background.padding`            | Box padding in px.                                                             |
| `backgroundRadius`   | `0`                | `background.radius`             | Corner radius in pixels, 0–200.                                                |
| `fontSize`           | `50`               | `font.size`                     | Pixels.                                                                        |
| `fontFamily`         | `Poppins`          | `font.family`                   | Google Fonts family name.                                                      |
| `isBold`, `isItalic` | `false`            | `font.bold`, `font.italic`      | Typography flags.                                                              |
| `textTransform`      | none               | `font.transform`                | `uppercase`, `lowercase`, or `capitalize`.                                     |
| `outline`            | none               | `stroke`                        | Requires `width` and `color`.                                                  |
| `position`           | `bottom-center`    | `position`                      | Full 9-grid; flat form adds `top`/`center`/`bottom`.                           |
| `marginV`, `marginH` | 5% of project size | `margin.y`, `margin.x`          | Integer pixels.                                                                |
| `mode`               | `normal`           | `animation`                     | All documented modes; `none` aliases `normal`. See [Subtitle](https://docs.zvid.io/docs/structure/subtitle/). |
| `slideDirection`     | `up`               | `direction`                     | `slide` mode only.                                                             |
| `activeWord`         | none               | `activeWord`                    | Color/background and optional `radius` (0–200 pixels) of the spoken word.      |

## Used By

- [Subtitle](https://docs.zvid.io/docs/structure/subtitle/)