Font Distortion

 from Red Blob Games’s Blog
Blog post: 31 May 2024

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):

Original text

Here’s the effect I liked:

Bottom-heavy variant

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:

Trapezoid is two triangles

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:

Spooky variant

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

Email me , or tweet @redblobgames, or comment: