A new online resource is available for generating engaging typography, specifically designed for cartoon-style headings. This tool produces the kind of playful text often seen in creative design work.
Users can configure various options including font, color, stroke, letter spacing, and shadows to achieve their desired look.
The generator provides ready-to-use CSS that can be directly copied and pasted into projects.
Styling individual letters within a text string can be challenging in CSS, as there is no direct :nth-letter selector. Tools exist to wrap each character in a separate <span> for individual styling, such as SplitText.js. However, a tool called Splinter.js was developed to offer a more accessible approach to text splitting, aiming to prevent issues with assistive technologies that might struggle with standard <span> wrappers. GSAP’s version also addresses accessibility concerns effectively.
Consider the difference from standard markup:
<h2>
<span>H</span>
<span>u</span>
<span>m</span>
<!-- etc. -->
</h2>The result is ARIA-enhanced 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>This functionality also supports line breaks.
