Writing a Guide to SDF Fonts
Source: Hacker News
Background
Back in 2024 I started experimenting with signed distance field (SDF) rendering of fonts, aiming to implement outlines and shadows in a single pass. I got a prototype working for a game and a map generator, but I never fully understood why some approaches succeeded while others failed. My notes from that time ended up showing up near the top of Google results for “sdf fonts” [1], which prompted me to create a proper guide.
I had a collection of 22 diary‑style pages describing what I tried, plus an unfinished “overview” page that attempted to cover several SDF font libraries (msdfgen, stb_truetype, tiny‑sdf, etc.). The overview included code snippets, diagrams, and screenshots of each library’s output.
Sketch of distance fields, created with Excalidraw [2]
First Overview Attempt
The original scope proved too large. I had spent most of my time with msdfgen and lacked enough knowledge of the other libraries to write a coherent guide. Consequently, I decided to narrow the focus.
Redesign 2 – Focusing on msdfgen
I limited the guide to msdfgen while still discussing trade‑offs such as atlas size, antialias width, shader derivatives, and smoothing functions. To illustrate the concepts, I created several diagrams:
Diagrams from redesign 2, created with Excalidraw [3]
I also ran extensive tests to compare the impact of different atlas sizes, capturing many screenshots and recording the commands used. However, repeating the same testing effort that I had already documented in earlier blog posts (one and two) felt redundant, so I pivoted.
Redesign 3 – “How‑to” Page with JavaScript and GPU Implementations
The new direction was to present the concepts first, then provide two implementations:
- CPU rendering using JavaScript.
- GPU rendering with a fragment shader.
I refreshed the diagrams to a cleaner style:
Diagrams from redesign 3, hand‑written SVG
Although the page was progressing, it still felt overly technical—filled with shell commands and low‑level code that only I would find useful.
Redesign 4 – Concept‑Focused Page
I stripped away implementation details and centered the guide on:
- The visual effects achievable with SDF fonts.
- How SDF works under the hood.
- Practical advice for using SDF to create those effects.
The previously written code‑heavy material was moved to a separate, unpolished page. I also added a visual timeline of my activity over the past year:
Work over the past year, generated with Cal‑heatmap [4]
Final Result
After iterating through several designs, I’m finally satisfied with the page. It now serves as a concise, concept‑driven guide to SDF fonts, with clear diagrams and practical recommendations, while keeping the implementation details available for those who need them.
I hope search engines will eventually direct users to this more useful resource.