HeadlinesBriefing favicon HeadlinesBriefing.com

Recreating Retro Multi‑Stroke Text with CSS‑Doodle

Hacker News •
×

A Hacker News contributor rediscovered the vintage multi‑stroke lettering seen in the book *Graphic Japan* and tackled it with CSS. By layering several elements and assigning each a distinct -webkit-text-stroke-width, the author achieved progressively thicker outlines that approximate the classic effect. The technique relies on CSS‑Doodle to generate the stacked layers automatically.

The approach hinges on browsers rendering each stroke width as a separate outline, allowing colors to be sequenced for a gradient look. Firefox renders the outlines more smoothly than Chrome or Safari, and the result varies with the chosen typeface. To speed experimentation, the author added a @google-font helper that loads fonts on the fly.

Performance suffers when the font size grows; the rendering cost mirrors that of CSS filters and can cause flicker. Consequently, the method suits playful demos or static image generation rather than production sites. The author shared two ready‑made demos on CodePen, inviting developers to remix the effect for their own projects.