Sharpenning text

I think everyone knows the issue with unity where the text isn’t sharp enough and looks blurry, usually to fix that you would grow the font size and then reduce the scale of the object, or vice versa (I think it also worked), but I can’t figure out how to do that correctly with the new UI, any tips?

1 Like

Same problem here. Tried different fonts, some working better than others, but all of them are quite blurry.

1 Like

Same here… I’ve also experienced problems with text turning into garbage if I switch from normal to bold, for example.
There have been problems with textrendering for a long time, and I think Unity needs to rewrite the current system.
Of course there are other solutions as well, TextMeshPro looks good for example (it uses distance-field fonts).

But overall, some tlc for better textrendering across devices and resolutions would be very appreciated.

Check the box “Pixel Perfect” on the Canvas. This should reposition your objects slightly to prevent half pixel positions.

If that doesn’t help, open the example project and create a text object with the same settings as the one in your project (font, size, etc.).
If it’s sharp there but not in your real project, there’s probably something wrong in your project settings (don’t know what exactly).
I ended up replacing the project settings folder with one from a new empty project. (Don’t forget to make a complete backup first!)
If it’s sharp now you can copy back your backup one by one to find the responsible file.

6 Likes

All the text I’ve tried has been super smooth and crisp. You guys aren’t resizing your text objects using the Scale widget, are you?

4 Likes

I found out how to make it sharp! (I didn’t even know there wasn’t a example project), anyway, for anyone that needs this, make widht and height huge, it doesn’t change the text size but it changes the canvas, then make font size about 100 and finally change the scale on the x and y to something like 0.1 (I wanted a small text so I used that size, adjust as you wish)

19 Likes

Presumably the solution mentioned here (which I’ve been using) uses a high resolution version of the text atlas then scales it down to create ‘sharpness.’ This seems kind of inefficient (scaling down the scaled up version). It would be nice to have a component or option on the text control that guaranteed it was pixel perfect for a fixed resolution, no matter how the parent canvas is scaled.

The solution is simply to almost never use the ‘scale’ in RectTransforms; basically only use it in, e.g., zoom effects, transitions, etc. What you suggest - pixel perfect regardless of parent scales - is not a sensible solution, performance-wise. If you have a transition where your UI zooms in, then every Text object on the UI would have to re-render its text glyph atlas every frame as the UI scales up. It’s just not a good way to do it.

Just don’t scale things. Use the rect parts of the rect transform instead, and your UI can remain pixel perfect.

Isn’t scale necessary to work with UI elements that should appear to have the same normalized size regardless of resolution? The ReferenceResolution component scales the whole canvas and the tutorials do it. It would just be nice if you could have text inside that canvas that is not affected by scale, but is still affected by translation, activation in the hierarchy, etc. So as the text’s parent scales up, more text can fit inside its expanding rect.

Using the “stretch” anchor mode to accomplish a similar effect isn’t always a solution for UI elements that need to be constrained to their parents. For example, if I have a tall vertical sprite with a smaller sprite inside it, when the aspect ratio of my resolution changes, the UI elements “stretch” in a way that causes their rect boundaries to change at different rates.

I didn’t scale anything, all scale sliders are at 1.0. Nevertheless, if you try to render a font in a small UI at, say, 10px, it looks extremely blurry, even if you use a TrueType Font that is specialized for small font sizes. No stretching involved.

In my experience so far, activating “pixel perfect” tends to make things far worse, instead of better.

1 Like

If you can raise a bug where text isn’t behaving as you would expect we would be happy to look into it. We are not aware of any issue when things are configured properly.

This is indeed an issue, the default font is too blurry. I have to set all my medium-sized font scale to 0.7 because of this (and up its size to around 20). :frowning:

With the old GUI the text used to look like the one to the left on the example attached.

1745957--110297--4.6 font comparison.png

1 Like

I second this. Setting the size to 0.7 and scale the text up gives a much sharper look.

1746002--110300--sharplook.jpg

2 Likes

You can get crisp fonts in the new uGUI by going to:
Project settings → Player → Settings for PC, Mac, Linux → Other Settings
and enabling Direct3D 11. New projects have this option enabled by default.

Now the question is why this option is even required. Other target platforms don’t have this setting available, so for now it forces us to use either the old guitext, or the scaling trick to have nice and sharp fonts, unless there’s some other way.

1 Like

Just curious, is it necessary to file a bug report into the tracker? If so, did somebody already file a bug report about this issue?

This problem also seems to affect non-text GUI elements. I tried making a sliced sprite with multiple different settings. Here are the results:
Pixel perfect, 8 AA - The border of the sliced sprite and the text are both very blurry
Pixel perfect disabled, 8 AA - The border and text both look sharper, but with closer inspection you can see the border edges on the top and bottom do not have a perfect 1 pixel outline with the same color
Pixel perfect, 0 AA - The top border of the sliced sprite is 2 pixels wide instead of 1 and the bottom of the border does not show up. Also the text is blurry.
Pixel perfect disabled, 0 AA - This seems to be the best case since the text looks sharp and the border is 1 pixel around each edge as it should be. It should be noted though that sometimes when I move the sliced sprite around, the edges are no longer a perfect one pixel wide border.

In general, results seem to be better with pixel perfect disabled. I think these blurring issues were also present in NGUI. It would be great if it was fixed.

1 Like

Please raise bugs.

Do we need to vote at them then too? :slight_smile:

Ah the times when developers cared for bugs without all this bureaucracy …

EDIT: DX11 makes really a huge difference …

1746214--110314--dx11test.jpg

All the UI bugs are getting looked at my myself and the rest of the UI team. Stuff like this is why we are doing a beta so that we catch everything before we do a full release :slight_smile:

Great, thanks. Good luck catching the baddie :slight_smile:

Just curious, should we attach the case number to the threads, or are you able to find them in the tracker ?