Typography

This page samples the HTML elements and typographic styles used across the site. Use it when tuning tokens in assets/css/main.css or checking dark mode and measure.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body copy

Body text uses a system serif stack sized with a fluid modular scale. The measure is constrained so lines stay near the Practical Typography range (roughly 45–75 characters). Leading is set for comfortable long-form reading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.

A second paragraph follows with the same spacing rhythm. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Inline text

This sentence has bold, italic, bold italic, underline, strikethrough, inline code, and a text link.

Superscript: E = mc². Subscript: H₂O. Abbreviation: HTML.

Lists

Unordered:

• First item
• Second item with a longer line so wrapping and spacing are visible
• Nested list:
  • Nested one
  • Nested two
• Final item

Ordered:

1. Step one
2. Step two
3. Step three

Blockquote

Typography is the craft of endowing human language with a durable visual form.
— adapted from Robert Bringhurst

Horizontal rule

---

Code

Inline: bundle exec jekyll serve

Fenced block:

def hello(name)
  puts "Hello, #{name}"
end

hello("world")

Table

Token	Role	Example
--type-base	Fluid body size	clamp(...)
--leading-body	Body line-height	1.55
--measure	Reading width	~33em
--color-accent	Links / focus	terracotta

Figure / image

Favicon used as a small figure specimen.

Definition list

Measure

The length of a line of text; kept moderate for readability.

Leading

Vertical space between baselines of body text.

Hierarchy

Relative size and weight that signal structure without shouting.

Form controls (unstyled baseline)

Sample input

Utility samples

Section title

• tag
• typography
• specimen

Embed wrapper (empty shell)