How this site is put together, for anyone who cares about that sort of thing. I do, so here it is.
The stack
This site is an Obsidian vault. Quartz turns it into HTML, GitHub Actions builds it on every push, and GitHub Pages serves it. Writing a note and publishing it are the same action, which is the only reason anything gets published at all.
Type
Headings are Fraunces, body text is Karla, code is IBM Plex Mono.
Fraunces has an optical size axis that runs from 9 to 144. Its default sits at 9, the cut drawn for small text, and that default is what you get from Google Fonts unless you name the axis in the request. The usual setup therefore hands you the text cut scaled up to headline size, which is not the same thing as a headline: the strokes come out heavier and the details blunter than the design intends. The files here are self-hosted with the axis intact, so the browser picks an optical size to match the type size.
Nobody will notice. That is more or less the theme of this entire site.
Color
Slate and dark purple, with a neon yellow lifted from a Lamy Safari in the neonyellow special edition. My favorite pen.
The neon has exactly one job, which is marking where you are: the heading you are level with in the table of contents, the page you have open in the sidebar, the words that matched your search. It is never decoration.
Reading
One column, capped near 68 characters, because a line of text running the full width of a browser window is a line nobody finishes. Leading is set unitless so it tracks the font size instead of drifting apart from it. There is no packaged theme underneath any of this. The stylesheet is written directly against Quartz’s own base, which is less clever and much easier to reason about.
Not here
No analytics. Nothing follows you around. The only thing this site keeps in your browser is which color mode you picked, and the fonts come from this domain rather than from Google.