> ## 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.1).
  The API is subject to change before the stable release.
</Warning>

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

<Info>
  All tokens use the **Inter** font with their documented defaults. You only override the tokens and properties you want to change.
</Info>

## TypographyOverrides

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

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

| Token         | Type               | Default | Description                                                                                                     |
| ------------- | ------------------ | ------- | --------------------------------------------------------------------------------------------------------------- |
| `titleXlarge` | `TypographyStyle?` | `nil`   | Title extra large: Inter, -0.6 letter spacing, weight 550, size 24, line height 32. Used for sheet titles.      |
| `titleLarge`  | `TypographyStyle?` | `nil`   | Title large: Inter, -0.2 letter spacing, weight 550, size 16, line height 20. Used for section headers.         |
| `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 labels and descriptions.    |
| `bodySmall`   | `TypographyStyle?` | `nil`   | Body small: Inter, 0 letter spacing, weight 400, size 12, line height 16. Used for helper text and errors.      |

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

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.
</Note>

| Property        | Type           | Default | Description                                                  |
| --------------- | -------------- | ------- | ------------------------------------------------------------ |
| `font`          | `String?`      | `nil`   | Custom font family name (e.g., `"Inter"`)                    |
| `letterSpacing` | `CGFloat?`     | `nil`   | Letter spacing in points                                     |
| `weight`        | `Font.Weight?` | `nil`   | SwiftUI font weight (e.g., `.regular`, `.semibold`, `.bold`) |
| `size`          | `CGFloat?`     | `nil`   | Font size in points                                          |
| `lineHeight`    | `CGFloat?`     | `nil`   | Line height in points                                        |

## 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(
    titleXlarge: .init(
      font: "Inter",
      weight: .bold,
      size: 28,
      lineHeight: 36
    ),
    bodyLarge: .init(
      letterSpacing: 0,
      size: 17
    ),
    bodySmall: .init(
      weight: .medium,
      size: 13
    )
  )
)
```

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

## See also

<CardGroup cols={2}>
  <Card title="PrimerTheme" icon="palette" href="/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/primer-theme">
    Assemble and apply a complete theme with all token overrides.
  </Card>

  <Card title="Color Tokens" icon="droplet" href="/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/color-tokens">
    Override the color tokens used across the checkout UI.
  </Card>

  <Card title="Spacing Tokens" icon="ruler" href="/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/spacing-tokens">
    Adjust spacing tokens for padding and layout.
  </Card>

  <Card title="Shape Tokens" icon="shapes" href="/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/shape-tokens">
    Customize corner radius and border width tokens.
  </Card>
</CardGroup>