• Smashing Animations Part 7: Recreating Toon Text With CSS And SVG After finishing a project that required me to learn everything I could about CSS and SVG animations, I started writing this series about Smashing Animations and “How Classic Cartoons Inspire Modern CSS.” To round off this year, I want to show you how to use modern CSS to create that element that makes Toon Titles so impactful: their typography. • Title Artwork Design In the silent era of the 1920s and early ’30s, the typography of a film’s title card created a mood, set the scene, and reminded an audience of the type of film they’d paid to see. • Cartoon title cards were also branding, mood, and scene-setting, all rolled into one. • In the early years, when major studio budgets were bigger, these title cards were often illustrative and painterly. • But when television boomed during the 1950s, budgets dropped, and cards designed by artists like Lawrence “Art” Goble adopted a new visual language, becoming more graphic, stylised, and less intricate. • Note: Lawrence “Art” Goble is one of the often overlooked heroes of mid-century American animation.
Article Summaries:
- The Smashing Animations series now features Part 7, which shows how to recreate classic cartoon title typography using modern CSS and SVG. After studying animation history, the author explains how 1920s‑30s film title cards set mood and branding, and how mid‑century TV cartoons, especially Hanna‑Barbera’s work by Lawrence “Art” Goble, shifted to graphic, stylised designs. The post introduces a Toon Text Title Generator that lets designers experiment with colors, strokes, text shadows, and letter spacing, then copy the resulting CSS for use in web projects. The article highlights how these techniques can inform effective web headers, banners, and splash screens.
Sources: