Code a Wes Anderson title card (and 4 other director styles)

A director's title card is a fingerprint. Wes Anderson uses Futura, perfect symmetry, and a pastel palette. Kubrick uses a sans-serif so wide it feels architectural. Scorsese uses a hand-painted serif that looks like it survived from a 70s exploitation poster. None of these are accidents; all of them are reproducible in CSS.

Here are five title cards in five director's styles, with the type and layout choices that signal each.

1. Wes Anderson

The recipe: Futura (or Futura PT specifically), all-uppercase center alignment, two-line stack, a thin horizontal rule at top and bottom, generous symmetric padding, pastel background.

The Anderson card is not about the typography choice — it is about the symmetry. Every element is centered, every gap is equal, every rule has a matching counterpart. The unsettling-but-pleasing quality of his films comes from this excess of order.

Implementation note: text-align: center is necessary but not sufficient. You also need display: grid; place-items: center on the container, equal top and bottom padding, and matching top and bottom rule. If any of these is off by 2px, the card looks "almost-Anderson," which reads as worse than a non-Anderson card.

2. Kubrick

Wide sans-serif (Helvetica Bold Extended, or its modern stand-in), all-caps, tight letter-spacing, centered, no other elements. The card is the type.

.kubrick {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-stretch: expanded;
  letter-spacing: 0.02em;
  font-size: 160px;
  text-align: center;
}

The trap: Helvetica Bold Extended is rare on the web. font-stretch: expanded only works on variable fonts that include the width axis. The fallback is to use transform: scaleX(1.15) on regular Helvetica Bold — looks identical at the framed scale, costs no extra font weight.

3. Scorsese (the "Goodfellas" style)

Serif with a slight italic, slightly rough edge, blood-red on cream. References vintage exploitation posters.

.scorsese {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 180px;
  color: #b8302a;
  letter-spacing: -0.02em;
  text-shadow: 2px 2px 0 rgba(184, 48, 42, .2);
}

The slight text-shadow gives it the "screen-printed twice" feel. Without it, the card looks too clean; the era is meant to read as 1973, not 2025.

4. Tarantino

Heavy slab serif, yellow on black, decorative borders, oversized punctuation. References pulp paperbacks.

.tarantino {
  font-family: 'Rockwell', 'Courier New', monospace;
  font-weight: 900;
  font-size: 140px;
  color: #ffd700;
  background: #0a0a0a;
  letter-spacing: 0.02em;
  border-top: 6px solid #ffd700;
  border-bottom: 6px solid #ffd700;
  padding: 80px 120px;
}

The decorative borders are the Tarantino signature. Two thick lines, top and bottom, never side. The pulp-paperback frame is the visual quote.

5. Lynch

Centered serif, severely small relative to the frame, lots of negative space. The opposite of declarative.

.lynch {
  font-family: 'Times New Roman', serif;
  font-size: 28px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #d4d4d4;
  background: #060606;
}

The Lynch card whispers. Everything in his framing is about what you cannot quite see; the typography is at the edge of legibility. It is the only one of the five that is harder to read on purpose.

The CodeTabs comparison

All five, side by side:

The variable knob version

Make the Anderson card yours:

Why the recipe matters

Style transfer in video is mostly typography and palette. The framing rules are common across most director cards — centered, generous padding, one font, one accent. The type choice is what signals which director. If you know the five canonical pairings (Futura/Anderson, Helvetica-Extended/Kubrick, etc.), you can reproduce 80% of the recognizable styles in 15 lines of CSS each.

The three Ts of editorial motion covers the broader pattern: typography, timing, and tracking are the dimensions that carry editorial voice. Title cards are the cleanest place to study them.

If you ship video that needs to evoke a director without paying for the license to that director's font family, this is the move. Pick the recipe; type the title; render. The cards work because the typography choices are correct and the framing is symmetric — not because of any clever effect.