Fix Blurry UI text?

When I was building this UI, I didn’t realize that resizing by pressing T and dragging the windows, I would totally screw up the resolution of any image I was resizing, and only later did I realize I should have been using the scale instead to preserve the resolution. That said, now I have a nearing completion UI that’s starting to look bad, but my problem is that this UI is for a crafting menu. That said, because of the simplicity of the inventory system, I made the text contained in the UI and actual UI is a game mechanic just for ease of construction (i.e. if a light turns on as a result of the item existing in your inventory, then the condition for the craft button OnClick function is met and you can craft it). So I really don’t want to destroy the UI and start over from scratch overlaying all the images and such, because that would mean a lot of backtracking on the game mechanics themselves as well. Is there some way I can set the UI elements all back to their respective default resolutions without getting rid of them, resizing them using the scale tool this time instead of changing the aspect ratio (i think that’s what it is I was using?) to avoid destroying it and starting back from the beginning? Here’s a screen shot to show the resolution deterioration I’m referring to as I created more panels on top of panels. This isn’t the whole UI, but the other screenshot exceeded the limit, but there is another behind this one also. The text in the bottom left of this was created second (after the panel that’s behind this one) and then the text on the right in that selection box was created third, and even between these it’s pretty easy to see and by the time I got to the text in that menu on the right, It became near illegible. Thanks in advance for any help you guys might have

The best way I’ve found is to:

  1. Increase font size massively (size 150 or something).

  2. Set both horizontal and vertical overflow to ‘overflow’ in the inspector for the text box.

  3. Scale the textbox down using the scaler tool.

The text should now be sharper.

In the canvas (Canvas Scaler component), set the “Dynamic Pixels Per Unit” value to something higher.

I had post few solutions for this problem here:

My solution:

  1. Wrap TextField by empty GameObject,
  2. Make TextField stretch all with zero borders,
  3. Attach to text field TextSharpener.cs
  4. Change scale of text field to 0.5 , resolution of text now twice better
    drawback: control position of textfield now only through parent wrapper

TextSharpener.cs

[ExecuteInEditMode]
public class TextSharpener : MonoBehaviour
{
    void rtValidate()
    {
        RectTransform rt = GetComponent<RectTransform>();
        Rect parent_rect = ((RectTransform)rt.parent).rect;
        rt.sizeDelta = new Vector2(parent_rect.width / rt.localScale.x - parent_rect.width, parent_rect.height / rt.localScale.y - parent_rect.height);
    }
  
#if UNITY_EDITOR
    void OnValidate()
    {
        rtValidate();
    }
#endif
    void OnRectTransformDimensionsChange()
    {
        rtValidate();
    }
}

PC build

Here’s a video how to do it in 1 min

mobile build:

Make it best fit and max 300 and It will work fine on mobile however it might look blury on Unity.

Enabling Pixel Perfect in the UI Canvas was the solution to my blurry text issue.

In my case,

The scale of my text’s container object was not (1,1,1) but somehow shifted to ( 6.473743 , 1 , 1 ) while I was positioning and scaling it manually.

When I corrected the scale to (1,1,1) and adjusted width & height again; problem is solved.

I know that this is a good few years old, but it comes up first in the Google search, so…

For me, the issue was that I was using the scale tool (shortcut: ‘r’) on the textbox. This leaves you with a weird, artificially-magnified textbox. Instead, to get the textbox the size you want, use the shortcut ‘t’ tool (dunno what its official name is) to drag out the sides etc., and then from there you can set the font size to whatever you need and everything will behave okay.

So, basically: don’t use the scale tool thing on textboxes because it doesn’t really make it bigger, it just kind of blows it up.,I know that this is a few years old, but it comes up first in the Google search, so…

For me, the issue was that I was using the scale tool (shortcut: ‘r’) on the textbox. This leaves you with a weird, artificially-magnified textbox. Instead, to get the textbox the size you want, use the shortcut ‘t’ tool (dunno what its official name is) to drag out the sides etc., and then from there you can set the font size to whatever you need and everything will behave okay.

So, basically: don’t use the scale tool thing on textboxes because it doesn’t really make it bigger, it just kind of blows it up.

I watched a couple of unnecessary YT videos and read through hacky fixes. In the end the answer was simple. Put scale to (1,1,1) and increase font size.

Sorry for Up but in Unity 2021.1.9f1, we have a simple solution now ! TextMeshPro makes good looking text and it’s now free:

  • Remove your normal text and make a TMP Pro text

  • Import your font in TMP :

  • Open the Font Asset creator : /Window/TMP/Font Asset Creator

  • Select your font in “Source Font File”

  • Generate Font Alias

  • Save your Font

You can now use it and have a clean text with custom font !

For anyone who still has problem with this. This video solved everything for me!

Try this: