The Silver Bullet
Lists, hung like a book hangs them.
Look at any well-set book or magazine: the marker hangs in the margin, sized to the text, sitting exactly on the x-height, a breath away from the words it introduces. Browser bullets are none of that — oversized, floating near the cap line, a full em adrift of their own text.
The Silver Bullet is one CSS snippet that fixes it everywhere: the marker hangs in the gutter, aligns to the x-height, and scales with your type because every unit is an em. It ships inside the engine — any list on a page running typeset() or go.js gets it automatically.
01 — See it, live
Browser default
- Markers hang in the gutter, so every line of text shares one clean left edge.
- The marker aligns to the x-height instead of floating near the cap line.
- Spacing is em-based: change the font size and everything scales with it.
The Silver Bullet
- Markers hang in the gutter, so every line of text shares one clean left edge.
- The marker aligns to the x-height instead of floating near the cap line.
- Spacing is em-based: change the font size and everything scales with it.
Both lists are rendered by your browser right now — same text, same font. Compare the markers: their size, their height against the first line, and how close they sit to their own text.
02 — Make it yours
Five CSS variables control the marker — glyph, color, size, opacity, and vertical position — so brand styling never means editing the snippet. These three lists differ only by variables:
Dash
- Markers hang in the gutter, so every line of text shares one clean left edge.
- The marker aligns to the x-height instead of floating near the cap line.
- Spacing is em-based: change the font size and everything scales with it.
Arrow
- Markers hang in the gutter, so every line of text shares one clean left edge.
- The marker aligns to the x-height instead of floating near the cap line.
- Spacing is em-based: change the font size and everything scales with it.
Square
- Markers hang in the gutter, so every line of text shares one clean left edge.
- The marker aligns to the x-height instead of floating near the cap line.
- Spacing is em-based: change the font size and everything scales with it.
03 — The snippet
Copy it standalone, or skip it entirely — the engine injects this automatically for every list on a page running typeset.