# Typography

### Lead

*lead-1, lead-2, lead-3, lead-4*

![](https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FlKpNgIt97loBSRLQ89tX%2Flead-typo.jpg?alt=media\&token=ba3dfcea-5d68-43a6-9770-6ce1d7112d9c)

```html
<p class="lead-1">Lead #1</p>
<div class="lead-2">Lorem ipsum dolar set</div>
```

![](https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FBVG03rwiPzYL9dQrL1WT%2Fsep.svg?alt=media\&token=c216c050-ce9c-453e-8960-154078e4e819)

### Display

*display-1, display-2, display-3, display-4*

![](https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FFTtPwgBqXkrRMuK6rrjA%2Fdisplay-typo.jpg?alt=media\&token=9b9dd662-a4b7-49be-99d9-b86fa84f724a)

```html
<p class="display-1">Display #1</p>
```

![](https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FBVG03rwiPzYL9dQrL1WT%2Fsep.svg?alt=media\&token=c216c050-ce9c-453e-8960-154078e4e819)

### Small

*small, text-small*

```html
<span class="small">Small text</span>
<span class="text-small">Small text</span>
```

![](https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FpNtcL9RTIWAeIxeKEQnE%2Fsmall.jpg?alt=media\&token=549aa7e0-284a-4716-8a5f-7672f32728ee)

![](https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FBVG03rwiPzYL9dQrL1WT%2Fsep.svg?alt=media\&token=c216c050-ce9c-453e-8960-154078e4e819)

### Modified

*modified*

```html
<span class="modified">August 20, 2020</span>
```

![](https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2Fx20c62oJV9MNMnqTHukK%2Fmodified.jpg?alt=media\&token=f69c6ac8-e082-4a74-b1e9-b1886fde5a51)