H1 — The quick brown fox jumps over the lazy dog

H2 — Ideas take shape through thoughtful design

H3 — A clear hierarchy makes every word count

H4 — Small details create a lasting impression

H5 — Designed to be read, built to be understood
H6 — The smallest heading still has something to say

Paragraphs and reading rhythm

Eyebrow / category label

Lead paragraph. Good typography helps people find their way. It brings structure, character, and rhythm to even the simplest page.

Regular paragraph. A website is a conversation between its content and its reader. Clear language, comfortable line lengths, and deliberate spacing make that conversation feel natural. This paragraph is long enough to reveal how your body text wraps across several lines.

A second paragraph tests the space between ideas. Try a narrow viewport, increase the text size, and watch how the layout responds. The content should remain readable and the hierarchy should remain clear.

Small text. Supporting information, timestamps, and secondary descriptions.

Fine print. Terms apply. This is a placeholder legal notice.

Large text. A short statement with a little more presence.

Intentional line breaks:
Studio Example
Sample Street 12
8000 Zürich, Switzerland

Truncation sample: this intentionally lengthy sentence gives you enough content to experiment with a single-line ellipsis or a multiline clamp when the available space becomes limited.

Long unbroken content: extraordinarilylongunbrokensamplewordfortestingresponsivewrapping0123456789

Inline text styles

Strong importance, bold attention, emphasis, alternate voice, and annotated text.

Highlighted text, outdated information, deleted text, and inserted text.

Inline link, external link (opens in a new tab), hello@example.com, and +41 44 000 00 00.

HTML, typography, A short inline quotation, and The Example Handbook.

Superscript: x2. Subscript: H2O. Footnote reference1.

Code: font-size: 1rem;. Keyboard: ⌘ + K. Output: Build completed.. Variable: x + y.

Published . Muted text, success text, warning text, error text.

Lists

  1. Start with a clear idea.
  2. Explore the possibilities.
    1. Compare alternatives.
    2. Refine the details.
  3. Share the result.
  1. A continued ordered list
  2. The next numbered item
Hierarchy
The visual relationship between different levels of information.
Leading
The space between lines of text.
Measure
The length of a line of text.

Quotations and editorial content

Design gives content a voice. Typography gives that voice its pace, its volume, and its character.

A second paragraph tests longer quotations.

Alex Example, Notes on Design

“A short pull quote that deserves a little extra attention.”

Example Studio
Sample Street 12, 8000 Zürich
hello@example.com
/* Multiline code sample */
.example {
    display: grid;
    gap: 1rem;
}

Characters, numbers, and languages

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

! ? . , : ; … — – - / \ ( ) [ ] { } « » “ ” ‘ ’ & @ # % * + = © ® ™

CHF 1’234.50 · €1.234,50 · $1,234.50 · 25% · −12.5 · +41 44 000 00 00

Grüezi Zürich — schöne Grüße, größere Wörter und sorgfältige Gestaltung.

À bientôt — une typographie élégante, précise et équilibrée.

Un esempio di testo: città, qualità e possibilità.

Arrows and symbols: ← ↑ → ↓ ↗ ✕

Typography in context

Journal / Design

A longer article heading that can wrap over multiple lines

By Alex Example · · 4 min read

This short article combines headings, body text, and supporting content in one continuous reading experience.

Start with a simple idea and give it enough room to breathe. Important information should stand out without interrupting the flow, while related information should be easy to discover.

A heading within the article

The transition from a paragraph to a heading, and back to a paragraph, is just as important as the type sizes themselves.

  • A useful observation.
  • A practical next step.