# Typography

## General info

Using font: [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Plex+Sans)
Font is being set on text component level, with `sans-serif` as a backup option

## Typical usage

### Titles

```typescript
<div>
  <H3>H3: Title Big. The five boxing wizards jump quickly.</H3>
  <H4>H4: Title Regular. The five boxing wizards jump quickly.</H4>
  <H5>H5: Title Small. The five boxing wizards jump quickly.</H5>
</div>
```

### Text

```typescript
<div>
  <TextBig>TextBig: The five boxing wizards jump quickly.</TextBig>
  <Text>Text: (Regular) The five boxing wizards jump quickly.</Text>
  <TextSmall>TextSmall: The five boxing wizards jump quickly.</TextSmall>
  <TextNano>TextNano: The five boxing wizards jump quickly.</TextNano>
  <TextFemto>TextFemto: The five boxing wizards jump quickly.</TextFemto>
</div>
```

### Lists

```typescript
<List>
  <ListItem>My list item 1</ListItem>
  <ListItem>My list item 2 and my list item 2-2</ListItem>
  <ListItem>My list item 3</ListItem>
  <ListItem>My list item 4</ListItem>
</List>
```