Apple TV Docs

TV Text Style

TVML offer's several different ways to style text. One thing that should be noted is that Apple TV apps are not HTML. The styling of apps should be more consistent with the Apple Design Language vs creating highly custom branded apps.

Below are some of the design patterns for text that will help you know what's available.

Text Styles

<?xml version="1.0" encoding="UTF-8"?>
<document>
    <descriptiveAlertTemplate>
        <infoTable>
            <info style="text-align: center; tv-line-spacing: 10;">
                <text style="tv-text-style: body;">body</text>
                <text style="tv-text-style: callout;">callout</text>
                <text style="tv-text-style: caption1;">caption1</text>
                <text style="tv-text-style: caption2;">caption2</text>
                <text style="tv-text-style: footnote;">footnote</text>
                <text style="tv-text-style: headline;">headline</text>
                <text style="tv-text-style: subhead;">subhead</text>
                <text style="tv-text-style: subtitle1;">subtitle1</text>
                <text style="tv-text-style: subtitle2;">subtitle2</text>
                <text style="tv-text-style: subtitle3;">subtitle3</text>
                <text style="tv-text-style: title1;">title1</text>
                <text style="tv-text-style: title2;">title2</text>
                <text style="tv-text-style: title3;">title3</text>
            </info>
        </infoTable>
    </descriptiveAlertTemplate>
</document>

Font Weight

<?xml version="1.0" encoding="UTF-8"?>
<document>
    <head>
        <style>
            .font {
                tv-text-style: title3;
            }
        </style>
    </head>
    <descriptiveAlertTemplate>
        <infoTable>
            <info style="text-align: center; tv-line-spacing: 10;">
                <text class="font" style="font-weight: ultralight;">ultralight</text>
                <text class="font" style="font-weight: thin;">thin</text>
                <text class="font" style="font-weight: light;">light</text>
                <text class="font" style="font-weight: regular;">regular</text>
                <text class="font" style="font-weight: medium;">medium</text>
                <text class="font" style="font-weight: semibold;">semibold</text>
                <text class="font" style="font-weight: bold;">bold</text>
                <text class="font" style="font-weight: heavy;">heavy</text>
                <text class="font" style="font-weight: black;">black</text>
            </info>
        </infoTable>
    </descriptiveAlertTemplate>
</document>

Text Tags (Bold/Italic/Strike)

<?xml version="1.0" encoding="UTF-8"?>
<document>
    <head>
        <style>
            .font {
                tv-text-style: title3;
            }
        </style>
    </head>
    <descriptiveAlertTemplate>
        <infoTable>
            <info style="text-align: center; tv-line-spacing: 10;">
                <text class="font">This is <b>Bold</b> text</text>
                <text class="font">This is <i>Italic</i> text</text>
                <text class="font">This is <strike>Strike</strike> text</text>
            </info>
        </infoTable>
    </descriptiveAlertTemplate>
</document>

Font Family

<?xml version="1.0" encoding="UTF-8"?>
<document>
    <head>
        <style>
            .font {
                tv-text-style: none;
                font-size: 48;
            }
        </style>
    </head>
    <descriptiveAlertTemplate>
        <infoTable>
            <info style="text-align: center; tv-line-spacing: 10;">
                <text class="font" style="font-family: 'Apple SD Gothic Neo';">Apple SD Gothic Neo</text>
                <text class="font" style="font-family: 'Arial';">Arial</text>
                <text class="font" style="font-family: 'Copperplate';">Copperplate</text>
                <text class="font" style="font-family: 'Courier';">Courier</text>
                <text class="font" style="font-family: 'Helvetica';">Helvetica</text>
                <text class="font" style="font-family: 'Helvetica Neue';">Helvetica Neue</text>
                <text class="font" style="font-family: 'Menlo';">Menlo</text>
                <text class="font" style="font-family: 'Times New Roman';">Times New Roman</text>
                <text class="font" style="font-family: 'TimesNewRomanPS-BoldMT';">Times New Roman Bold</text>
                <text class="font" style="font-family: 'Trebuchet MS';">Trebuchet MS</text>
            </info>
        </infoTable>
    </descriptiveAlertTemplate>
</document>

Text Shadow

https://developer.apple.com/documentation/tvml/text-shadow

Text shadows are great for titles overlaid on images and can be defined with the following syntax:

  1. The horizontal shadow movement
  2. The vertical shadow movement
  3. The blur radius
  4. The color and transparency
<text style="text-shadow: 0px 1px 10px rgba(0,0,0,0.5);">Summer Camp</text>

Shadows may get clipped vertically depending on the wrapper size, so it's recommended to keep the shadow close to the text.