Back in 2024 I learned about SDF (signed distance field) rendering of fonts. I was trying to implement outlines and shadows in a single pass instead of drawing over the text multiple times in different styles. I intended to use these fonts for two different projects, a game and a map generator. I got things working but didn’t fully understand why certain things worked or didn’t work. I wrote some notes on my site about what I tried. In the end, I stopped working on both the game’s fonts and the map generator, so I put all of this on hold.
Fast forward to late 2025, and my incomplete notes sometimes show up on the first page of search results for “sdf fonts”[1]! Surely that isn’t the best page on the topic. It would be better to point to library documentation or maybe one of the research papers about the topic. My page isn’t that good.
Initially my thought was “search engines are in their decline” but then I decided “this is an opportunity”. I decided to make a page worthy of being the top search result.
I first looked through everything I had written. I already had started an “overview” page but hadn’t gotten very far on it. I also have 22 separate pages that were “diary style”, about what I did rather than what you should know.
The overview page covered how to use various SDF font libraries (msdfgen, stb_truetype, tiny-sdf, etc.). I wrote code for multiple libraries, had sketched out diagrams for various concepts, and had screenshots of outputs from each of those libraries.
Sketched out concepts, using Excalidraw[2]
At some point I realized the scope was too large. I had spent the most time with msdfgen and hadn’t yet learned enough about the other libraries to write a proper guide. They all worked differently. I kept getting stuck. So I reduced the scope. In redesign 2 I decided to only use msdfgen, but show the various tradeoffs involved (atlas size, antialias width, shader derivatives, smoothing function).
I made several diagrams for concepts, such as:
Diagrams from redesign 2, using Excalidraw[3]
And I started running tests. I wanted to compare the effect of atlas size, so I made lots of screenshots and started looking closely. I wanted to come up with a way to recommend a specific size. I wanted to make recommendations for all the other parameters. I showed all the commands I ran.
... continue reading