The specimen: every element, set in Vellum

This article collects every typographic element the theme sets: headings, emphasis, links, lists, quotes, code, tables and more. It doubles as a proofing page.

Headings

The post title is an H1. Inside the content, the hierarchy starts at H2 and steps down from there.

Third-level heading (H3)

Body text under an H3, with bold, italic, strikethrough, and inline emphasis in a single line.

Fourth-level heading (H4)

Another paragraph, to judge the leading and the vertical rhythm between consecutive blocks of text.

Fifth-level heading (H5)

A paragraph after an H5.

Sixth-level heading (H6)

A paragraph after an H6 — the last level of the hierarchy.

Bulleted list

• First item of the unordered list
• Second item, deliberately long so you can see how the text behaves when it wraps onto more than one line within a single entry
• Third item with a nested list:
  • Sub-item A
  • Sub-item B
• Fourth and final item

Numbered list

1. First step of the procedure
2. Second step, with nesting:
   1. Numbered sub-step one
   2. Numbered sub-step two
3. Third step

Quotes

A single-block quote, for a line worth setting apart from the paragraph around it.

And a longer, multi-paragraph quote with attribution:

Simplicity is not the absence of clutter; that is a consequence of simplicity. Simplicity is somehow essentially describing the purpose and place of an object.

— Jonathan Ive, on design

Code

Inline code like font-feature-settings, and a block:

.prose {
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  max-width: 65ch;
}

Table

Divider

Above the rule.

Below the rule — the end of the specimen.