Toon Title Text Generator: Fun Cartoon Typography, Real CSS Output

Andy Clarke has released a new tool that creates playful, cartoon-style typography for headings — the sort of visual flair he often uses in his own projects. The generator offers configurable options for font, color, stroke, letter spacing, and shadows, then produces the CSS for you to copy and paste directly into your work.

But what if you want to style each letter individually? CSS still lacks a native :nth-letter selector, so typical solutions wrap each character in its own <span>. The most traditional approach is SplitText.js, but Clarke built his own tool — Splinter.js — to fill a gap in accessibility. He saw room to enhance the generated markup so assistive technology doesn't choke on the spans. (For reference, GSAP's splitter also handles this well.)

So instead of splitting text into a blind chain of spans, Splinter.js outputs ARIA-spiced markup:

<h2>
  <span>H</span>
  <span>u</span>
  <span>m</span>
  <!-- etc. -->
</h2>

…and it even handles line breaks properly.

Direct Link →