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

# Typography Tokens

> Typography override tokens for text styles

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

`TypographyOverrides` lets you override the typography tokens used across Primer Checkout text styles. Pass it to a `PrimerCheckoutTheme` through the `typography` parameter. Every token is optional — any token you leave `nil` falls back to the internal default, and within a token any `nil` property falls back to its default value.

> [!NOTE]
>
> Every style uses the `brand` font family, which defaults to **Inter**. Set `brand` to change the typeface of the whole checkout in one place. Set `font` on a single style to change only that style. A `bodySmall` font also applies to `error` unless you set `error.font`, and to the text in card network badges. You only override the tokens and properties you want to change.

## TypographyOverrides

```swift theme={"dark"}
@available(iOS 15.0, *)
public struct TypographyOverrides: Equatable {
  public let brand: String?
  public let titleXlarge: TypographyStyle?
  public let titleLarge: TypographyStyle?
  public let bodyLarge: TypographyStyle?
  public let bodyMedium: TypographyStyle?
  public let bodySmall: TypographyStyle?
  public let error: TypographyStyle?

  public init(
    brand: String? = nil,
    titleXlarge: TypographyStyle? = nil,
    titleLarge: TypographyStyle? = nil,
    bodyLarge: TypographyStyle? = nil,
    bodyMedium: TypographyStyle? = nil,
    bodySmall: TypographyStyle? = nil,
    error: TypographyStyle? = nil
  )
}
```

| Token | Type | Default | Description |
| - | - | - | - |
| `brand` | `String?` | `nil` | Font family that every style below falls back to (default Inter), so one typeface covers the whole checkout. A style that sets its own `font` wins over it. A value written in token syntax (for example `"{...}"`) is ignored and an error is logged. |
| `titleXlarge` | `TypographyStyle?` | `nil` | Title extra large: Inter, -0.6 letter spacing, weight 550, size 24, line height 32. Used for screen titles. |
| `titleLarge` | `TypographyStyle?` | `nil` | Title large: Inter, -0.2 letter spacing, weight 550, size 16, line height 20. Used for section headers, header buttons such as Back, button labels and payment method rows. |
| `bodyLarge` | `TypographyStyle?` | `nil` | Body large: Inter, -0.2 letter spacing, weight 400, size 16, line height 20. Used for input text and body copy. |
| `bodyMedium` | `TypographyStyle?` | `nil` | Body medium: Inter, 0 letter spacing, weight 400, size 14, line height 20. Used for body copy on status, loading and Apple Pay screens. |
| `bodySmall` | `TypographyStyle?` | `nil` | Body small: Inter, 0 letter spacing, weight 400, size 12, line height 16. Used for field labels and helper text. |
| `error` | `TypographyStyle?` | `nil` | Field error text. Defaults to the body small values (Inter, 0 letter spacing, weight 400, size 12, line height 16). Any property you leave `nil` follows your `bodySmall` override. Set it only to style errors on their own. |

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

error — The quick brown fox jumps over the lazy dog

## TypographyStyle

A single typography style. All properties are optional — any `nil` property falls back to the token default.

```swift theme={"dark"}
@available(iOS 15.0, *)
public struct TypographyStyle: Equatable {
  public let font: String?
  public let letterSpacing: CGFloat?
  public let weight: Font.Weight?
  public let size: CGFloat?
  public let lineHeight: CGFloat?

  public init(
    font: String? = nil,
    letterSpacing: CGFloat? = nil,
    weight: Font.Weight? = nil,
    size: CGFloat? = nil,
    lineHeight: CGFloat? = nil
  )
}
```

> [!NOTE]
>
> `TypographyStyle` is nested inside `TypographyOverrides`, so refer to it as `TypographyOverrides.TypographyStyle` when you need the fully qualified name.

| Property | Type | Default | Description |
| - | - | - | - |
| `font` | `String?` | `nil` | Custom font family name (e.g., `"Inter"`) |
| `letterSpacing` | `CGFloat?` | `nil` | Letter spacing in points, scaled with Dynamic Type. On iOS 16 and later it applies to all text except card network badge text. On iOS 15 only the `bodyLarge` value applies, and only to the card form, billing address and ACH user details fields. |
| `weight` | `Font.Weight?` | `nil` | SwiftUI font weight, for example `.regular`, `.semibold` or `.bold`. Weights map to the numeric steps 100 to 900. To override the 550 default of `titleXlarge` or `titleLarge`, use `.medium` (500) or `.semibold` (600). |
| `size` | `CGFloat?` | `nil` | Font size in points |
| `lineHeight` | `CGFloat?` | `nil` | Line height in points, scaled with Dynamic Type. It adds space around the text, except in card network badges. A value smaller than the font's natural line height has no effect on the text. The `bodyLarge` line height also sets the input field height: `max(44, 2 × primerSpaceMedium + line height)`, which is 44pt at the defaults. |

## Override example

Override only the tokens and properties you need. Anything you omit keeps its default.

```swift theme={"dark"}
import SwiftUI
import PrimerSDK

let theme = PrimerCheckoutTheme(
  typography: TypographyOverrides(
    brand: "Inter",
    titleXlarge: .init(
      font: "Inter",
      weight: .bold,
      size: 28,
      lineHeight: 36
    ),
    bodyLarge: .init(
      letterSpacing: 0,
      size: 17
    ),
    bodySmall: .init(
      weight: .medium,
      size: 13
    ),
    error: .init(weight: .semibold)
  )
)
```

Pass the theme to your checkout the same way you pass any `PrimerCheckoutTheme`. See [PrimerTheme](https://primer.io/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/primer-theme.md) for how to apply it.

## See also

> [card] [PrimerTheme](https://primer.io/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/primer-theme.md)
>
> Assemble and apply a complete theme with all token overrides.

> [card] [Color Tokens](https://primer.io/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/color-tokens.md)
>
> Override the color tokens used across the checkout UI.

> [card] [Spacing Tokens](https://primer.io/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/spacing-tokens.md)
>
> Adjust spacing tokens for padding and layout.

> [card] [Shape Tokens](https://primer.io/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/shape-tokens.md)
>
> Customize corner radius and border width tokens.


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