Search Unity

  1. We are migrating the Unity Forums to Unity Discussions by the end of July. Read our announcement for more information and let us know if you have any questions.
    Dismiss Notice
  2. Dismiss Notice

TextMesh Pro How to set up crisp TTF/OTF pixel font rendering with TextMesh Pro

Discussion in 'UGUI & TextMesh Pro' started by TonyLi, May 13, 2024.

  1. TonyLi

    TonyLi

    Joined:
    Apr 10, 2012
    Posts:
    12,758
    Hope this isn't a redundant post, but a quick search didn't turn up a good answer. I recently had to set up a bitmap TTF font in TextMesh Pro. I had to spend a few minutes playing around with it to get it crisp. I'm posting my steps here so I can find them again if I need them later. If I missed steps or someone wants to add corrections or clarifications, please do.

    I'll go through the steps with Public Pixel Font (dafont.com).

    1. Drop the TTF into your Unity project.

    2. Determine the bitmap size -- in the case of Public Pixel Font, it's 8 px.

    3. Set the Font Size to match, and set Rendering Mode to Hinted Raster. No need to change the other settings. Click Apply.

    upload_2024-5-12_20-57-31.png

    4. Right-click on the font and select Create > TextMesh Pro > Font Asset. This will create an SDF file.

    5. Expand the SDF:

    upload_2024-5-12_20-59-23.png

    6. Inspect the Atlas subasset. Set Wrap Mode to Clamp and Filter Mode to Point:

    upload_2024-5-12_21-0-39.png

    7. Inspect the Atlas Material. Change the shader to TextMeshPro > Bitmap:

    upload_2024-5-12_21-1-40.png

    8. Inspect the SDF and click Update Atlas Texture:

    upload_2024-5-12_21-2-16.png
     
  2. TonyLi

    TonyLi

    Joined:
    Apr 10, 2012
    Posts:
    12,758
    9. This will open the Font Asset Creator window. Set the Sampling Point Size to the bitmap font size, and set Render Mode to RASTER or RASTER_HINTED. I chose the Extended ASCII Character Set below. Then click Generate Font Asset.

    upload_2024-5-12_21-10-0.png

    10. Create TextMeshPro / TextMeshProUGUI elements in your scenes. Set the Font Size to multiples of the bitmap size (e.g., for 8 px, use 8, 16, 32, etc.). Below is the font rendered at Font Size 8, then blown up in Photoshop so you can see that the edges are crisp.

    upload_2024-5-12_21-10-57.png

    Crispness will also depend on your canvas settings, but that's not specific to TextMesh Pro.