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.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading group

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

Release notes

Everything that changed in version 2.

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.

Strong, bold, emphasis, italic, underline, ~~strikethrough~~, small, highlighted, inserted, ~~deleted~~, CSS, H₂O and E = mc².

Blockquote

A footer inside the quote holds the source.

Simplicity is prerequisite for reliability.

Edsger W. Dijkstra

Address and rule

Iris CSS
hello@example.com

Text after a horizontal rule.

Math

MathML uses a math font where one is installed.

$a = \sqrt{b^{2} + c^{2}}$

Variables

The font stacks, base size and line height are global, see CSS variables.

Variable	Default
`--i-small-font-size`	`0.875em`
`--i-heading-font-weight`Headings	`700`
`--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)`