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?

 

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

 

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.

 

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?

 

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)

 

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.

 

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).

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

 

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

 

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.

 

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.

 

Do we need to vote at them then too?

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

EDIT: DX11 makes really a huge difference ...

 

Great, thanks. Good luck catching the baddie

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

 

Thanks

Here we go 628228

 

I agree small text is a big issue but the fix appears easy for DX11 projects not so much for DX9 projects. Simply change the rendering mode in the font import settings to Hinted Raster. You will get a desirable look for small pixel style fonts.

This only works on DX11 projects as enabling pixel perfect on the canvas for DX9 projects breaks pixel perfect for text by shifting them back into 1/2 pixel space.

View image at 100%

 

Hm, made things even worse here with Arial.

 

Arial is not a "pixellated" font. For smooth true-type/open-type fonts like that, I find Hinted Smooth works best. It's still not "crisp", but it's decent.

 

This is what Arial looks like on my build with DX 11 & DX 9 with pixel perfect enabled on the canvas.

DX11 looks perfect
DX9 looks sad

 

Interestingly in DX 11 the pixel perfect option seems to work reverse than with DX 9

 

Yup. It's been that way for a while. DX11 is doing some type of pixel offsetting that DX9 does not. I've noticed in my 3D Radar package that when using DX11 I would need to remove my method for 1/2 pixel correction that is required in DX9.

For this problem Unity needs to be aware of which rendering mode it's in Aka DX9 / DX11 and use different methods for pixel correction based on this selection.

 

Let's hope a developer reads this ^^

 

Let's hope someone submits a bug report...

 

Fingers crossed!

 

Working on a package to send as bug report now.

 

Thanks ForceX, so i don't need to file one

 

Bug report sent Case 628467.

If anyone wants to mess around with it this is the project sent to unity for bug squashing. To see the blurry font problem simply switch between DX9 & DX11.

 

Switching to DX11 fixes the issue for text and sprite blurring which is great. I noticed that blurring can still occur when GUI elements are not properly pixel aligned (ex: a Pos Y of -141.61 blurred the top and bottom edges of my sprite), but I think this is working as intended. The pixel perfect option on the canvas removes the blurring on non pixel aligned elements which is also good. I just wanted to mention this so others don't say DX11 still has blurring issues like I was about to.

 

I have the same problem in my Android project. And the only way to fix it is make width and height huge and scale the text down.
I do not like this "solution", so hope the problem will be fixed.

Is there a solution for button's text?
This text does not have "width" and "height" parameters and other workarounds do not work for me ("Pixel Perfect" option, DX11, pixel alignment etc.)

UPD: The latest update 4.6.1p1 fixed the problem for a button's text.
But for general text I should set scale to 0.5 and increase font size in order to have clear font.

 

So, I'm finally working with text on my gui, and I'm running into this same problem. I'm using DX9 right now, and the text is eye-gougingly blurry.

The "fix" people are suggesting doesn't really work. It makes some parts of the font thin and "crisp" I guess, but other parts look terrible still. It's not really a fix to me.

I'm using Unity 5.0 beta 14 though, so not the latest beta version if this had been updated in the latest beta version?

Text is just awful. And there's only one font to choose from that is default lol.

 

You have to load in TTF files to your project folder to get other fonts.

 

Currently struggling with this myself. It's especially annoying if you're attempting to do a pixel art game, where having crisp, sharp text is important for the aesthetic. Having blurry bits on the text ends up looking sloppy. After doing a bunch of research and fiddling around, I think (as others have mentioned earlier) that the only current "solution" is to scale down the rect transform scale and scale up the font size. I am hoping that Unity will address this issue at some point.

Edit: Looks like there are actually some plugins that deal getting pixel-perfect text. I'll have to check one of these out.. Not sure if all are compatible with 4.6 UI
https://www.assetstore.unity3d.com/en/#!/content/25561
https://www.assetstore.unity3d.com/en/#!/content/15320
https://www.assetstore.unity3d.com/en/#!/content/25561

 

Not sure if this is the same issue anyone else is having. I am using a bitmap font with a custom texture (.fnt and .mat) and things were horribly blurry.

Went to Edit ->Project Settings -> Quality and saw that texture quality was set to "Half Res". Switched it to Full Res and everything is crystal clear.

May not be the same issue, but might help someone.

 

I'm just curious if anyone has a work around for this text issue in a world space gui. My current project centers around a HUD for a piece of equipment. In world space GUI's I can't simply scale down the panel and scale up the text because the panel needs to fit in line with a 3d model to appear to be on the equipment screen. It's crazy annoying that the text is perfectly readable in the editor, but when running, completely unreadable. Additionally, this is a web and mobile project, so the DX11 solution doesn't do much for me. Suggestions?

 

This post affects people struggling with world canvas text quality.

I have been fooling around with text clarity in world space canvases quite a bit lately for my project, and I have deduced that due to the billboarding and scaling transforms that the text needs to go through, it will always appear blurry or 'rough' in some way. The best workaround that I can advise is to add ugui Text objects to a canvas overlay that follows units in world space. Using this technique, fonts are crisp and clear.

I understand though this might not be optimal for some projects because this means the text isn't parented to the actual game objects and are not positioned in world space. If quality is a concern, I hope this method helps.

Edit:
This technique needs to have a Canvas(Screen Space-Camera) with Render Camera set to the camera that is displaying your text. Then use this code to adjust the position of a child text element.

Vector2 v=Camera.main.WorldToScreenPoint(target.transform.position);
v=new Vector2(v.x-Screen.width/2, v.y-Screen.height/2);
textobj.getComponent<RectTransform>.anchoredPosition=v;

also, if you are programmatically adding text elements to your canvas, remember to set flag (worldpositionstays) to false - setParent(transform, false) to ensure that unity does not change the position/rotation/scaling of the prefab, which will screw up your text position. If you are unsure, make a test text first, and make sure the instantiated text objects have proper scaling and rotation similar to your test object.

 

I'm struggling with this exact same issue.

I set a border of 1px on a 9-sliced sprite that had a 1px border and a transparent fill. When the sprite is scaled in the canvas, the borders become blurry...
Also having the problem with text being blurry unless it is set to Hinted Raster, which doesn't work well with some fonts.

Are you suggesting that I disable AA in my game in order to get the fonts to show clearly, or can I disable AA just for fonts somehow? (I have DX11 enabled)

 

I was just showing the differences with various AA/Pixel alignment settings. The problem no longer affects me in the most recent Unity version (DX9 and 11 both work with AA enabled). Are you using the latest version of Unity?

 

I've found that Hinted Smooth works well, but Smooth setting is absolutely terrible.

 

Very easy way to do this, in the Canvas Scaler up the Dynamic Pixels Per Unit

 

UI hasn't received fixes and improvements for quite some updates, I'm beginning to worry

 

I'm working on a pixel art game and GUI font problem gives me a lot of headache. Needless to say, the fonts displayed on overalay canvas are not pixel perfect despite such setting turned on. Or rather they are pixel perfect for some combinations of font size and canvas scaling.

I have a set of test fonts and here are the results of my test for 1280x720 resolution (with canvas scale set to 2.0 to match the scale of my background art):





Only sizes 4, 8, 16 and 32 are usable, other sizes are blurry.

There's a bigger problem when I switch to popular 1366x768 resolution (still with scale set to 2.0 to match the background):





Most of the sizes become blurry. But there's a fix for that - the canvas scale needs be set to 2.009 and everything becomes somewhat consistent with previous samples:





This may help others who struggle with the problem.