# Typography

Source: https://iriscss.com/documentation/elements/typography/

Headings, paragraphs, quotes and inline text, styled with no class.

The root font size starts at the size the user set in the browser and grows to 112.5% between a 576px and a 1280px wide viewport. Everything sized in `rem` grows with it.

## Headings

Each level has its own size, color and space above. A heading that follows other content gets extra space on top, so sections stay apart.

```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>
```

## Heading group

`hgroup` joins a heading and a subtitle. The last line turns subtle.

```html
<hgroup>
  <h3>Release notes</h3>
  <p>Everything that changed in version 2.</p>
</hgroup>
```

## Inline text

Inline elements keep their meaning and get a matching look. Paragraphs and list items avoid a single word on the last line where the browser supports `text-wrap: pretty`.

```html
<p>
  <strong>Strong</strong>, <b>bold</b>, <em>emphasis</em>, <i>italic</i>,
  <u>underline</u>, <s>strikethrough</s>, <small>small</small>,
  <mark>highlighted</mark>, <ins>inserted</ins>, <del>deleted</del>,
  <abbr title="Cascading Style Sheets">CSS</abbr>, H<sub>2</sub>O and
  E = mc<sup>2</sup>.
</p>
```

## Blockquote

A `footer` inside the quote holds the source.

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

## Address and rule

```html
<address>
  Iris CSS<br>
  <a href="mailto:hello@example.com">hello@example.com</a>
</address>
<hr>
<p>Text after a horizontal rule.</p>
```

## Math

MathML uses a math font where one is installed.

```html
<p>
  <math><mi>a</mi><mo>=</mo><msqrt><msup><mi>b</mi><mn>2</mn></msup><mo>+</mo><msup><mi>c</mi><mn>2</mn></msup></msqrt></math>
</p>
```

## Variables

The font stacks, base size and line height are global, see [CSS variables](https://iriscss.com/documentation/customize/css-variables/index.html.md#typography).

| Variable | Default | Note |
| --- | --- | --- |
| `--i-small-font-size` | `0.875em` |  |
| `--i-heading-font-weight` | `700` | Headings |
| `--i-h1-font-size` | `2rem` |  |
| `--i-h1-line-height` | `1.125` |  |
| `--i-h1-margin-top` | `3rem` |  |
| `--i-h2-font-size` | `1.7rem` |  |
| `--i-h2-line-height` | `1.15` |  |
| `--i-h2-margin-top` | `2.625rem` |  |
| `--i-h3-font-size` | `1.5rem` |  |
| `--i-h3-line-height` | `1.175` |  |
| `--i-h3-margin-top` | `2.25rem` |  |
| `--i-h4-font-size` | `1.3rem` |  |
| `--i-h4-line-height` | `1.2` |  |
| `--i-h4-margin-top` | `1.875rem` |  |
| `--i-h5-font-size` | `1.2rem` |  |
| `--i-h5-line-height` | `1.225` |  |
| `--i-h5-margin-top` | `1.6875rem` |  |
| `--i-h6-font-size` | `1.1rem` |  |
| `--i-h6-line-height` | `1.25` |  |
| `--i-h6-margin-top` | `1.5rem` |  |
| `--i-h1-color-text` | `light-dark(#2d3138, #f0f1f3)` |  |
| `--i-h2-color-text` | `light-dark(#373c44, #e0e3e7)` |  |
| `--i-h3-color-text` | `light-dark(#424751, #c2c7d0)` |  |
| `--i-h4-color-text` | `light-dark(#4d535e, #b3b9c5)` |  |
| `--i-h5-color-text` | `light-dark(#5c6370, #a4acba)` |  |
| `--i-h6-color-text` | `light-dark(#646b79, #8891a4)` |  |
| `--i-mark-color-text` | `light-dark(#0f1114, var(--i-color-white))` |  |
| `--i-mark-color-background` | `light-dark(#feeaca, #014063)` |  |
| `--i-ins-color-text` | `light-dark(#1d6a54, #62af9a)` |  |
| `--i-del-color-text` | `light-dark(#883835, #cd7e7b)` |  |
| `--i-blockquote-color-border` | `var(--i-color-subtle-border)` |  |
| `--i-blockquote-footer-color-text` | `var(--i-color-subtle)` |  |