# Typography

> Headings, paragraphs, lists, quotes and inline text styled by element, on a 16px root that takes one step up on very wide screens.

Page: https://pico.rusticstack.com/docs/content/typography

Pico Reforged styles text by element. Write semantic HTML and the type scale, spacing and colors follow. There are no typography classes.

## Responsive type

The root font size is `100%` (16px in most browsers) up to 1535px and takes one step to `106.25%` (17px) from 1536px. Everything sized in `rem` or `em` follows it.

| Viewport | Root font size |
| --- | --- |
| below 1536px | 100% |
| 1536px and up | 106.25% |

Build with `--no-responsive-typography` (or `responsiveTypography: false`) to keep 100% at every width.

## Headings

`h1` to `h6` have their own size, line height and top spacing. A heading that follows a paragraph, list, table, form, figure or similar block gets extra space above it, so sections breathe without any margin classes.

**Example: Headings**

```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```

All headings use weight 600 and balanced line wrapping. The larger ones get a slightly tighter letter spacing.

| Element | Font size | Line height |
| --- | --- | --- |
| `h1` | 2.25rem | 1.15 |
| `h2` | 1.75rem | 1.2 |
| `h3` | 1.375rem | 1.3 |
| `h4` | 1.125rem | 1.4 |
| `h5` | 1rem | 1.5 |
| `h6` | 0.875rem | 1.5 |

### Heading group

Wrap a title and a subtitle in `hgroup`. The last child is muted and sits tight under the title.

**Example: hgroup**

```html
<hgroup>
  <h2>Heading group</h2>
  <p>The subtitle uses the muted color.</p>
</hgroup>
```

## Text

Paragraphs, `strong`, `em`, `u`, `s`, `small`, `sub` and `sup` work as expected. `small` is set to `0.875em`.

**Example: Inline text**

```html
<p>
  A paragraph with <strong>strong text</strong>, <em>emphasis</em>, <u>underline</u>,
  <s>strikethrough</s> and <small>small print</small>. Water is H<sub>2</sub>O and E = mc<sup>2</sup>.
</p>
```

## Lists

Unordered lists use disc markers in the muted color. Nested lists sit closer to their parent. Description lists (`dl`) take the same text spacing as paragraphs.

**Example: Lists**

```html
<ul>
  <li>First item</li>
  <li>
    Second item with children
    <ul>
      <li>Nested one</li>
      <li>Nested two</li>
    </ul>
  </li>
</ul>
<ol>
  <li>Open the box</li>
  <li>Read the manual</li>
  <li>Plug it in</li>
</ol>
<dl>
  <dt>Cascade</dt>
  <dd>The order in which competing rules are resolved.</dd>
  <dt>Specificity</dt>
  <dd>How strongly a selector claims an element.</dd>
</dl>
```

## Blockquote

A `blockquote` has a left border and padding. A `footer` inside it is muted, which suits an attribution with `cite`. In right-to-left pages the border flips to the other side.

**Example: Blockquote**

```html
<blockquote>
  Simplicity is prerequisite for reliability.
  <footer><cite>Edsger W. Dijkstra</cite></footer>
</blockquote>
```

## Address

`address` is not italic. It takes the same spacing as a paragraph.

**Example: Address**

```html
<address>
  Example Street 12<br />
  1000-001 Lisbon, Portugal
</address>
```

## Related

Links, `mark`, `ins`, `del`, `abbr` and `kbd` have their own pages: [Link](/docs/content/link) and [Misc](/docs/content/misc). Code is on [Code](/docs/content/code).

## Customization

| Variable | Default | Description |
| --- | --- | --- |
| `--pico-font-family` | `var(--pico-font-family-sans-serif)` | Font stack for body text. |
| `--pico-font-size` | `100%` | Root font size before the responsive steps. |
| `--pico-line-height` | `1.5` | Base line height. |
| `--pico-typography-spacing-vertical` | `1rem` | Space below text blocks. |
| `--pico-h1-color` |  | Color of h1. The same pattern exists for h2 to h6. |
| `--pico-blockquote-border-color` | `var(--pico-muted-border-color)` | Left border of blockquote. |
| `--pico-blockquote-footer-color` | `var(--pico-muted-color)` | Footer text inside blockquote. |

Set the variables on `:root` to change them everywhere, or on one element to change only that element. See [Themes](/docs/customization/themes) for more.