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.

Introducing ztext.js — make your website pop with 3D typography. Responsive, easy to implement, and accessible. Big effect, tiny javascript library... and it works with every font! https://t.co/wwXPJoNnSB pic.twitter.com/wH6kD5HiKr

— Bennett Feely (@bennettfeely) August 25, 2020

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.

➶ ZText