---
title: "Typography — React"
canonical: https://sky-ui.cf.sky.com/foundations/typography/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Typography — React

Set of font sizes and weights ensuring consistent typographic styles.

The `Text` component allows for the ability to write content with a consistent typographic scale. It supports different font sizes and variants to suit various use cases, for more information on when to use each visit our [Text Usage](/components/text/usage) section.

Headline Display 1
  Headline Display 2
  Headline Display 3
  Headline Display 4
  Headline Display 5

  Display 1
  Display 2
  Display 3
  Display 4
  Display 5
  Display 6
  Display 7

  Body Large
  Body
  Body Small

  Legal

## Usage

```js
import { typography } from '@sky-uk/ui-core'

${typography('body')}

// returns
{
    fontSize: '18px',
    lineHeight: '28px'
},
```

## Default Typography

The default typography styles use the `Sky Text` font family.

```js
${typography('display-1')}
${typography('display-1', 'default')}
```

### Available Sizes

| Name | fontSize | lineHeight |
| --- | --- | --- |
| display-1 | 80px | 104px |
| display-2 | 64px | 84px |
| display-3 | 48px | 64px |
| display-4 | 40px | 52px |
| display-5 | 28px | 40px |
| display-6 | 20px | 24px |
| display-7 | 16px | 20px |
| body-lg | 20px | 32px |
| body | 18px | 28px |
| body-sm | 16px | 24px |
| legal | 14px | 24px |

**Important:** `display-6` and `display-7` are primarily intended for single line headings in smaller components
  such as cards where a tighter line height is beneficial.

## Headline Typography

The headline typography styles use the `Sky Headline` font family using the second parameter to `headline`.

```js
${typography('display-1', 'headline')}
```

### Available Sizes

| Name | fontSize | lineHeight |
| --- | --- | --- |
| display-1 | 56px | 64px |
| display-2 | 44px | 52px |
| display-3 | 32px | 40px |
| display-4 | 28px | 36px |
| display-5 | 24px | 28px |