[SOlUTIONS] UI Text / TextMesh is blurred [Unity 4.6-5.3.5f]

If I use any UI component with text-- text there is blurred.
75670-screenshot-1.png

After looooong investigation I found the following thing:

The reason of such behavior can be:

  • using of scaling of text object (set it higher than 1)
  • setting of Canvas Scaler to “Match Width or Height”
  • any other way of non-direct scaling of text obj.

As I understood, the problem of unity that it’s rasterizing text(fonts are in vector, after all). Don’t know why they are doing this.

Possible solutions of the problem:


Lame hack 1:

Change font size to large and change scale to small.

But this is not solution, just lame hack that can create additional problems (as example: auto-scaling of toogle element).

another way to do automatically the same thing using the following script:

using UnityEngine;
using UnityEngine.UI;

public class TextSharperer : MonoBehaviour
{
    private const int ScaleValue = 10;

    private Text _text;

	void Start ()
	{
	    _text = gameObject.GetComponent<Text>();

	    _text.fontSize = _text.fontSize * ScaleValue;

        _text.transform.localScale = _text.transform.localScale / ScaleValue;

        _text.horizontalOverflow = HorizontalWrapMode.Overflow;
        _text.verticalOverflow = VerticalWrapMode.Overflow;
	}
}

This script will automatically change scale and font size in 10 times to make it less blurred. So in editor it will be blured, but will be sharp enough in the play mode.


Lame hack 2:

Switch to DX11 + change the rendering mode in the font import settings to “Hinted Raster”.

Will not work on mac or mobile platforms because of there is no DX!


Hack-Workaround 3:

Configure “Canvas Scaler” : set “Dynamic Pixels Per Unit” to some larger value

  • Can’t use it if you need to set “Canvas Scaler” to another mode

  • If you need to get pixeled font – it’s impossible


Hack 4 (For Pixel Scripts):

  1. Import custom font(even if this will be the same original Arial)

  2. Set it’s “Rendering mode” to “Hinted Raster”

  3. Add the following script to this text element:

       using UnityEngine;
     using System.Collections;
     using UnityEngine.UI;
      
     [ExecuteInEditMode]
     public class SetFontFilteringToPoint : MonoBehaviour
     {
     	void Start ()
     	{
     		GetComponent<Text> ().font.material.mainTexture.filterMode = FilterMode.Point;
     	}
     }
    

Result:
75675-cc3c367136f5448d97a8c39c956ca04f.png


Lame Hack 5

  1. Set Canvas Scale “Match mode” to “Match Width and Height”
  2. Set refference resolution to “160x120” or “320x240”.

Text will be much and much sharper.
BUT!!! It’s harder to locate objects on the screen because of unity positioning support only 1 number after dot symbol…


Costly solution 6:

Buy TextMeshPro for 95 USD

Jesus! I need to buy asset for 100$ just to make the text sharper in “Match Width or Height” mode of Canvas Scaler? Unity team, WTF?


TextMesh

Solution is easy, but the same hack:

You need to set CHARACTER SIZE to small (0.03 as example) and increase the FONT SIZE to 355.
But as plus – you don’t need to scale it.

Is there exist any GOOD SOLUTION of this problem?

Without any stupid hacks?

Why don’t you simply increase the size of the font to something like 300 and set its character to Unicode? Crisp text all day! 77932-image-2016-09-09-at-75249-pm.png

The solution is to never increase the scale over 1. UI Elements are always blurry if their scale value is over 1.

You can change the size of text either by changing the font size or using the Best Fit option of the

Another possible solution which finally worked for me: In the Game tab’s Aspect Ratio dropdown, uncheck ‘Low Resolution Aspect Ratios’.

Sometimes, even with pixel snap turned on, the UI text will still miss pixels, usually when on weird resolutions or inside containers with weird anchors. One more hack.

The solution is to pick pixel snap code from Sprite/Default shader, add it into UI/Default shader, and use that new shader for your UI text. It will work. Heck, if you don’t need stencils, you can just use Sprite/Default for your text.

What works for me is on the Import Settings of the font file, set Rendering Mode to Hinted Raster.

PC build :Here’s a video how to do it in 1 min Fixing BLURRY TEXT/ LOW QUALITY TEXT unity - YouTube mobile build : make it best fit and max 300 and It will work fine on mobile however it might look blurry on Unity.

For pixel art style fonts, Lame Hack 4 did the trick for me!

I found I only needed to put it on one GameObject with a Text component and all elements with the same font responded to the font’s material change; should have expected that but it was a nice surprise!

Btw, I’m using version 2020.1 :slight_smile: