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!
Toon Title Text Generator originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
