The quick brown fox jumps over the lazy dog

This is a lead paragraph. It's slightly larger and lighter than body copy, used to introduce a section and orient the reader before the regular prose begins.

Body text in prose sits at a comfortable reading size with generous line-height. Inline elements like strong, emphasis, hyperlinks, inline code, ~~strikethrough~~, highlighted text, and even CSS abbreviations all get sensible defaults out of the box.

Headings cascade in size and weight

Each heading level has its own scale and spacing so a document's outline reads clearly even without further styling.

Third-level heading

Used for subsections within an h2.

Fourth-level heading

Useful for fine-grained breakdowns inside a subsection.

Lists

Unordered lists use a subtle bullet:

Espresso, pulled short and ristretto-style
Pour-over with a medium grind
- V60 for clarity
- Kalita for forgiveness
- Chemex for body
Cold brew, steeped overnight

Ordered lists carry a number, and they nest cleanly too:

Heat water to 94°C.
Rinse the filter and discard the water.
Bloom the grounds.
1. Pour twice the coffee weight in water.
2. Wait thirty seconds.
Pour in slow, concentric circles.

Blockquote

Typography is the craft of endowing human language with a durable visual form. The technical aim of typography is to set a body text that is comfortable to read for long periods.

— Robert Bringhurst

Code blocks

Inline code looks like def hello, do: :world. Fenced blocks get their own treatment:

defmodule Greeter do
  @moduledoc "A small example used in the typography demo."

  def hello(name) do
    "Hello, " <> name <> "!"
  end
end

Greeter.hello("world")
#=> "Hello, world!"

Tables

Tables get borders, padding, and a header row that stands out:

Brew method	Grind	Ratio	Time
Espresso	Fine	1:2	25–30s
V60	Medium-fine	1:16	3 min
French press	Coarse	1:15	4 min
Cold brew	Coarse	1:8	12–18 hours

Description list

Kerning: The adjustment of space between specific pairs of letters.
Tracking: The uniform adjustment of space across a run of text.
Leading: The vertical space between consecutive lines of type.

Figures

A shallow cup of espresso on a saucer with a spoon — A figure with a caption. Captions sit beneath the image at a smaller size and lighter weight.

Keyboard input

Press ⌘ + K to open the command palette, or Esc to dismiss it. Multi-key combinations chain naturally.

That's the full tour. Anything wrapped in <article class="prose"> picks up these styles automatically — perfect for rendered Markdown, long-form content, and documentation pages.

Tailwind Typography