Note: Text is responsive - it will automatically change font-size based on screen size.
[This is confusing, we know. You can refer to this for more context](https://www.figma.com/file/iVP8PicuOCAkB7NpswyAWK/RCL---color-%26-type-updates?node-id=135%3A18&viewport=-423%2C177%2C0.8107635974884033)

Text A Example:

```jsx

    <div>
      <Text size={1} font='a'>Type A1</Text>
      <Text size={2} font='a'>Type A2</Text>
      <Text size={3} font='a'>Type A3</Text>
      <Text size={4} font='a'>Type A4</Text>
      <Text size={5} font='a'>Type A5</Text>
      <Text size={6} font='a'>Type A6</Text>
      <Text size={7} font='a'>Type A7</Text>
      <Text size={8} font='a'>Type A8</Text>
      <Text size={9} font='a'>Type A9</Text>
      <Text size={10} font='a'>Type A10</Text>
      <Text size={11} font='a'>Type A11</Text>
    </div>
```

Text A Spaced Example:

```jsx

    <div>
      <Text size={9} font='a' spaced>Type A9</Text>
      <Text size={11} font='a' spaced>Type A11</Text>
    </div>
```

Text B Example:

```jsx

    <div>
      <Text size={5} font='b'>Type B5</Text>
      <Text size={6} font='b'>Type B6</Text>
      <Text size={7} font='b'>Type B7</Text>
      <Text size={8} font='b'>Type B8</Text>
      <Text size={10} font='b'>Type B10</Text>
      <Text size={12} font='b'>Type B11</Text>
    </div>
```

Text C Example:

```jsx

    <div>
      <Text size={7} font='c'>Type C7</Text>
    </div>
```