Search Unity

Problem with pixel perfect font

Discussion in 'UGUI & TextMesh Pro' started by Sly88, Jun 12, 2019.

  1. Sly88

    Sly88

    Joined:
    Feb 22, 2016
    Posts:
    73
    Hi guys,

    I have a huge problem with pixel perfect font. The font looks good only in a few sizes for example 16,32,64 etc.
    To show text I use Text Mesh Pro UGUI. I tested a few options like as Render Mode: Raster, huge font size and small game object size. I don't have a big experience with pixel art font but maybe you had a similar problem and you know how to fix it.

    btw, I tested this font https://www.dafont.com/chronotype.font?text=Pixel+Art+Font&l[]=10&l[]=1&l[]=6
     

    Attached Files:

  2. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,596
    Generally speaking, Pixel Art fonts should be created using bitmap modes which would be Raster as most of the time these fonts do not contain any Hinting.

    Pixel Art fonts are designed to be displayed at 1:1. This means if the font was designed at 16 points then it has to be created using the Font Asset Creator using a custom size of 16 and then when displayed at 16. Displaying the font at multiples of 16 will work but anything in between will be incorrect. (16 point size is the design size of the font you linked).

    For some Pixel Art fonts, you can use the Signed Distance Fields modes like SDF16 or SDF32 with higher sampling like 128 or even higher depending on how many characters you need / it contains. The reason for the higher sampling is to try to preserve the sharper corners. So if you can fit everything in a 1024 x 1024 or 2048 x 2048 texture and get at a sampling of 128 of better then it is worth checking if the SDF rendering will work for your needs. This is subjective in terms of if the text will look good enough for you.

    The advantage of using SDF is that you are not limited to 1:1 where you can now render this font at any point size.

    Below is an example comparing Bitmap Raster at 16 points rendered 1:1 vs. SDF at 128 at 16 points. Larger sample is in Scene view and smaller one is Game view at actual rendering size.

    upload_2019-6-12_15-39-46.png

    The bitmap Rastered version can only display correctly at multiples of 16 whereas the SDF has no limitations.

    The bitmap at 16 points will be cleaner with sharper edges whereas the SDF close with slight rounded corners which we could get around even more by increasing the sampling.

    The SDF is using dynamic SDFAA so glyphs are added as needed.
     
    Last edited: Jun 12, 2019