Search Unity

  1. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Question TextMeshPro UGUI text blurry on small font size

Discussion in 'UGUI & TextMesh Pro' started by YuHeLong, Dec 7, 2021.

  1. YuHeLong

    YuHeLong

    Joined:
    Apr 17, 2015
    Posts:
    15
    I am working on a new project and selecting a suitable font to be used, I noticed that the text start to be blurry when the font size is 18 and less, I am using Unity 2021.2.5f1 (same one 2019 and 2020 LTS versions) and Textmesh pro 3.0.5

    I configured the font to use dynamic render mode, here is what it looks like in editor Game View

    upload_2021-12-8_9-24-50.png

    I also try the way most popular result by internet search, to use a large font size and scale down, but I don't think it is practical way and result is also bad.
    upload_2021-12-8_9-18-56.png upload_2021-12-8_9-19-18.png

    Does anyone know what may cause this to happen? any way to improve the text quality?

    few more configuration screenshots I think related to the problem
    upload_2021-12-8_9-18-56.png

    upload_2021-12-8_9-19-18.png

    upload_2021-12-8_9-19-31.png
    ----------------------

    Here is a link to a webgl build example:
    http://vroom.darkspede.space/

    Here is a link for a WINDOWS build :
    https://www.dropbox.com/s/ttzunllkh0v37b9/Build.7z?dl=0
     
  2. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    In order to rule out potential issues related to SDF Scaling related to the use of the Canvas Scaler, see if using one of the SSD shaders included with TMP will result in the text rendering better.

    The SSD shaders are included in the TMP Essential Resources and have the SSD suffix in their names.
     
  3. YuHeLong

    YuHeLong

    Joined:
    Apr 17, 2015
    Posts:
    15
    Thank you for the suggestion, I go try the Distance Field SSD shader, and there is no visible changes from the default Distance Field shader.

    upload_2021-12-10_10-54-11.png

    oh, and I noticed that the less the font size is, it turns more greyed out even I set the text color to black
     
  4. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    Enable Extra Padding in the Extra Settings of the text component inspector.

    Switching to linear color space should help (assuming you can for the platform you are targetting.

    Outside of that, you can try adjusting the Dilation at bit and tweak sharpness in the Debug section of the material inspector.
     
  5. YuHeLong

    YuHeLong

    Joined:
    Apr 17, 2015
    Posts:
    15
    I have set the Extra Padding in TMPSetting by default, set linear color space, this is a new blank project for me to choose a font to use, I have played with debug configurations and I still can not get the font to render nicely. this is the closet result I can get using my current setting

    upload_2021-12-11_8-53-36.png



    upload_2021-12-11_8-53-47.png

    Just wondering if there is any asset project/tutorial I can buy to check out what others have done with the settings to render UI text, most project I get from the asset store never uses small fonts, I am trying them out one by one for now
     
  6. m-rasit-k-y

    m-rasit-k-y

    Joined:
    Apr 14, 2019
    Posts:
    2
    the same thing just happened to me and after a long struggle I realized that the solution is simple :D

    as I show here, the problem is solved when you turn off Anti-Aliasing on the camera
     
  7. YuHeLong

    YuHeLong

    Joined:
    Apr 17, 2015
    Posts:
    15
    Thanks for share your experience, I'm using the built-in renderer pipeline, I tried to turn off all AA setting and post-processing and result still the same, TMP works will in 4K resolution, however in 1920x1080, I can't find a way to get a clear result