I had previously blogged about text effects, and how I accidentally discovered that I could alter the personality of the font by rendering a distorted shape. At the time, I was focused on text effects and didn’t want to get distracted by this discovery. So I wrote it down for later.
Well, later came, and I decided to explore it:
Here’s the regular text rendering (with some spacing issues unrelated to this exploration):

Here’s the effect I liked:

I had suspected that the problem was the way I turned a rectangle into two triangles, and some comments I got confirmed that. I wanted to see it for myself, so I painted the two triangles in different colors, and I added a grid:

This diagram confirmed that the distortion was indeed because of the triangulation. I made an interactive test page where I could try out different triangulations to see the effects, and I found another I liked:

Try out the interactive test. There’s still more to explore, like what happens with serif fonts, or what happens with non-linear distortions.