One scale, two platforms.

Every text style is three tokens that travel together, a size, a family and a weight. Size is the only one that forks, and it forks by platform rather than by brand, because a 72px display line that reads as generous on a desktop is overbearing on a phone. Pick a style by its place in the hierarchy, not by the number you want.

Display

3 styles

The largest expressive type, for hero and marketing moments. Sparing by design, because more than one on a screen means none of them lead.

  • Every story has a thread

    td.text.display.lgWeb 72pxNative 58pxBold

    Display lg font size - 72px Web, 58px Native. Largest expressive type - hero and marketing moments. Platform axis; identical across brands.

  • Every story has a thread

    td.text.display.mdWeb 45pxNative 36pxBold

    Display md font size - 45px Web, 36px Native. Largest expressive type - hero and marketing moments. Platform axis; identical across brands.

  • Every story has a thread

    td.text.display.smWeb 36pxNative 28pxBold

    Display sm font size - 36px Web, 28px Native. Largest expressive type - hero and marketing moments. Platform axis; identical across brands.

Heading

6 styles

Structural type. Headings carry the outline of a page, so pick by level in the hierarchy rather than by the size you want.

  • Every story has a thread

    td.text.heading.2xlWeb 32pxNative 28pxBold

    Heading 2xl font size - 32px Web, 28px Native. Section and page headings. Platform axis; identical across brands.

  • Every story has a thread

    td.text.heading.xlWeb 28pxNative 25pxBold

    Heading xl font size - 28px Web, 25px Native. Section and page headings. Platform axis; identical across brands.

  • Every story has a thread

    td.text.heading.lgWeb 25pxNative 22pxBold

    Heading lg font size - 25px Web, 22px Native. Section and page headings. Platform axis; identical across brands.

  • Every story has a thread

    td.text.heading.mdWeb 22pxNative 20pxBold

    Heading md font size - 22px Web, 20px Native. Section and page headings. Platform axis; identical across brands.

  • Every story has a thread

    td.text.heading.smWeb 20pxNative 18pxBold

    Heading sm font size - 20px Web, 18px Native. Section and page headings. Platform axis; identical across brands.

  • Every story has a thread

    td.text.heading.xsWeb 18pxNative 16pxBold

    Heading xs font size - 18px Web, 16px Native. Section and page headings. Platform axis; identical across brands.

Body

12 styles

Reading type, in four weights. Regular carries prose, while medium, bold and heavy mark emphasis without changing size.

  • Every story has a thread

    td.text.body.medium.xlWeb 18pxNative 17pxMedium

    Body medium xl font size - 18px Web, 17px Native. Running text and UI copy. Platform axis; identical across brands.

  • Every story has a thread

    td.text.body.bold.xlWeb 18pxNative 17pxBold

    Body bold xl font size - 18px Web, 17px Native. Running text and UI copy. Platform axis; identical across brands.

  • Every story has a thread

    td.text.body.regular.lgWeb 16pxNative 15pxRegular

    Body regular lg font size - 16px Web, 15px Native. Running text and UI copy. Platform axis; identical across brands.

  • Every story has a thread

    td.text.body.medium.lgWeb 16pxNative 15pxMedium

    Body medium lg font size - 16px Web, 15px Native. Running text and UI copy. Platform axis; identical across brands.

  • Every story has a thread

    td.text.body.bold.lgWeb 16pxNative 15pxBold

    Body bold lg font size - 16px Web, 15px Native. Running text and UI copy. Platform axis; identical across brands.

  • Every story has a thread

    td.text.body.regular.mdWeb 14pxNative 13pxRegular

    Body regular md font size - 14px Web, 13px Native. Running text and UI copy. Platform axis; identical across brands.

  • Every story has a thread

    td.text.body.medium.mdWeb 14pxNative 13pxMedium

    Body medium md font size - 14px Web, 13px Native. Running text and UI copy. Platform axis; identical across brands.

  • Every story has a thread

    td.text.body.bold.mdWeb 14pxNative 13pxBold

    Body bold md font size - 14px Web, 13px Native. Running text and UI copy. Platform axis; identical across brands.

  • Every story has a thread

    td.text.body.heavy.mdWeb 14pxNative 13pxXBold

    Body heavy md font size - 14px Web, 13px Native. Running text and UI copy. Platform axis; identical across brands.

  • Every story has a thread

    td.text.body.regular.smWeb 12pxNative 11pxRegular

    Body regular sm font size - 12px Web, 11px Native. Running text and UI copy. Platform axis; identical across brands.

  • Every story has a thread

    td.text.body.medium.smWeb 12pxNative 11pxMedium

    Body medium sm font size - 12px Web, 11px Native. Running text and UI copy. Platform axis; identical across brands.

  • Every story has a thread

    td.text.body.bold.smWeb 12pxNative 11pxBold

    Body bold sm font size - 12px Web, 11px Native. Running text and UI copy. Platform axis; identical across brands.