What Recreating Old School WordArt Taught Me About CSS
Tags: css, art, webdev, html
Published: 2019-08-05 20:54:31

---
title: What Recreating Old School WordArt Taught Me About CSS
published: true
description: I tried making WordArt with CSS to learn more about the capabilities and limitations of CSS.
tags: css, art, webdev, html
---

A few weeks ago, after being thoroughly inspired by the wonder that is [pure CSS Gritty](https://codepen.io/cobra_winfrey/pen/qgEGMZ), I got the idea to attempt to recreate WordArt from old school Microsoft Word in pure CSS.

![WordArt options in Microsoft word, Image via WikiHow](https://thepracticaldev.s3.amazonaws.com/i/b6ioxo75nb51v8gyezp4.png)

WordArt was a staple of my early-00s Word experience, and to my middle & high school brain was just the thing to make any piece of printed material look ✨polished✨.

It has been toned down in more recent versions of Word, but I wanted to go for the nostalgia factor and recreate the classics.

![Grid of WordArt options in Word 2019](https://thepracticaldev.s3.amazonaws.com/i/ltq98oknkbly07bqse1a.png)

I was not the first to have this idea. [Several](http://wordart.glitch.me/) [sites](https://codepen.io/kathykato/pen/omxPap) exist to generate modern WordArt on the web, but I noticed that these didn't seem to have all the options of the original WordArt function, and so I took this as an opportunity to get a bit better at CSS and try to implement them myself.

As it turns out, this is easier said than done, and it is with good reason that those online WordArt generators lacked some of the classics.

![My attempt at the tapered text using varying font sizes](https://thepracticaldev.s3.amazonaws.com/i/u7x5ulkfkbwannj3wo1g.png)

One of the first things I found is that CSS doesn't have a great way to "warp" text. You can have the text follow the path of an SVG, but you can't distort the shape of the text as in the third example on the first image. There may be legitimate accessibility reasons for this, as it can make text much less legible. It would also probably be difficult to implement in a robust way in CSS (and it's probably not a terribly  useful or requested feature). I tried to approximate it using varying font sizes and it did not turn out too great. Image above.

![Sparkling WordArt text](https://thepracticaldev.s3.amazonaws.com/i/3kqjjgr6w5u6osoxe7jz.png)

It's also more difficult than you'd imagine to set an image as the fill for text. And even so, it's only supported in WebKit. There's a [tutorial here](https://css-tricks.com/image-under-text/). Setting a gradient as a text fill requires [a similar process](https://css-tricks.com/snippets/css/gradient-text/).

![Curved text along an arc](https://thepracticaldev.s3.amazonaws.com/i/g15dwyy1m3arhy3lsgam.png)

As I mentioned earlier, it is possible to [wrap text along an SVG path](https://css-tricks.com/snippets/svg/curved-text-along-path/) but I think it would be hard to accommodate for text of arbitrary length (e.g. have a squiggly line that just got longer based on the text that was used). The example WordArt generators that I liked got around this issue on slanted text by using the [CSS transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) properties instead of SVGs.

Beyond these few challenges, I was impressed with how well most of the WordArt could be done with CSS. All the more reason to avoid embedding text in images (besides the existing accessibility wins). All of my CSS WordArt creations can be found on [this Codepen](https://codepen.io/valeriecodes/pen/dxzGOz).