Design system

Typography

A specimen of the type, rhythm, and editorial marks used across the site.

This page samples the HTML elements and typographic styles used across the site. Use it when tuning tokens in _includes/main.css or checking dark mode and measure. Design system: The Modern Editorial System (#110) with Fontsource + jsDelivr fonts (#92) — two custom faces only (serif body + code UI/mono).

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body copy

Body text uses Source Serif 4 (Regular) 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:

Step one
Step two
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 (wraps by default; unwrap from the toolbar if you want a single long line):

def hello(name)
  puts "Hello, #{name} — this line is intentionally long so wrapped text stays aligned with its line number"
end

hello("world")

Table

Token	Role	Example
`--font-body`	Source Serif 4	Editorial text
`--font-ui`	Source Code Pro	Nav / UI
`--font-mono`	Source Code Pro	Meta / code
`--type-base`	Fluid body size	`clamp(...)`
`--leading-body`	Body line-height	`1.4`
`--measure`	Reading width	`~36em`
`--color-accent`	Links / focus	Signature Blue `#0077A8`
`--brand-ink` / `--brand-paper`	Text / page ground	`#111C24` / `#FAF9F6`

Editorial marks

Kramdown classes on ordinary posts and pages ({: .lede}, {: .eyebrow}, {: .aside}, {: .pull-quote}, {: .caption}, {: .figure-wide}).

This opening paragraph uses the larger lede treatment to establish emphasis without turning introductory prose into a heading.

Typography is the craft of endowing human language with a durable visual form, and asides should not interrupt that line length when the page has room for a margin.

A sidenote about the preceding paragraph. On a wide screen it sits in the margin; on a narrow screen it drops below in a box. Links look like this

Quoted language

Pull quote from the text

A complete sentence is still the unit of thought, even when it is pulled beyond the column.

— The typography specimen

Full Bleed Images

full sized image

Caption title Body of the caption in the reading face. Credit or source

Testing another large image but not full bleed

large but not full bleed Body of the caption in the reading face. Credit or source

Definition list

Measure

The length of a line of text; kept moderate for readability.</dd>

Leading

Vertical space between baselines of body text.</dd>

Hierarchy

Relative size and weight that signal structure without shouting.</dd> </dl>