Typesetting is subtraction

This page is Markit's type specimen. It is two things at once: an essay you can actually read, and a checklist that walks through every piece of Markdown syntax the editor supports. Both have to hold at the same time — a specimen that merely piles up syntax fools nobody, while a real stretch of prose is what exposes a loose line, a leaking margin, or a clumsy seam between letters and numerals.

The test of typography has never been "does it look nice", but "how tired are your eyes after a thousand words". That sounds like a platitude, yet it disqualifies most of the designs that photograph well.

The first rule of the page: subtract

The only thing on an editor's screen that truly belongs to the content is the text itself. Everything else — toolbars, sidebars, buttons, status indicators — competes with it for attention. So our first rule is: in the default state, interface elements are either invisible or pushed to the edge of vision.

In concrete numbers:

The figures in that table align with tabular numerals — a small detail, but a column of numbers that wobbles left and right makes the reader compare instead of comprehend.

White space groups better than rules

Dividing content with horizontal rules is the beginner's move; dividing it with space is the mature one. A rule leaves a hard edge on the page, while white space is invisible:

• 16 px between paragraphs, so sentences form groups
• 24 px above a subheading and 8 px below it — tight below, loose above glues the heading to what it governs
• 40 px above a major heading, so the eye takes a natural pause

Flatten that graded spacing — say, with one blanket margin rule — and the page instantly decays into a chain of evenly spaced blocks, with hierarchy left to font size alone. The failure is silent: the declarations are still in the code, and everything looks fine at a glance.

Fonts: Latin and CJK are two different jobs

CSS font fallback happens per character, which means the order of the stack decides who renders your Latin. Put a CJK face first and camelCase, version numbers like v1.522, and every letter of English fall to the Latin glyphs that happen to ship inside the CJK font — usually an afterthought.

The correct order puts the Latin face first:

font-family: Charter, 'LXGW WenKai', -apple-system, 'PingFang SC', sans-serif;

Both orderings "run". The difference only shows in the glyphs, so a code review cannot catch it — a test has to stand guard.

A counter-example

The snippet below makes the two classic mistakes at once — a CJK face first, and synthetic styling on top:

// ⚠️ wrong on both counts
const stack = "'PingFang SC', Charter, sans-serif"  // CJK first: Latin glyphs run wild
const emphasis = { fontStyle: 'italic' }            // synthetic oblique, not a true italic

A true italic is a different drawing of the letters; an oblique produced by shearing is merely the same drawing knocked sideways. At small sizes the strokes clog where they cross.

Synthetic bold is the same family of problem. If a face ships no real bold, the browser strokes the outlines fatter, and the relationship between thick and thin is destroyed.

The syntax checklist

What follows walks through the remaining syntax, and doubles as a check that none of it fights the others under this stylesheet.

Inline elements

Running text may contain bold, emphasis, strikethrough, inline code, and an external link. Autolinked URLs count too: https://example.com . When these mix in one paragraph, line height is the first casualty — any inline element that carries extra padding will pry the line open.

Tags are metadata, not the point of the sentence, so they render as low-saturation pills rather than a wall of colour: #typography #fonts #craft

Lists

Ordered lists are for steps, unordered lists for parallel items:

1. First establish what problem you are solving
2. Then establish whether it deserves solving
   1. How many people it touches
   2. How often it bites
3. Only then, how to solve it

Task lists are for checklists:

• Settle the measure and the leading
• Settle the order of the font stack
• Decide how emphasis should look in running text
• Verify hanging punctuation on a real device

A nested unordered list:

• Typefaces
  • Latin: Charter, Georgia, Palatino
  • CJK: LXGW WenKai, Source Han Serif, the system sans
• Composition
  • Spacing where Latin meets CJK
  • Punctuation compression

Quotes and callouts

Good writing deserves a good page.

The aim of typography is not to make text pretty, but to let the reader forget the page exists.

The five callouts each carry their own tone. They are semantics chosen by the author, not decoration added by the interface:

For long reading, a text face with real italics earns its keep; display faces belong in headings.

The .md file on disk is the only truth. Any typographic effect lives in the rendering layer and nowhere else.

Never edit the user's text while they are typing. An auto-inserted space will be saved to disk with the next autosave.

Code blocks

A code block should scroll sideways rather than burst the measure, and its palette should stay quiet — keywords in the accent colour, comments receding to grey, everything else in body ink. Rainbow highlighting shouts on warm paper:

/// Reveal the current document in Finder
@objc private func revealInFinder(_ sender: Any?) {
    guard let url = session.url else { return }
    NSWorkspace.shared.activateFileViewerSelecting([url])
}

A very long line should scroll, not wrap:

curl -sSL "https://raw.githubusercontent.com/example/repo/main/very/long/path/to/some/file.txt" -o output.txt

Images

When a caption follows an image, the gap between them should be tighter than a normal paragraph gap, so the reader sees them as one unit.

Last

The horizontal rule above is one of its legitimate uses: it marks a real break — "the essay ends, the coda begins" — not the breathing room between paragraphs. The less it is used, the more force it has the one time it appears.

Whether a typographic scheme holds up comes down to a single question: read this page top to bottom — did any spot make you stop and notice the page itself? Wherever that happened is where the work remains.