A Typographic Kitchen Sink
Every so often it’s worth checking that the plumbing still works. This post has no point other than to run every tag in typography.css through its paces at once — headings, lists, tables, code, and all the little inline elements nobody thinks about until they’re missing.
Let’s start with a sentence that’s doing too much: this is strong, this is emphasis, and this is both at once. Here’s an underline, here’s some highlighted text, and here’s a small aside trailing off after it. Chemistry gets subscripts like H2O, and math gets superscripts like x2. Editing marks show up as deleted text and inserted text side by side. A citation might read The Elements of Typographic Style, and a variable in a sentence might read n items remaining. Hovering over CSS should surface a dotted underline and a tooltip.
Heading Two Sets the Scene
Section headings use Prelude, balanced line wrapping, and a slightly tightened letter-spacing. Body copy underneath just wants to be read.
Heading Three Narrows the Focus
Some paragraphs are just paragraphs. This one exists to prove that line-height, margin resets, and paragraph flow behave the way the parent container expects — no surprise margins sneaking in from the browser defaults.
Heading Four Gets Practical
Here’s a mixed list to check bullets, numbering, and nesting all at once.
- Unordered items get a disc
- Including this one
- And a nested item, still a disc
- Order doesn’t matter here
- Ordered lists count normally
- Second item
- Nested ordered items switch to lower-alpha
- Second nested item
- And a third level drops to lower-roman
- Just to see how deep this goes
- Back out to the top level
Heading Five Holds Its Own
Blockquotes get a left border and a touch of reduced opacity, so a quoted paragraph reads as clearly separate from the surrounding text without shouting about it.
Heading Six Is the Quiet One
By the time you’re at h6, the size has flattened out and the weight is inherited rather than forced — useful for labels more than section titles.
Code shows up two ways. Inline, like const rhythm = "gap, not margin", sits on a tinted background sized to the surrounding text. A full block looks like this:
function setSpacing(el, value) {
el.style.gap = value;
return el;
}
Tables get borders, a tinted header row, and a caption pinned to the top:
| Category | Tags | Notes |
|---|---|---|
| Headings | h1–h6 | h1 comes from the layout, not this post |
| Inline | strong, em, u, mark, small | All stacked in the opening paragraph |
| Code | code, pre | Inline and block, both JetBrains Mono |
| Structure | ul, ol, blockquote | Three levels of nested ordered lists |
And finally, an image with a caption, to check that figures center themselves and figcaption drops to the secondary text color underneath:
There is also support for inline Magic: the Gathering mana symbols, so I can put inline with other text when referring to Magic.
I can even do native Scryfall links, using the square-bracket [[]] syntax that feels familiar from Discord and Reddit, allowing me to link to cards like Bonny Pall, Clearcutter just by typing [[Bonny Pall, Clearcutter]] in my Markdown file.
That’s the whole sink. If everything above looks right, typography.css is behaving.
