sdfkjh · design study
The type specimen
The letters as the subject. Not a survey of nice fonts: a foundry-style specimen of the stack this site actually serves, all five files of it, with the bill in bytes at the bottom. If the type carries the whole identity, it should be able to stand inspection at every size it works at.
Study page. Noindex; linked only from the home page. After the foundry specimen broadside. Every glyph on this page is set in a file served from this domain.
01 · the wordmark
Newsreader 500 · rendering at · right now
Six letters off the home row, set as large as the window allows. A wordmark that is only ever seen at 15px is an untested claim; this is the test. The size in the label above is measured from the render, not typed in.
02 · the ramp
Newsreader 500 · one word, eight sizes · labels measured live
A 1.25 modular scale, 20px up to 95px where the window allows; narrow screens shrink the top steps to fit, and the labels, where shown, measure the render rather than restate the scale. The convention is the foundry's: the same word repeated down the sheet, so what changes is only the size, and what the size changes is everything: at 95px Newsreader is all contrast and tight joints; at 20px it is quietly getting on with a sentence.
03 · the weight axis
JetBrains Mono · variable, 400 to 700, one file
asdf · kjh
The working face is the only variable font in the stack: one 31 KB file carries the whole 400-to-700 range. Drag the slider; every weight between the labelled stops is real, drawn from the same axis, not a synthetic in-between.
04 · the three voices
what each face does on this site
display
Newsreader
500 + italic · two files · the voice that announces
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
in use: the hero, every headline, the footer masthead, the wordmark above. The italic carries the one deliberate emphasis on the home page.
text
Source Serif 4
400 + italic · two files · the voice that explains
Pack my box with five dozen liquor jugs.
Pack my box with five dozen liquor jugs.
in use: running text at 17px, ledes, the studies' body copy. It reads this paragraph-shaped role all over the site and never asks for attention.
working
JetBrains Mono
variable 400–700 · one file · the voice that operates
How vexingly quick daft zebras jump!
How vexingly quick daft zebras jump!
in use: labels, eyebrows, folios, the console strip, the REPL, code, and every measured number on this page, 10px to 13px, tabular where it counts.
05 · the bill
five files · sizes measured 2026-07-16
| file | role | bytes |
|---|---|---|
| newsreader-500.woff2 | display | 60,724 |
| newsreader-500-italic.woff2 | display italic | 67,240 |
| source-serif-4-400.woff2 | text | 48,596 |
| source-serif-4-400-italic.woff2 | text italic | 50,552 |
| jetbrains-mono.woff2 | working, variable | 31,432 |
| the whole voice | 258,544 |
About 253 KB for the entire typographic identity, latin subsets, served from this domain with everything else. No foundry CDN, no third-party request, no tracking pixel riding along with the letters. The legal pages promise it; this table is the receipt, and when scripts are allowed the byte counts are re-fetched and re-counted by the page itself.
The source
The foundry specimen broadside: the sheet a type founder printed to sell a face. One enormous showing to stop the eye, a ramp of sizes to prove the range, the full character set to show there is no weak glyph hiding, and the name of the house at the foot. It is advertising that can only work by being inspectable, which is why it fits here. The sketch is the composite convention, no one foundry's sheet.
Structure only: the broadside convention, centuries of it.
taken
- one huge showing as the stopping power
- the size ramp as proof of range
- the pangram and the full character grid
- metrics printed beside the letters
- the house name at the foot
invented
- the subject is the site's own served stack, not a face for sale
- a live variable-weight axis in place of a row of cast weights
- labels that measure the render instead of restating the intent
- the bill in bytes: cost as part of the specimen
- a negative mode, because a broadside was one ink and this page is not
Six moves
- One huge showing.The face at a size that hides nothing. If it survives 300px it earns 15px.
- The ramp.Same word, stepped sizes. The variable is isolated, so the change is legible.
- The pangram.Every letter once, in a sentence, because alphabets are not read in order.
- The grid.The full set on display. No glyph gets to be a surprise later.
- Metrics beside letters.Sizes, weights, and bytes printed next to what they describe.
- The stack is the subject.Specimen what you ship. Anything else is an advertisement for someone else's work.
Honesty notes: Newsreader and Source Serif ship in one weight each, by design; the page-weight budget is part of the identity, and where the site sets them heavier the browser synthesizes, so this specimen shows only real, shipped forms. The weight slider is the one exception to the stack's single-weight rule because JetBrains Mono genuinely carries the axis in its file. The byte table is hard-set from a 2026-07-16 measurement and re-verified live by script; if a number ever disagrees with the network tab, believe the network tab and fix the page.
Negative mode swaps paper and ink and promotes amber text to the bright graphic amber, the same rule the brand system uses on dark plates. It is a control, and it controls something real: every colour on the sheet, with contrast holding on both grounds.