[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?

For Posterity: TextMesh Pro is now free and comes with Unity. Works much better.

–

7 Answers

7

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

perfect! Exactly what I needed.

–

The "Unicode" setting did the trick for me! Sharpened right up! 500 is a bit large for me, I got an error about not being able to create the texture. I used a reasonable max, and as long as the places where I use the font don't exceed that font size, it seems as sharp as any larger number. I think there are memory implications for this, but in my case I'm on desktop, and not concerned with that. Thanks!

–

God bless you)

–

This works! But my question is: why? What is different for Unicode characters? Also, what are the drawbacks, if any? I'm thinking about slower rendering, more memory needed for characters, etc.

–

Thanks man. Your trick works like a charm. Made my text crisp immediately.

–

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

What about Toogle UI element. If I need to meke Toogle larger, I need to do manual configuration of every sub-element to make it resizable?

–

And by the way, I didn't used Scale field at all. All I had set is "Match mode" to "Match Width and Height" :) Scale on all blurred texts is "1". :) Plus, font is vector graphic, it must be scaled perfectly. I believe, this is bug.

–

"In general, the UI Text component's Best Fit setting should never be used." https://unity3d.com/learn/tutorials/topics/best-practices/optimizing-ui-controls?playlist=30089#best-fit

–

This worked for me. 1. Reformat the scale to (0,0,0) 2. Horizontal Wrap (because it was a paragraph of content. 3. Vertical overflow 4. Adjust the Font size to make it visible for my screen size 5. Best Fit (un-checked)

–

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

This works fine, finally! Tks!

–

Greyed out in Personal version of Unity.

–

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.

Can you send me link to UI/Default shader shader with changes(with added pixelSnap)? I'm don't like to edit shaders by my own hands as it's too hard for me on my level :) + I want to know about the risks. Will such changes make some problems or huge additional load on the machine?

–

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.

ok, but be careful using it. It's not the "physical correct way" to do it.

–

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: