# Typography
The Skeleton typography system.

{

<p class="text-xl">
	Skeleton provides an array of opt-in utility classes for common typographic elements, with a fully functional typography scale based on
	your theme settings. As well as a number of primitives for generating a semantic typography set for your project's individual needs.
</p>

}

## Typographic Scale

Skeleton introduces customizable [Typographic Scale](https://designcode.io/typographic-scales) to Tailwind's [font-size](https://tailwindcss.com/docs/font-size) properties.

<div class="space-y-4">
			Scaling can be adjusted by modifying the [type scale](/docs/get-started/core-api#typography) theme property.
			```css
			[data-theme='cerberus'] {
				--text-scaling: 1.067;
			}
			```
			This affects the following text sizes.
			```html
			<h1 class="text-xs">text-xs</h1>
			<h2 class="text-sm">text-sm</h2>
			<h3 class="text-base">text-base</h3>
			<h4 class="text-lg">text-lg</h4>
			<h5 class="text-xl">text-xl</h5>
			<h6 class="text2-2xl">text-2xl</h6>
			<h6 class="text3-3xl">text-3xl</h6>
			<h6 class="text4-4xl">text-4xl</h6>
			<h6 class="text5-5xl">text-5xl</h6>
			<h6 class="text6-6xl">text-6xl</h6>
			<h6 class="text7-7xl">text-7xl</h6>
			<h6 class="text8-8xl">text-8xl</h6>
			<h6 class="text9-9xl">text-9xl</h6>
			```
		</div>

## Utility Classes

Use the following utility classes to quickly style semantic HTML elements. These classes are opt-in by default, providing a simple escape hatch when you need to break from convention.

### Headings

```html
// Error loading file, please report this issue.
```

### Paragraphs

```html
// Error loading file, please report this issue.
```

### Blockquotes

```html
// Error loading file, please report this issue.
```

### Anchor

```html
// Error loading file, please report this issue.
```

### Pre-Formatted

```html
// Error loading file, please report this issue.
```

### Code

```html
// Error loading file, please report this issue.
```

### Keyboard

```html
// Error loading file, please report this issue.
```

### Insert & Delete

```html
// Error loading file, please report this issue.
```

### Mark

```html
// Error loading file, please report this issue.
```
## Lists

Skeleton defers to Tailwind's built-in utility classes for common list styles.

### Unordered

```html
// Error loading file, please report this issue.
```

### Ordered

```html
// Error loading file, please report this issue.
```

### Basic

```html
// Error loading file, please report this issue.
```

### Description

```html
// Error loading file, please report this issue.
```

### Navigation

```html
// Error loading file, please report this issue.
```

## Semantic Typography

When working with your designers, they may craft a semantic typography set for your project. To handle this, we recommend implementing [custom presets](/docs/design/presets#custom-presets) that mix CSS primitives with semantic HTML elements to replicate all desired styles. Feel free to use the boilerplate below, adding each style to your global stylesheet.

```html
// Error loading file, please report this issue.
```