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

# TypographyTokens

> Typography tokens for font styles, sizes, and weights across components

> [!WARNING]
>
> Primer Checkout Android SDK is currently in **beta** (v3.0.0-beta).
> The API is subject to change before the stable release.

## TypographyTokens

```kotlin theme={"dark"}
data class TypographyTokens(
    @FontRes val brandFont: Int = R.font.inter,
    val titleXlarge: TypographyStyle = TypographyStyle(size = 24, weight = 550, lineHeight = 32, letterSpacing = -0.6f),
    val titleLarge: TypographyStyle = TypographyStyle(size = 16, weight = 550, lineHeight = 20, letterSpacing = -0.2f),
    val bodyLarge: TypographyStyle = TypographyStyle(size = 16, weight = 400, lineHeight = 20, letterSpacing = -0.2f),
    val bodyMedium: TypographyStyle = TypographyStyle(size = 14, weight = 400, lineHeight = 20, letterSpacing = 0f),
    val bodySmall: TypographyStyle = TypographyStyle(size = 12, weight = 400, lineHeight = 16, letterSpacing = 0f),
    val error: TypographyStyle? = null,
)
```

| Token | Size | Weight | Line height | Usage |
| - | - | - | - | - |
| `titleXlarge` | 24sp | 550 | 32sp | Sheet titles |
| `titleLarge` | 16sp | 550 | 20sp | Section headers |
| `bodyLarge` | 16sp | 400 | 20sp | Input text, body |
| `bodyMedium` | 14sp | 400 | 20sp | Labels, descriptions |
| `bodySmall` | 12sp | 400 | 16sp | Helper text, errors |
| `error` | -- | -- | -- | Error text. `null` by default, so error text follows `bodySmall` |

All styles use `brandFont`, the **Inter** variable font by default. Set `brandFont` in the constructor to use your own font resource for every style, or override `font` on a single style.

```kotlin theme={"dark"}
val typography = TypographyTokens(brandFont = R.font.my_brand_font)
```

### Preview

titleXlarge — The quick brown fox jumps over the lazy dog

titleLarge — The quick brown fox jumps over the lazy dog

bodyLarge — The quick brown fox jumps over the lazy dog

bodyMedium — The quick brown fox jumps over the lazy dog

bodySmall — The quick brown fox jumps over the lazy dog

## TypographyStyle

```kotlin theme={"dark"}
data class TypographyStyle(
    @FontRes val font: Int,
    val letterSpacing: Float,
    val weight: Int,
    val size: Int,
    val lineHeight: Int,
)
```

| Property | Type | Description |
| - | - | - |
| `font` | `Int` | Android font resource ID (`@FontRes`). Defaults to Inter variable font. |
| `letterSpacing` | `Float` | Letter spacing in sp |
| `weight` | `Int` | Font weight (400 = regular, 550 = semi-bold, 700 = bold) |
| `size` | `Int` | Font size in sp |
| `lineHeight` | `Int` | Line height in sp |

### toTextStyle()

```kotlin theme={"dark"}
fun toTextStyle(): TextStyle
```

Converts to a Compose `TextStyle` for use in composables.


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