Signed Distance Field Fonts

In the last few posts I have shown some of the experiments I did with font rendering. Those experiments were all in the In the last few posts I have shown some of the experiments I did with font rendering. Those experiments were all in the rendererrenderer. I’m using . I’m using msdfgen-atlasmsdfgen-atlas to generate the textures used by the renderer, and I wanted to experiment with to generate the textures used by the renderer, and I wanted to experiment with msdfgenmsdfgen’s parameters. Instead of generating new font data and then reloading the browser, I decided to try “headless” rendering controlled by a shell script.’s parameters. Instead of generating new font data and then reloading the browser, I decided to try “headless” rendering controlled by a shell script.

Blog post: 9 Oct 2024 Blog post: 9 Oct 2024Over the last few posts I wrote about things I did to improve font quality, such as Over the last few posts I wrote about things I did to improve font quality, such as antialiasingantialiasing and and combining distance fieldscombining distance fields to merge outlines and halos. But I want to “pop up the stack” a bit and talk about one of the bigger goals for this... to merge outlines and halos. But I want to “pop up the stack” a bit and talk about one of the bigger goals for this...

Blog post: 27 Sep 2024 Blog post: 27 Sep 2024Learning about font rendering, I was looking at text closely Learning about font rendering, I was looking at text closely last timelast time, and I noticed another issue. The shadows of each letter overlap the previous letter. That’s because I’m drawing one letter at a time. So for example in the fl, I draw the f’s letter, outline, and shadow, , and I noticed another issue. The shadows of each letter overlap the previous letter. That’s because I’m drawing one letter at a time. So for example in the fl, I draw the f’s letter, outline, and shadow, thenthen I draw l’s letter, outline, and shadow. So l’s shadow is... I draw l’s letter, outline, and shadow. So l’s shadow is...

Last timeLast time I was looking at letter spacing with my renderer to see how it compared to Google Chrome on Mac. But while doing that I noticed that their antialiasing looked nicer than mine. So I tweaked parameters, including antialias edge width, gamma, and threshold bias. I was looking at letter spacing with my renderer to see how it compared to Google Chrome on Mac. But while doing that I noticed that their antialiasing looked nicer than mine. So I tweaked parameters, including antialias edge width, gamma, and threshold bias.

My My summer projectsummer project is to work on labels for maps. In the is to work on labels for maps. In the previous postprevious post I described how I created outlines, and how I had a bug in the rendering. While looking closely at text to fix that bug, I noticed in one of my tests that the k and s seemed too close together. The h and e seemed a little too far... I described how I created outlines, and how I had a bug in the rendering. While looking closely at text to fix that bug, I noticed in one of my tests that the k and s seemed too close together. The h and e seemed a little too far...