```jsx noeditor
import Note from '../../src/_doc/Note';

<Note type="warning">
These typography rules are not implemented in the app and are still a work in progress.
</Note>
```

Our [brand page](https://convertkit.com/brand) lists our brand typefaces. This document shows how we use them around the application. [Open sans](https://fonts.google.com/specimen/Open+Sans?query=open+sans) is used around the application for headings, paragraph, and all text needs.

**Open Sans** is an open-source, humanist sans-serif typeface designed by Steve Matteson and released in 2011. The five weights with matching italics make Open Sans extremely versatile and useful for a wide range of applications. It is a ubiquitous font on the web, used by everyone from Google to WordPress. I’ve even heard it referred to as the “flat design” font. I like to think of Open Sans as the new Arial.<sup><a href="https://www.typewolf.com/site-of-the-day/fonts/open-sans">[1]</a></sup>

```jsx noeditor
import Type from '../../src/_doc/Type';

<>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet"></link>
  <Type />
</>
```

#### Example Copy
```jsx noeditor
import Type from '../../src/_doc/Type';
<Type section="copy" />
```

#### Sizing
In edge cases when we need to use a font size different from what is offered by default in our headings and paragraph, we use text classes. The sizes below will resize a text to the given size when used as **text-{size}** e.g `text-xl`.
```jsx noeditor
import Type from '../../src/_doc/Type';
<Type section="sizing" />
```

#### Weights
Font weight is an important typographic variable that can add emphasis and differentiate content hierarchy. Weight and size pairings must be carefully balanced. Here are the weights available in our open sans font.
```jsx noeditor
import Type from '../../src/_doc/Type';
<Type section="weight" />
```
