# Typography

We use typography to create clear, consistent, and visually harmonious text across our products.

## Usage

Use the named variants of `Text` to apply the font family, responsive size, and line height together. Choose the HTML element with `as` independently of its visual style.

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

## Headings

- `heading-5xl`

  Telescope

- `heading-4xl`

  Telescope

- `heading-3xl`

  Telescope

- `heading-2xl`

  Telescope

- `heading-xl`

  Telescope

- `heading-l`

  Telescope

- `heading-m`

  Telescope

- `heading-s`

  Telescope

## Body

- `body-l`

  Telescope

- `body-l-link-inline`

  Telescope

- `body-m`

  Telescope

- `body-m-link-inline`

  Telescope

- `body-s`

  Telescope

- `body-s-link-inline`

  Telescope

## Labels

- `label-3xl-display`

  Telescope

- `label-2xl-display`

  Telescope

- `label-l`

  Telescope

- `label-l-strong`

  Telescope

- `label-l-link`

  Telescope

- `label-m`

  Telescope

- `label-m-strong`

  Telescope

- `label-m-link`

  Telescope

- `label-s`

  Telescope

- `label-s-strong`

  Telescope

- `label-s-link`

  Telescope

## Blockquotes

- `blockquotes-s`

  Telescope