Font Distortion

 from Red Blob Games
2 Apr 2024

A few weeks ago when I was exploring text animation effects I noticed that changing the font sprite from a rectangle to a trapezoid made the font look really interesting. I didn’t quite understand why, at the time, and I wanted to focus on animations so I wrote it down as a thing to investigate later. Well, that later is now. u_variant controls the division of the rectangle into triangles. Set that, then try adjusting u_skew_x to see how the distorted text changes. Set both u_skew_x and u_skew_y to the center position to get the original undistorted font.

 1  Screenshots#

Here’s the original serious-looking undistorted font:

screenshot of
Original font

This shows how skew can change the character of the font. It looks more “fun”, even though it’s the same font underneath!

screenshot of
Bottom-heavy font

Skew the other way can make it look spooky:

screenshot of
Spooky font

There could be many more variants from changing the triangulation and skew parameters. All from one basic font!

 2  More#

I love the comments people leave on my pages and blog posts. They pointed to

And I learned a lot from there.

I also later found https://www.shadertoy.com/view/MdycWh[3] and https://www.shadertoy.com/view/4sVyWh[4] which is a different type of distortion on sdf fonts.

Source: font-distortion.js

Email me , or tweet @redblobgames, or comment: