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

Unity Engine
, ,
1

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.

9830745--1413846--upload_2024-5-12_20-57-31.png
9830745--1413846--upload_2024-5-12_20-57-31.png952×568 24.5 KB

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

  2. Expand the SDF:

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

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

9830745--1413855--upload_2024-5-12_21-0-39.png
9830745--1413855--upload_2024-5-12_21-0-39.png813×285 8.57 KB

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

9830745--1413858--upload_2024-5-12_21-1-40.png
9830745--1413858--upload_2024-5-12_21-1-40.png814×564 31.9 KB

  1. Inspect the SDF and click Update Atlas Texture:

9830745--1413861--upload_2024-5-12_21-2-16.png
9830745--1413861--upload_2024-5-12_21-2-16.png815×313 21.2 KB

12 Likes
TextMesh Pro Rendering Small Fonts Lower Quality Than Legacy Text
2
  1. 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.

9830751--1413864--upload_2024-5-12_21-10-0.png
9830751--1413864--upload_2024-5-12_21-10-0.png646×1484 88.6 KB

  1. 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.

9830751--1413867--upload_2024-5-12_21-10-57.png
9830751--1413867--upload_2024-5-12_21-10-57.png1410×350 581 Bytes

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

9 Likes
3

This was the only thing that helped my issue - thanks TonyLi!

1 Like
4

I’ve been trying to fix this problem for WEEKS now. You are a god-send. I love you.

5

Glad those steps could help!

6

Exactly what I was looking for after searching for hours. Thank you!

7

Thanks a ton for this, Tony!

8

I picked up another tip recently from Brian Bucklew (Caves of Qud). If your text isn’t kerning properly or is slightly off when aligning to the baseline, try turning off the TextMeshPro/TextMeshProUGUI’s Extra Settings > Font Features > kern.