H1 – This is a main heading with a link inside the title

Intro paragraph: This page is a small typography playground to test headings, paragraphs, links, lists and more.

H2 – Section heading

This is a normal paragraph of text. It contains a regular link, some bold text, some emphasized text, a bit of highlighted text, and even a small inline-code() example. Here is a second paragraph with small text for fine print, chemical notation like H₂O and exponents like 10³.

H3 – Lists

Unordered list (ul & li)

First unordered item
Second unordered item with a link
Third unordered item with a nested list:
- Nested child item one
- Nested child item two

Ordered list (ol & li)

First ordered item
Second ordered item
Third ordered item with nested list:
1. Nested ordered item one
2. Nested ordered item two

H3 – Blockquote & citation

“Good typography is invisible. Bad typography is everywhere.” – Some slightly dramatic designer

H3 – Preformatted text & code block

// Example of a simple function
function helloTypography() {
    console.log('Hello, beautiful fonts!');
}

H3 – Definition list (dl, dt, dd)

Typography: The art and technique of arranging type so that it is readable, legible and slightly delightful.
Baseline: The invisible line on which most letters sit.

H3 – Table

Heading	Description	Example
Body text	Default paragraph size and line-height.	16px / 1rem base
Small text	Used for notes and disclaimers.	Looks like this line.

H3 – Buttons and form elements

This is not a real form, just a typographic sample.

H3 – Horizontal rule & footer text

This paragraph sits above a horizontal rule.

Small footer-style text. Perfect to test spacing, contrast and hierarchy.