TextLabel blurry

[FractalVortex]

If you create a SurfaceGui on a small part, the text on the TextLabel becomes blurry. I’ve found several people on DevForum who have experienced the same issue and everyone always recommends they modify the SurfaceGui’s PixelsPerStud property. And although this fixes the issue when viewing the TextLabel from a short-range distance, it doesn’t fix the issue when viewing the TextLabel from a long-range distance.

PixelsPerStud: 50
Result: Blurry but readable from long-range

PixelsPerStud: 150
Result: Clear but impossible to read from long-range

(The timer is under the tv, between the two chalkboards)

Now I’ve also changed the PixelsPerStud to 100 which is in the middle of 50 and 150 but that just creates a combination of the two issues.

The TextLabel size is (1, 0, 1, 0); so it isn’t using offset.

How do I fix this?

[penn_dev (CrypticzNoir)]

Hello! I am penn_dev, User Interface Designer, including GUI and related. I see your problem, which is a lot common in most people, and problems which people stumble across while they are making their game.

Text Size:

At first glance, it is observable that the UI is too small, due to which it covers a small distance for the user to view it properly. You can try changing the size of the Parent, keep in mind that the size of the TextLabel should be proportional to that of it’s Parent. You can set TextScaled = true under the Text group, in the TextLabel. This will automatically set the size of the TextLabel directly equal to that of it’s parent. Meaning, that if the size of the Parent changes, the size of the TextLabel will automatically adapt to that of it’s Parent. I also observe, in the first picture, that there is a lot of light which is reflected from the TextLabel, so I would recommend you to fix the lighting as well, unless you want to keep it as is.

Alternative Solution:

Moreover, try using 3D Texts instead of SurfaceGUIs. As, Roblox tends to display SurfaceUIs as images, which lose their resolution depending upon the distance, and the size of the UI itself.

Visual:

• From 8 studs:

(Front View)

(Top View)

• From 108 studs: (Note that this is the number of studs, after which the ImageLabel and TextLabel becomes shattered/hard to see.)

(Top View)

(Front View):

Outcome:

Therefore, you can see the difference between the image(s), when the player was close to both the UIs equally, and then when the player moved. Hence, it is clearly seen that Roblox treats SurfaceUIs such as TextLabels, same as ImageLabels.

MaxDistance Property:

Inside the SurfaceGui, there is a property named MaxDistance, the function of this property is to control the distance, in the number of studs, at which a player will not be able to see the SurfaceUI anymore. Hence, as described in the studio itself:

Controls how far away the SurfaceGui can be displayed before it stops rendering.

Demonstration:

MaxDistance = 1000

Here, the MaxDistance is set to 1000. And, the player is 108 studs away from the UI. The minimum distance at which the UI starts to get blurred/poor quality.

MaxDistance = 10000

Here, the MaxDistance property has been set to 10 times more than before, at 10000. The player is 136 studs away from the UI, it is the minimum distance from which the UI starts to get a poor resolution.

(Front View)

(Top View)

If you have any questions, you may ask.

[FractalVortex]

Thank you so much for your detailed explanation, it was very helpful!