H1 Display heading

Subtitle text sits between the title and body copy. It should read clearly, wrap cleanly, and keep a calm rhythm across languages.

Body text shows the normal reading style. This paragraph includes bold emphasis, italic emphasis, highlighted text, removed text, inserted text, inline code, Ctrl + K, H₂O, x², i18n, and a standard text link.

Small text is useful for captions, notes, and quiet metadata.

H2 Section heading#

The second level separates major sections. It should have enough weight to anchor the page without pushing body text away.

H3 Subsection heading#

The third level works for scanning. It should remain distinct from bold paragraph text.

H4 Minor heading#

The fourth level introduces compact groups, short procedures, or narrow examples.

H5 Label heading

The fifth level is useful for small labels above dense text.

H6 Micro heading

The sixth level is the smallest heading and should still remain readable.

Inline formatting#

Lists and checkboxes#

• Unordered item with a short sentence.
• Unordered item with bold text and inline code.
  • Nested unordered item.
  • Nested item with a plain text reference.

1. Ordered item for the first step.
2. Ordered item for the second step.
3. Ordered item with a longer line that checks wrapping on mobile screens.

• Checked item with disabled input.
• Unchecked item with disabled input.
• Another checked item for spacing.

Body

The default paragraph style used for long reading.

Subtitle

A short supporting line placed near a title.

Tables, quotes, and notes#

HTML table#

Element	Use	Check
Heading	Page structure	Clear scale
Paragraph	Reading flow	Comfortable line height
Checkbox	Form state	Visible focus and spacing

Markdown table#

Element	Use	Check
Link	Navigation	Clear hover and focus
Code	Technical text	Distinct inline style
List	Grouped content	Readable spacing

Blockquote#

A blockquote gives a passage a different voice while keeping the reading width stable.

Note#

This note uses a small visual marker. It should remain quiet and accessible in light and dark themes.

---

Code block#

const formatTitle = ({ title, lang }: { title: string; lang: string }) => {
  const label = new Intl.DisplayNames([lang], { type: "language" }).of(lang) || lang;
  return `${title} - ${label}`;
};

formatTitle({ title: "Typography specimen", lang: "en" });

Disclosure summary

Hidden content tests native disclosure spacing, focus, and text rhythm.

Images#