Typography · Type Specimen
Halcyon Type Specimen. Live interactive document. Weight waterfall hero, optical scale, editorial setting, italic grid, figure system, pangram, and full character set. HTML/CSS, no frameworks.
A type specimen has one job: prove that a typeface has range. It needs to show the face at its most extreme: maximum weight, minimum weight, display scale, caption scale, editorial setting, tabular figures. And it does all of this in a layout that is itself a demonstration of typographic craft. The design and the content make the same argument.
The subject is Halcyon Grotesque, a typeface concept that began as a university type design project in 2008 and has evolved as web typography matured. The fictional provenance (a founder, a name origin, a 1960s Swiss foundry context) was part of the original brief: the story of a typeface is part of what makes you trust it.
The specimen opens with a nine-weight waterfall: the word HALCYON rendered at large scale across every weight from Thin 100 to Black 900, each labeled in Courier Prime. It's the first thing a type buyer needs to see, and it turns a functional requirement into a visual statement.
A fixed left-column index keeps the reader oriented as they scroll. Each subsequent section demonstrates a different typographic mode: optical scale, editorial setting in a simulated magazine layout, weight and italic grid, tabular figures, a pangram specimen with atmospheric treatment, and a full character set with hover-activated glyphs.
The editorial panel (dark background, two-column layout) gives the typeface a high-contrast context that most specimens avoid. A grotesque that can't hold up in a dark setting has weaknesses in its thin weights. The pull quote sits in the middle register between headline and body, where most type fails.
The figures panel isolates four numeral styles: tabular lining, oldstyle, display/accent, and black weight. Data typography is a separate discipline from editorial typography. A grotesque that can't set a financial table isn't a complete typeface.
9
Weights demonstrated across the specimen
8
Typographic modes from scale through figures
640
Glyphs in the fictional character set
Type design is an argument about how language should feel. Halcyon began as an academic exercise in the Swiss grotesque tradition and grew into a complete working system: nine weights, eight typographic modes, a full 640-glyph character set, and editorial settings that hold at both headline and caption scale. The fictional foundry backstory, a 1960s Zürich press, was part of the original brief. A typeface is a cultural object, not just a collection of glyphs.
The specimen itself is a fully hand-coded responsive HTML document with clean CSS custom properties, scroll-linked navigation, and IntersectionObserver-driven active states. The code is as deliberate as the letterforms.