SDF letter spacing

 from Red Blob Games’s Blog
Blog post: 8 Sep 2024

My summer project is to work on labels for maps. In the previous 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 apart.

Letter spacing issues

The spacing between characters is normally set in the metrics for the characters. There’s also a way to override the spacing between specific pairs of characters, using “kerning tables[1]”, named kern and GPOS in TrueType. I don’t have kerning implemented.

Hypothesis: I need to implement kerning. To test this, I rendered k and s with other letters to see if either one was the issue:

Testing spacing of s and k

It does seem like k is generally close to the letter to the right of it. So that suggests it’s the letter k and not a kerning issue.

But I was curious about kerning, so I checked the font data and this font (Fira Sans) doesn’t have a kerning table in it. So that means k really is a little too close to the neighbor. I verified this by checking the rendering in Google Chrome on the Google Fonts web site (second image) and compared to my rendering (first image):

Spacing issues

Sure enough, both the h + e and k + s spacing issues are there. So that’s just how the font is. Ok, I guess there’s nothing I can do here, at least for this font. Later I will try other fonts, and then I can revisit this issue.

I was extremely pleased that my font renderer looked so close to Google’s, not only the spacing but also the shapes. Looking closely at the edges led me down another rabbit hole … a tale for the next blog post.

Email me , or tweet @redblobgames, or comment: