Lettering.js would be easier for you to use than manually maintaining all of that HTML.
It means you only have ugly CSS, instead of ugly CSS and ugly HTML.
With regard to cleaning up the CSS, there’s not much you can do. Why start from 63 and increment +1, and then randomly jump by a whole bunch? Just for the sake of maintainability, I’d increment by +1 all over :)
Thanks for the quick response Ed. I might give Lettering.js a look. The only reasoning behind the z-indexing was that I need to take into account what else will be on the site, and I know I won’t need any more than 20 characters per line in these headings so there was kind of a logic there.
Unless I’m mistaken you don’t need the classes on the spans as in your demo you have no positioned defined for the span anyway so the z-index isn’t being applied and is redundant (in your demo at least).
That means you could reduce the css and html as the natural stacking order will place those elements on top of each other. If you don’t mind risking the wrath of the semantic police you could use the b element instead of a span to shorten the effect on the html.