Toon Title Text Generator

Andy Clarke with a brand-new resource. It generates the sort of fun typography that Andy commonly uses in his own work that’s geared towards cartoon headings. There are a number of configurable options for font, color, stroke, letter spacing, and shadows. And it spits out the CSS for you to copy-paste. What if you want to individually style each letter? Well, there’s no such thing as :nth-letter in CSS at the moment. There are, however, tools that will wrap each character in a separate <span> , the most tradition one being SplitText.js . But Andy decided to make a tool for that - called Splinter.js - as well because he saw opportunities to enhance the accessibility of the generated markup to help prevent some assistive tech from choking on the spans. ( GSAP’s version also does a good job of this.) Som instead of: <h2> <span>H</span> <span>u</span> <span>m</span> <!-- etc. --> </h2> ...we get ARIA-spiced markup: <h2 data-split="toon" aria-label="Hum Sweet Hum"> <span class="toon-char" aria-hidden="true">H</span> <span class="toon-char" aria-hidden="true">u</span> <span class="toon-char" aria-hidden="true">m</span> </h2> And it supports line breaks!

Preview: ~176 words