# 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
<div class="space-y-4">
	<h1 class="h1">Heading 1</h1>
	<h2 class="h2">Heading 2</h2>
	<h3 class="h3">Heading 3</h3>
	<h4 class="h4">Heading 4</h4>
	<h5 class="h5">Heading 5</h5>
	<h6 class="h6">Heading 6</h6>
</div>

```

### Paragraphs

```html
<p>The quick brown fox jumps over the lazy dog</p>

```

### Blockquotes

```html
<blockquote class="blockquote">
	"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, aliquid. Molestias, odio illum voluptatibus natus dignissimos, quidem
	est unde aspernatur veniam pariatur fuga distinctio esse in quas, repellendus neque reiciendis!"
</blockquote>

```

### Anchor

```html
<a href="/" class="anchor">Anchor</a>

```

### Pre-Formatted

```html
<pre class="pre">The quick brown fox jumps over the lazy dog.</pre>

```

### Code

```html
<div>Insert the <code class="code">.example</code> class here.</div>

```

### Keyboard

```html
<div>Press <kbd class="kbd">⌘</kbd> + <kbd class="kbd">C</kbd> to copy.</div>

```

### Insert & Delete

```html
<div class="w-full">
	<del class="del"><s>Always</s> Gonna Give You Up</del>
	<ins class="ins" cite="https://youtu.be/dQw4w9WgXcQ" datetime="10-31-2022"> Never Gonna Give You Up </ins>
</div>

```

### Mark

```html
<!-- prettier-ignore -->
<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, <mark class="mark">aliquid</mark>. Molestias, odio illum voluptatibus <mark class="mark">natus dignissimos</mark>, quidem est unde aspernatur veniam pariatur fuga.
</p>

```
## Lists

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

### Unordered

```html
<ul class="list-inside list-disc space-y-2">
	<li>Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</li>
	<li>Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</li>
	<li>Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</li>
</ul>

```

### Ordered

```html
<ul class="list-inside list-decimal space-y-2">
	<li>Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</li>
	<li>Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</li>
	<li>Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</li>
</ul>

```

### Basic

```html
<ul class="list-inside list-none space-y-2">
	<li>Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</li>
	<li>Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</li>
	<li>Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</li>
</ul>

```

### Description

```html
<dl class="space-y-2">
	<div>
		<dt class="font-bold">Item A</dt>
		<dd class="opacity-60">Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</dd>
	</div>
	<div>
		<dt class="font-bold">Item B</dt>
		<dd class="opacity-60">Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</dd>
	</div>
	<div>
		<dt class="font-bold">Item C</dt>
		<dd class="opacity-60">Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</dd>
	</div>
</dl>

```

### Navigation

```html
<nav class="space-y-2">
	<!-- Optional Heading -->
	<p class="text-lg font-bold">Explore</p>
	<!-- / -->
	<ul class="space-y-2">
		<li>
			<a class="anchor" href="#">Home</a>
		</li>
		<li>
			<a class="anchor" href="#">About</a>
		</li>
		<li>
			<a class="anchor" href="#">Blog</a>
		</li>
	</ul>
</nav>

