惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

The GitHub Blog
The GitHub Blog
阮一峰的网络日志
阮一峰的网络日志
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Apple Machine Learning Research
Apple Machine Learning Research
小众软件
小众软件
博客园 - 司徒正美
Last Week in AI
Last Week in AI
爱范儿
爱范儿
罗磊的独立博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
博客园_首页
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
The Cloudflare Blog
雷峰网
雷峰网
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
WordPress大学
WordPress大学
Jina AI
Jina AI
人人都是产品经理
人人都是产品经理
量子位
V
V2EX
博客园 - 叶小钗
宝玉的分享
宝玉的分享
T
Tailwind CSS Blog

Red Blob Games: latest blog posts

Red Blob Games: English: a vs an Red Blob Games: Differential heuristics Red Blob Games: Responsive design calculator Red Blob Games: Academic citations Red Blob Games: Highlighting interactive code blocks Red Blob Games: Optimizing page size Red Blob Games: Writing a guide to SDF fonts Red Blob Games: URLs with trailing punctuation Red Blob Games: What I did in 2025 Red Blob Games: Goodbye Sass Goodbye Sass Red Blob Games: RotMG map seeds Red Blob Games: Mapgen4 Mapgen4's use of WebGL2 Red Blob Games: Mapgen4 river shader Red Blob Games: Mapgen4 renderer Red Blob Games: Harnessing ChatGPT hallucinations Red Blob Games: Let Let's write a search engine, part 2 of 2 Red Blob Games: Let Let's write a search engine, part 1 of 2 Red Blob Games: Hexagon conversions Red Blob Games: Mapgen4 trade routes Red Blob Games: De-optimizing mapgen4 Red Blob Games: Hexagon spiral coordinates Red Blob Games: Thoughts on Flash Red Blob Games: What I did in 2024 Red Blob Games: Hexagon page animations Red Blob Games: SDF Halos SDF Halos
Red Blob Games: SDF letter spacing
2024-09-09 · via Red Blob Games: latest blog posts

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.