The inspiration
The Cabinet of Dr. Caligari (1920) tells its story on title cards. The design of the background and
typography in these cards matches the slanted, distorted, and unsettling aesthetic of the film itself.
I challenged Claude to create a web tool to recreate those title cards.
Title cards from the film, 1920. Image via Art of the Title.
A typeface of our own
No public fonts captured the original type close enough for me, so this project started with Claude
crafting our own custom typeface, Holstenwall (cutely named for the setting of the film). Claude analyzed
as many title cards as I could find and established rules for the major forms.
Stems are wedges that taper to a point
Bowls are pennants
Holes are slivers, never round
Arms rise to the right
The G has the spiked tail from "CALIGARI"
Where the font fell short
Rendering the font in a webpage was trivial, but I wanted more from this tool. The original title cards
were handmade and naturally show variations. The layout of the cards was also skewed and inconsistent,
in keeping with the film's surrealism.
We tried adding multiple variations of each character to the typeface, but this still didn't give us the
control I desired.
Typed with the font: cuts 1 to 4, and then the same four again.
Drawing every letter
Holstenwall got us going, but we had to leave the typeface behind and try something new. This web tool
now considers each character as a set of points - based on the original typeface rules - but drawn
uniquely for every letter you type. The text is effectively rendered as an image in the HTML canvas.
By drawing each letter individually, we were able to create settings like "distort", "jumble", and
"angle" to fully control the text's surrealist feeling.
One stored R, and three of the many cuts drawn from it.
Setting the card
Using a drawing method also gave us control over the arrangement, placement, and sizing of entire phrases
or lines of text. Not as much control as a dedicated graphics editor, but much more than just applying CSS
to a text string.
Set the way a font would
Set by this page
Painting the card
Each card is painted in layers, back to front: the background shapes, film grain, the glowing letters,
and uneven light like a projector's.
1. Shapes
2. Grain
3. Letters and glow
4. Light