# Typography The Skeleton typography system. {

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.

} ## Typographic Scale Skeleton introduces customizable [Typographic Scale](https://designcode.io/typographic-scales) to Tailwind's [font-size](https://tailwindcss.com/docs/font-size) properties. ## 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 ```astro

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
``` ### Paragraphs ```astro

The quick brown fox jumps over the lazy dog

``` ### Blockquotes ```astro
"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!"
``` ### Anchor ```astro Anchor ``` ### Pre-Formatted ```astro 
The quick brown fox jumps over the lazy dog.
``` ### Code ```astro
Insert the .example class here.
``` ### Keyboard ```astro
Press ⌘ + C to copy.
``` ### Insert & Delete ```astro
Always Gonna Give You Up Never Gonna Give You Up
``` ### Mark ```astro

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, aliquid. Molestias, odio illum voluptatibus natus dignissimos, quidem est unde aspernatur veniam pariatur fuga.

``` ## Lists Skeleton defers to Tailwind's built-in utility classes for common list styles. ### Unordered ```astro ``` ### Ordered ```astro ``` ### Basic ```astro ``` ### Description ```astro
Item A
Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Item B
Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Item C
Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.
``` ### Navigation ```astro ``` ## 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. ```svelte
Class Preview
preset-typo-display-4

Aa
preset-typo-display-3

Aa
preset-typo-display-2

Aa
preset-typo-display-1

Aa
preset-typo-headline

Headline
preset-typo-title

Title
preset-typo-subtitle

Subtitle
preset-typo-body-1

Body 1
preset-typo-body-2

Body 2
preset-typo-caption Caption
preset-typo-menu Menu
preset-typo-button Button
```