---
title: 'Typography'
description: 'Typography used in the NerdfishUI library'
sidebar:
  label: 'Typography'
  order: 7
---

## Semantic classnames

| Class                   | Preview                                           |
| ----------------------- | ------------------------------------------------- |
| `typography-heading-xl` | <span className="typography-heading-xl">Aa</span> |
| `typography-heading-lg` | <span className="typography-heading-lg">Aa</span> |
| `typography-heading`    | <span className="typography-heading">Aa</span>    |
| `typography-heading-sm` | <span className="typography-heading-sm">Aa</span> |
| `typography-headline`   | <span className="typography-headline">Aa</span>   |
| `typography-title`      | <span className="typography-title">Aa</span>      |
| `typography-subtitle`   | <span className="typography-subtitle">Aa</span>   |
| `typography-body`       | <span className="typography-body">Aa</span>       |
| `typography-body-large` | <span className="typography-body-large">Aa</span> |
| `typography-caption`    | <span className="typography-caption">Aa</span>    |
| `typography-blockquote` | <span className="typography-blockquote">Aa</span> |

## Lists

### Unordered list

<Component path="typography/unordered-list" />

### Ordered list

<Component path="typography/ordered-list" />

## Inline

### Mark

<Component path="typography/mark" />

### Insert / delete

<Component path="typography/insert-delete" />

## Blockquote

<Component path="typography/blockquote" />

## Sample

<Component path="typography/typography" />