> ## 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.
</Warning>

## TypographyTokens

```kotlin theme={"dark"}
data class TypographyTokens(
    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),
)
```

| 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  |

All tokens use the **Inter** variable font by default. Override `font` to use your own font resource.

### Preview

<div className="token-typography-preview" style={{fontSize: "24px", fontWeight: 550, lineHeight: "32px", letterSpacing: "-0.6px"}}>
  titleXlarge — The quick brown fox jumps over the lazy dog
</div>

<div className="token-typography-preview" style={{fontSize: "16px", fontWeight: 550, lineHeight: "20px", letterSpacing: "-0.2px"}}>
  titleLarge — The quick brown fox jumps over the lazy dog
</div>

<div className="token-typography-preview" style={{fontSize: "16px", fontWeight: 400, lineHeight: "20px", letterSpacing: "-0.2px"}}>
  bodyLarge — The quick brown fox jumps over the lazy dog
</div>

<div className="token-typography-preview" style={{fontSize: "14px", fontWeight: 400, lineHeight: "20px", letterSpacing: "0px"}}>
  bodyMedium — The quick brown fox jumps over the lazy dog
</div>

<div className="token-typography-preview" style={{fontSize: "12px", fontWeight: 400, lineHeight: "16px", letterSpacing: "0px"}}>
  bodySmall — The quick brown fox jumps over the lazy dog
</div>

## 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.