```

## 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
<div class="table-wrap">
	<table class="table">
		<thead>
			<tr>
				<th>Class</th>
				<th>Preview</th>
			</tr>
		</thead>
		<tbody>
			<!-- preset-typo-display-4 -->
			<tr>
				<td><code class="code">preset-typo-display-4</code></td>
				<td><h1 class="preset-typo-display-4">Aa</h1></td>
			</tr>
			<!-- preset-typo-display-3 -->
			<tr>
				<td><code class="code">preset-typo-display-3</code></td>
				<td><h2 class="preset-typo-display-3">Aa</h2></td>
			</tr>
			<!-- preset-typo-display-2 -->
			<tr>
				<td><code class="code">preset-typo-display-2</code></td>
				<td><h3 class="preset-typo-display-2">Aa</h3></td>
			</tr>
			<!-- preset-typo-display-1 -->
			<tr>
				<td><code class="code">preset-typo-display-1</code></td>
				<td><h4 class="preset-typo-display-1">Aa</h4></td>
			</tr>
			<!-- preset-typo-headline -->
			<tr>
				<td><code class="code">preset-typo-headline</code></td>
				<td><p class="preset-typo-headline">Headline</p></td>
			</tr>
			<!-- preset-typo-title -->
			<tr>
				<td><code class="code">preset-typo-title</code></td>
				<td><p class="preset-typo-title">Title</p></td>
			</tr>
			<!-- preset-typo-subtitle -->
			<tr>
				<td><code class="code">preset-typo-subtitle</code></td>
				<td><p class="preset-typo-subtitle">Subtitle</p></td>
			</tr>
			<!-- preset-typo-body-1 -->
			<tr>
				<td><code class="code">preset-typo-body-1</code></td>
				<td>
					<p class="preset-typo-body-1">Body 1</p>
				</td>
			</tr>
			<!-- preset-typo-body-2 -->
			<tr>
				<td><code class="code">preset-typo-body-2</code></td>
				<td>
					<p class="preset-typo-body-2">Body 2</p>
				</td>
			</tr>
			<!-- preset-typo-caption -->
			<tr>
				<td><code class="code">preset-typo-caption</code></td>
				<td><span class="preset-typo-caption">Caption</span></td>
			</tr>
			<!-- preset-typo-menu -->
			<tr>
				<td><code class="code">preset-typo-menu</code></td>
				<td><span class="preset-typo-menu">Menu</span></td>
			</tr>
			<!-- preset-typo-button -->
			<tr>
				<td><code class="code">preset-typo-button</code></td>
				<td><span class="preset-typo-button">Button</span></td>
			</tr>
		</tbody>
	</table>
</div>

<style lang="postcss">
	/* IGNORE THIS: this is only required for our example <style> block. */
	/* https://tailwindcss.com/docs/functions-and-directives#reference-directive */
	@reference "src/styles/app.css";

	/*
		Copy the following classes to your global stylesheet. Rename and modify as desired.
		Reference: http://skeleton.dev/docs/get-started/core-api#typography
	*/

	/* Headings */
	.preset-typo-display-4,
	.preset-typo-display-3,
	.preset-typo-display-2,
	.preset-typo-display-1,
	.preset-typo-headline,
	.preset-typo-title,
	.preset-typo-subtitle,
	.preset-typo-caption,
	.preset-typo-menu,
	.preset-typo-button {
		color: var(--heading-font-color);
		font-family: var(--heading-font-family);
		font-weight: var(--heading-font-weight);
		@variant dark {
			color: var(--heading-font-color-dark);
		}
	}

	/* Body */
	.preset-typo-body-1,
	.preset-typo-body-2,
	.preset-typo-caption,
	.preset-typo-menu,
	.preset-typo-button {
		color: var(--heading-font-color);
		@variant dark {
			color: var(--heading-font-color-dark);
		}
	}

	/* Unique Properties */
	.preset-typo-display-4 {
		font-size: var(--text-7xl);
		@variant lg {
			font-size: var(--text-9xl);
		}
	}
	.preset-typo-display-3 {
		font-size: var(--text-6xl);
		@variant lg {
			font-size: var(--text-8xl);
		}
	}
	.preset-typo-display-2 {
		font-size: var(--text-5xl);
		@variant lg {
			font-size: var(--text-7xl);
		}
	}
	.preset-typo-display-1 {
		font-size: var(--text-4xl);
		@variant lg {
			font-size: var(--text-6xl);
		}
	}
	.preset-typo-headline {
		font-size: var(--text-2xl);
		@variant lg {
			font-size: var(--text-4xl);
		}
	}
	.preset-typo-title {
		font-size: var(--text-xl);
		@variant lg {
			font-size: var(--text-3xl);
		}
	}
	.preset-typo-subtitle {
		font-size: var(--text-base);
		font-family: var(--heading-font-family);
		color: var(--color-surface-700-300);
		@variant lg {
			font-size: var(--text-xl);
		}
	}
	.preset-typo-body-1 {
		font-size: var(--text-xl);
		@variant lg {
			font-size: var(--text-3xl);
		}
	}
	.preset-typo-body-2 {
		font-size: var(--text-lg);
		@variant lg {
			font-size: var(--text-xl);
		}
	}
	.preset-typo-caption {
		font-size: var(--text-sm);
		color: var(--color-surface-700-300);
	}
	.preset-typo-menu {
		font-weight: bold;
	}
	.preset-typo-button {
		font-weight: bold;
	}
</style>

```