# Typography

Typography tokens define the font families, sizes, weights, and line heights in our type system.

## Use the Text component

Always use the [`Text` component](/components/web/text/text.guidelines) for product typography, rather than applying font tokens directly. Its named variants keep font family, size, weight, and line height consistent.

Choose the visual style with `variant` and the semantic HTML element independently with `as`.

```tsx
import {Text} from '@pleo-io/telescope'

<Text as="h2" variant="heading-m">Payment details</Text>
<Text as="p" variant="body-m">Add the details for your payment.</Text>
```

See the [Text guidelines](/components/web/text/text.guidelines) for available variants and usage, and the [Text API reference](/components/web/text/text.code) for component props.

## Font family

| Token                | Value                                                                                                                   |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `fontBody`           | 'Pleo Scandi Gellix Text', Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif     |
| `fontHeading`        | 'Pleo Scandi Gellix Headline', Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif |
| `fontBodyItalics`    | 'Pleo Scandi Gellix Text', Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif     |
| `fontHeadingItalics` | 'Pleo Scandi Gellix Headline', Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif |

## Font size

| Token                 | Value |
| --------------------- | ----- |
| `fontSizeBaseline10x` | 20px  |
| `fontSizeBaseline13x` | 26px  |
| `fontSizeBaseline15x` | 30px  |
| `fontSizeBaseline16x` | 32px  |
| `fontSizeBaseline18x` | 36px  |
| `fontSizeBaseline21x` | 42px  |
| `fontSizeBaseline22x` | 44px  |
| `fontSizeBaseline25x` | 50px  |
| `fontSizeBaseline29x` | 58px  |
| `fontSizeBaseline39x` | 78px  |
| `fontSizeBaseline7x`  | 14px  |
| `fontSizeBaseline8x`  | 16px  |

## Font weight

Font weight tokens have no effect on the main application font. Use the `Text` component's named variants to apply the intended typography.

| Token                | Value |
| -------------------- | ----- |
| `fontWeightRegular`  | 400   |
| `fontWeightMedium`   | 500   |
| `fontWeightSemibold` | 600   |
| `fontWeightBold`     | 700   |

## Line height

| Token            | Value   |
| ---------------- | ------- |
| `lineHeight18`   | 18px    |
| `lineHeight182`  | 18.2px  |
| `lineHeight19`   | 19px    |
| `lineHeight192`  | 19.2px  |
| `lineHeight24`   | 24px    |
| `lineHeight31`   | 31px    |
| `lineHeight312`  | 31.2px  |
| `lineHeight36`   | 36px    |
| `lineHeight38`   | 38px    |
| `lineHeight4176` | 41.76px |
| `lineHeight4872` | 48.72px |
| `lineHeight51`   | 51px    |
| `lineHeight5104` | 51.04px |
| `lineHeight56`   | 56px    |
| `lineHeight67`   | 67px    |
| `lineHeight6728` | 67.28px |
| `lineHeight90`   | 90px    |