A typography specimen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This page is placeholder copy that exercises every prose element in the house style: titles, body, asides, figures, tables, code, and the rest of the proportional rules.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Successive paragraphs take a first-line indent rather than a large vertical gap, so the eye can track starts and ends of thought.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Integer vitae justo eget magna fermentum iaculis eu non diam. You can emphasize a phrase in italics, mark strong weight for key terms, or set proper names in small capitals when they deserve canonical treatment. Abbreviations such as Html and Css follow the same small-caps habit.

1 On the measure of the page

Nam libero justo laoreet sit amet cursus sit. Top-level section headings use a clear hierarchy without shouting. The body remains justified where the browser can hyphenate sensibly; if rivers appear in a real language, we can switch a post to left alignment without changing the rest of the system.

Vitae congue eu consequat ac felis donec et odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Inline code looks like font-family: serif and should never fight the surrounding sentence.

1.1 A subsection for finer grain

Subsections sit closer to the body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Links stay ink-colored with a quiet underline in purple (#551a8b)—see The Proportional Web and k-a.in for related inspiration.

2 Elements in the garden

Below is an ornamental break (a rotated floral heart in spirit, set here as a typographic ornament). What follows walks through block elements the stylesheet knows how to dress.

2.1 Blockquote

Je n’ai fait celle-ci plus longue que parce que je n’ai pas eu le loisir de la faire plus courte.

2.2 Details (disclosure)

2.3 Figure with caption

2.4 Chart as figure

2.5 Lists

Unordered:

• Banana
• Paper boat
• Cucumber
• Rocket

Ordered, with a nested branch:

1. Goals
2. Motivations
   1. Intrinsic
   2. Extrinsic
3. Second-order effects

2.6 Table

2.7 Code block

Prose-first, but code should still read cleanly. Courier is replaced here by Ibm Plex Mono:

:root {
  --font-serif: "Crimson Pro", serif;
  --font-display: "Cormorant Garamond", serif;
  --line-height: 1.6;
  --text-color: #2c2c2c;
  --background-color: #f7f4ef;
  --accent: #1b4f9c; /* cobalt; dark mode: #5f9ea0 */
  --link: #551a8b;
}

2.8 Callout

3 Closing the specimen

Nullam non nisi est sit amet facilisis magna etiam tempor. When real writing replaces this lorem, the same skeleton remains: meta band, title, lead, indented body, figures with captions, and quiet end matter. That is the contract between the proportional base and the personal site built on top of it.

Donec massa sapien faucibus et molestie ac feugiat. The next iteration can change fonts, accent, or measure once this prototype has been lived in for a while.