---
name: Typography
menu: Components
route: /components/typography
---

import { Typography, Presets } from './';
import { Playground } from 'docz';

# Typography

The `<Typography/>` component is used for all text-based components and allows you to flexibly customise it's appearance. This component is also used inside lots of other components, such as `<Button/>`.

## Import

```js
import { Typography } from '@firstclasspostcodes/sw13';
// or
import { Typography } from '@firstclasspostcodes/sw13/lib/components/Typography';
```

## Presets

This component also has an accompanying set of presets identified by their standard HTML tags, `h1`...`h6` and `p`. These presets provide a set of overridable defauts for headings and text.

```js
import { Typography, Presets } from '@firstclasspostcodes/sw13/lib/components/Typography';
```

Here is an example of their usage:

<Playground>
  <Typography {...Presets.h1}>I'm a preset</Typography>
</Playground>


## Props

| Prop | Type | Description |
|:----:|:-----|:------------|
| `hue` | `0` to `9` | The hue for the corresponding color. |
| `color` | See [Colors](#colors) | The color of the text. |
| `weight` | `thin`, `extraLight`, `light`, `regular`, `medium`, `semiBold`, `bold`, `black` | The weight of the text |
| `italic` | `boolean` | Whether or not the text is italicized. |
| `size` | `0` to `6` | The size of the text, `0` indicates a `<p/>` size element. |
| `baseline` | `boolean` | Adjust the baseline of the text to improve vertical rhythm. |

## Example

<Playground>
  <Typography hue="5" italic={false} color="green" weight="medium" size="2">This is some text</Typography>
</Playground>