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

推荐订阅源

aimingoo的专栏
aimingoo的专栏
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Blog — PlanetScale
Blog — PlanetScale
博客园 - Franky
The GitHub Blog
The GitHub Blog
F
Fortinet All Blogs
Microsoft Azure Blog
Microsoft Azure Blog
I
InfoQ
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
T
Tailwind CSS Blog
博客园 - 三生石上(FineUI控件)
Apple Machine Learning Research
Apple Machine Learning Research
D
Docker
Google DeepMind News
Google DeepMind News
GbyAI
GbyAI
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
P
Proofpoint News Feed
N
Netflix TechBlog - Medium
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Engineering at Meta
Engineering at Meta
H
Help Net Security
B
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.