FreeType producing asymmetric glyphs

538 views Asked by At

So I am trying to implement font rendering with signed distance fields in my graphics engine.

For this I am using the FreeType library to generate Glyphs of all the letters. Specifically I am trying to load monochrome bitmaps like this:

FT_Load_Char(face, c, FT_LOAD_RENDER | FT_LOAD_TARGET_MONO)

And then I extract all the bits from the glyph buffer and put it into a monochrome black white texture that I can display on the screen for testing purposes.

My Code for extracting the bits and putting it into a byte array:

FT_Bitmap bm = face->glyph->bitmap;

FT_Bitmap mono;
FT_Bitmap_New(&mono);
//convert from 8 pixel per byte to 1 pixel per byte
FT_Bitmap_Convert(ft, &bm, &mono, 1);
//set each byte from 0/1 to 0/255
for (int y = 0; y < mono.rows; y++) {
    for (int x = 0; x < mono.width; x++) {
        mono.buffer[y * mono.width + x] *= 255;
    }
}

My problem however is, that the glyphs FreeType produces seem to be asymmetric.

For example this is the letter M with a font pixelsize of 64 using the font OpenSans-Regular:

enter image description here

And this is the letter M with the same Font with a pixelsize of 1024:

enter image description here

I have tried this with multiple fonts, multiple font sizes etc. and certain glyphs always stay asymmetric. Also note that I read the textures pixel data manually to verify that OpenGL's texture scaling or whatever doesn't cause the error.

Any ideas as to why FreeType seems to be producing asymmetric glyphs or could anyone tell me if this would even be a problem when later rendering text?

Edit: I now extract the bits using library functions, so the mistake must be somewhere in FreeType.

1

There are 1 answers

0
Robert Rouhani On BEST ANSWER

You are making the assumption here that OpenSans is a font where all the glpyhs are symmetric. This is not the case, nor is it a FreeType bug. You can always send an email to the freetype list, but will probably be given the same answer.

It's not an inaccuracy because the font designer designed the M glyph to not by symmetric, for whatever reasons he chose. A lot of times, this will be done to increase readability. A little asymmetry will cause hinting engines to rasterize the glyph in a slightly different way that will be more legible or look more 'crisp'. Here are a few screenshots to prove that this is the case.

First, this is a heavily zoomed in screenshot of Windows 10/Chrome 55 rendering the glyph in the browser at the smallest size the website would allow me to select. While it does look symmetric at first glance, it is not.

Chrome 55 screenshot

Second, I downloaded the font and opened it in FontForge. If you look closely you can see that the curves on the inside edge of the two sides are actually slightly different. I also took a moment to look at the two points that define the bottom center of the M. Their positions are (848, 0) and (985, 0). The midpoint between these two points is (916.5, 0), however the two points that define the top edge of this part of the glyph are at (920, 256) and (928, 256). This is shifted slightly to the right.

FontForge screenshot

If you're looking for symmetric or otherwise simple fonts, look for fonts geared towards programmers or as console fonts. Arial, Consolas, Courier New, etc. will probably fit the bill pretty well.