Inter Tight font showing artefacts when used as a distance field font

totebo · October 18, 2022, 8:45am

I’ve finally found a quite beautiful font for my game, namely Inter Tight on Google Fonts.

I like to render fonts using a distance field material, to get the flexibility of resizing them and retain their sharpness.

For some reason, this particular font, shows thin lines on some glyphs when rendered with the distance field material:

Inter Tight font test.zip (159.5 KB)

Changing the material to use highp for all variables shows a marginal improvement, but the lines are still visible.

Is there something else I could try to be able to use this font as a distance field?

totebo · October 18, 2022, 8:57am

Follow up question: Using the default Text Tracking in Defold (0), the kerning seems off in paces, in this example the space between the T and e is much bigger than the space shown on fonts.google.com. What’s the reason for this, and could this be tweaked somehow?

The kerning seems to be consistent in Defold regardless of using bitmap or distance field.

Mathias_Westerdahl · October 18, 2022, 9:15am

This artefact has been reported before:

It’s a bug (imho) in our distance field generator that doesn’t account for shape intersections.
This is a small and isolated piece of code, so perhaps someone may be able to help out?

github.com

defold/defold/blob/dev/com.dynamo.cr/com.dynamo.cr.bob/src/com/dynamo/bob/font/DistanceFieldGenerator.java#L37

    
      
          public void addLine(double x0, double y0, double x1, double y1)
          {
              lineSegments[lineSegmentsEnd+0] = x0;
              lineSegments[lineSegmentsEnd+1] = y0;
              lineSegments[lineSegmentsEnd+2] = x1 - x0;
              lineSegments[lineSegmentsEnd+3] = y1 - y0;
              lineSegments[lineSegmentsEnd+4] = 1.0 / ((x1-x0)*(x1-x0) + (y1-y0)*(y1-y0));
              lineSegmentsEnd += 5;
          }
          
          
// Compute the minimal distance from [x, y] to any of the line segments
          public double distSqr(double x, double y)
          {
              double distMin = 10000000;
              for (int i=0;i<lineSegmentsEnd;i+=5)
              {
                  double x0 = lineSegments[i];
                  double y0 = lineSegments[i+1];
                  double dx = lineSegments[i+2];
                  double dy = lineSegments[i+3];
                  double k = lineSegments[i+4];

anon95708182 · October 18, 2022, 11:30am

That is a pity, it is a beautiful font.
You could try and tidy it up using a font editor (but do check the license if you are allowed to alter and then use the font in your projects). This would be quite a lot of work though and probably wouldn’t solve the kerning problem.

And since I love fonts, I had a quick look for similar Google Fonts, all seem to be ok (I just checked the capital D):
Arimo, Work Sans, maybe IBM Plex Sans. Or other Helvetica Alternatives.

totebo · October 18, 2022, 12:57pm

Thanks! Here is the relevant forum post..

I’ll look around for a different font. Thanks for the suggestions @anon95708182!

Update: Arimo and Work Sans are both good alternatives, but, alas, also suffer from the issue.

anon95708182 · October 18, 2022, 3:40pm

You are right, Work Sans has also overlapping. Not in the “D” though, which is what I quickly looked at in fontforge. Sorry!
I don’t have overlapping troubles with Arimo though
But: Arimo has the same kerning problem where “T” and “e” meet. I then also tried with my favourite font, Montserrat. Same thing. I never noticed this before and I use this font in almost every app.

Arimo

Montserrat: