Smashing Animations Part 7: Recreating Toon Text With CSS And SVG

In this article, pioneering author and web designer Andy Clarke shows his techniques for creating Toon Text titles using modern 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. Typographic title cards from the early years of cinema. (Large preview) Top: William Hanna and Joseph Barbera’s 1940s Tom & Jerry title cards. Bottom: Colour versions released in 1957. © Warner Bros. Entertainment Inc. (Large preview) Title cards for Hanna-Barbera’s Yogi Bear. © Warner Bros. Entertainment Inc. (Large preview) Title cards for Hanna-Barbera’s Quick Draw McGraw. © Warner Bros. Entertainment Inc. (Large preview) Title cards for Hanna-Barbera’s Augie Doggie. © Warner Bros. Entertainment Inc. (Large preview) See this example in my Toon Text collection. (Large preview) See this example in my Toon Text collection. (Large preview) See this example in my Toon Text collection. (Large preview) See this example in my Toon Text collection. (Large preview) See this example in my Toon Text collection. (Large preview) Left:paint-order: stroke. Right:paint-order: fill. (Large preview) See this example in my Toon Text collection. (Large preview) See this example in my Toon Text collection. (Large preview) See this example in my Toon Text collection. (Large preview) See this example in my Toon Text collection. (Large preview) Smashing NewsletterTips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use. Front-End & UX Workshops, OnlineWith practical takeaways, live sessions, video recordings and a friendly Q&A. TypeScript in 50 LessonsEverything TypeScript, with code walkthroughs and examples. And other printed books. 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. Typographic title cards from the early years of cinema. ( Large preview ) 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. Top: William Hanna and Joseph Barbera’s 1940s Tom & Jerry title cards. Bottom: Colour versions released in 1957. © Warner Bros. Entertainment Inc. ( Large preview ) 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. He primarily worked for Hanna-Barbera during its most influential years of the 1950s and 1960s. Goble wasn’t a character animator. His role was to create atmosphere, so he designed environments for The Flintstones , Huckleberry Hound , Quick Draw McGraw , and...

Preview: ~500 words