<p>After some trials I've realized my problem was a programming error and not an actual issue with SDF fonts.</p>
<p>Originally I was rendering the numbers on the texture of the canvas, which had a fixed scale. I thought that it will redraw the quads during the zoom but it wasn't the case. After I've separated the character drawing from the canvas and scaled them separately they finally look sharp.</p>
<p>The linked comments about the small text rendering was slightly misleading. They do have some issues with smaller scale, but that's only the case when the view is zoomed out.</p>

CC BY-SA 4.0
2020-07-08T09:45:31.693Z
2020-07-08T09:45:31.693Z
Endanke
<p>I have a setup where I'm rendering a bunch of characters on a canvas with an SDF font. The users can zoom in to see the details of the smaller texts, but currently the smaller characters are quite pixelated. (See the image below.) I'm looking for an approach to improve their quality.</p>
<p>Based on these comments I believe SDF fonts are not really good for small text rendering:</p>
<ul>
<li><p><a href="https://computergraphics.stackexchange.com/a/9337/11769">https://computergraphics.stackexchange.com/a/9337/11769</a></p>
</li>
<li><p><a href="https://gamedev.stackexchange.com/questions/71841/how-do-some-mobile-games-scale-graphics-so-beautifully/71850#comment129983_71850">https://gamedev.stackexchange.com/questions/71841/how-do-some-mobile-games-scale-graphics-so-beautifully/71850#comment129983_71850</a></p>
</li>
</ul>
<p>I'm wondering if there's any viable workaround. For example, would it make sense to somehow reuse the larger characters by rendering them in a separate texture and scaling them down? Because when I zoom out, the larger characters look a lot better as they get smaller, I believe the problem might be that the SDF font cannot be interpolated on a too small scale.</p>
<p>My setup is based on these resources:</p>
<ul>
<li><a href="https://github.com/libgdx/libgdx/wiki/Distance-field-fonts" rel="nofollow noreferrer">https://github.com/libgdx/libgdx/wiki/Distance-field-fonts</a></li>
<li><a href="https://github.com/SaschaWillems/Vulkan/blob/master/examples/distancefieldfonts/distancefieldfonts.cpp" rel="nofollow noreferrer">https://github.com/SaschaWillems/Vulkan/blob/master/examples/distancefieldfonts/distancefieldfonts.cpp</a></li>
</ul>
<p>I've already tried generating mipmaps which didn't really make any difference.</p>
<p><a href="https://i.sstatic.net/Q4Ldp.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Q4Ldp.png" alt="Scale comparison" /></a></p>

<opengl><signed-distance-field><font-rendering>
How to scale signed distance field fonts properly?
Endanke
# How to scale signed distance field fonts properly?

(Asked by: username_0 on 2020-07-06)

I have a setup where I'm rendering a bunch of characters on a canvas with an SDF font. The users can zoom in to see the details of the smaller texts, but currently the smaller characters are quite pixelated. (See the image below.) I'm looking for an approach to improve their quality.

Based on these comments I believe SDF fonts are not really good for small text rendering:

* <https://computergraphics.stackexchange.com/a/9337/11769>
* <https://gamedev.stackexchange.com/questions/71841/how-do-some-mobile-games-scale-graphics-so-beautifully/71850#comment129983_71850>

I'm wondering if there's any viable workaround. For example, would it make sense to somehow reuse the larger characters by rendering them in a separate texture and scaling them down? Because when I zoom out, the larger characters look a lot better as they get smaller, I believe the problem might be that the SDF font cannot be interpolated on a too small scale.

My setup is based on these resources:

* <https://github.com/libgdx/libgdx/wiki/Distance-field-fonts>
* <https://github.com/SaschaWillems/Vulkan/blob/master/examples/distancefieldfonts/distancefieldfonts.cpp>

I've already tried generating mipmaps which didn't really make any difference.

[![Scale comparison](https://i.sstatic.net/Q4Ldp.png)](https://i.sstatic.net/Q4Ldp.png)

**Tags:** opengl, signed-distance-field, font-rendering


---

## 1 answers

### Answer by username_0 on 2020-07-08. Score: 1

After some trials I've realized my problem was a programming error and not an actual issue with SDF fonts.

Originally I was rendering the numbers on the texture of the canvas, which had a fixed scale. I thought that it will redraw the quads during the zoom but it wasn't the case. After I've separated the character drawing from the canvas and scaled them separately they finally look sharp.

The linked comments about the small text rendering was slightly misleading. They do have some issues with smaller scale, but that's only the case when the view is zoomed out.


---

