SDF letter spacing
Related
More from Red Blob Games: latest blog posts
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.
In the In the previous postprevious post I introduced my summer project, to render labels on maps. As part of this, I want to be able to draw I introduced my summer project, to render labels on maps. As part of this, I want to be able to draw outlinesoutlines, , haloshalos, and , and drop shadowsdrop shadows. . Signed distance fieldSigned distance field[1][1] fonts are well suited for this. The basic use is to consider the signed distances -1 to 0... fonts are well suited for this. The basic use is to consider the signed distances -1 to 0...