The Indie Web
8.26.2020 typograpgy

Typography in 3d, reminiscent of the glorious days of WordArt.


That’s right, nows the time to move your text off the boring x and y axis, and leap into the 3d world of z(text).

Creative developer Bennett Feely has created a hyper nifty library that will add that extra level of spice to your home page, landing page, titles … well, just about everywhere if I’m honest.

ztext is a tiny JavaScript library that, as I’ve said above, will pop your text into the third dimension. The clever trick here is using some CSS layering along with perspective and transforms, tightly bound together to give a perfect 3d effect.

The advantage of this technique, is that the library will be able to apply to any font, or as shown above, emoji.

Bennet has also made sure that using ztext won’t throw out screen readers with the extra layers, so your accessibility will stay perfectly in shape. He’s also popped in a wealth of options, including layer depth, fade, and alternate perspectives to give that unique flair.

To top it all off, the code is available on GitHub under the MIT license, and its slim clean and concise code is well worth a quick look.