Introducing Text Scaling Setting [Studio Beta]

What’s up developers :sunglasses:

We are BACK with a new setting for the Roblox app, Preferred Text Size, available now as a Studio Beta. Eventually, this setting will be added to both the in-experience menu settings and app settings – though while this is in beta, it is only available in-experience.

Overview of Changes

Under the hood, PreferredTextSize is used to scale text at the rendering level. The text sizes used as text is rendered will adjust according to a user’s PreferredTextSize setting. The scale is currently applied as a fixed offset, so text that is larger by default will scale less relative to smaller text.

As this occurs in the rendering process, essentially ALL text across the Roblox platform is affected. With that being said, there are a couple of properties that take precedence over PreferredTextSize:

  • TextScaled
    • Text for which TextScaled is set to true will not be affected by the setting
  • UITextSizeConstraint
    • Text with a UITextSizeConstraint will not scale above the set MaxTextSize

There is a new property available for developers that provides you with the user’s preference for text size, as well as events for when they change.

GuiService | Preferred Text Size

Here are some examples of how the Roblox App’s UI adapts to these settings.

Note: PreferredTextSize is referred to as Text Size in the app, for a better user experience.

Since this scaling happens automatically, some of your UI may be affected, and we are launching this Studio Beta to give you all time to audit your experiences UI and update as necessary. Remember, the only time text size will change is when a user has explicitly set their preference to something other than the default.

How to Use

Usage of PreferredTextSize and updating your UI to handle larger text should be fairly straightforward! The values are read directly from GuiService and their changed events are retrieved by using GetPropertyChangedSignal.

We followed some common patterns in handling PreferredTextSize changes inside the app and would like to share them with you for inspiration :sparkles:

local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(0, 0, 0, 0)
textLabel.Position = UDim2.new(0.5, 0, 0.5, 0)
textLabel.AnchorPoint = Vector2.new(0.5, 0.5)
textLabel.AutomaticSize = Enum.AutomaticSize.XY
textLabel.TextSize = 25
textLabel.Text = "Automatically Sized Text Label"
textLabel.Parent = script.Parent

local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(0, 500, 0, 0)
textLabel.Position = UDim2.new(0.5, 0, 0.5, 0)
textLabel.AnchorPoint = Vector2.new(0.5, 0.5)
textLabel.AutomaticSize = Enum.AutomaticSize.Y
textLabel.TextSize = 25
textLabel.Text = "Here, our TextLabel only automatically sizes on the Y axis. Our text label has TextWrapped set to true to ensure it wraps when it is too long to fit within the bounds of its width"
textLabel.TextWrapped = true
textLabel.Parent = script.Parent

local frame = Instance.new("Frame")
frame.AnchorPoint = Vector2.new(0.5, 0.5)
frame.Position = UDim2.new(0.5, 0, 0.5, 0)
frame.BackgroundColor3 = Color3.new(.5, .5, .8)
frame.BackgroundTransparency = 0.5
frame.Size = UDim2.new(0, 750, 0, 0)
frame.AutomaticSize = Enum.AutomaticSize.Y
frame.Parent = script.Parent

local layout = Instance.new("UIListLayout")
layout.Wraps = true
layout.FillDirection = Enum.FillDirection.Horizontal
layout.Padding = UDim.new(0, 12)
layout.VerticalAlignment = Enum.VerticalAlignment.Top
layout.HorizontalAlignment = Enum.HorizontalAlignment.Center
layout.Parent = frame

for i = 1, 25, 1 do
      local textLabel = Instance.new("TextLabel")
      textLabel.Size = UDim2.new(0, 75, 0, 75)
      textLabel.AutomaticSize = Enum.AutomaticSize.XY
      textLabel.TextSize = 10
      textLabel.Text = "Layout Item"
      textLabel.Parent = frame
end
  • Access the PreferredTextSize value directly
    • As the GuiService property is an Enum, it does not disclose the exact amount added to default font size to achieve the scaled result. We are working on adding an API that will provide this value. In the meantime, developers can use the following workaround:

local GuiService = game:GetService("GuiService")
local TextService = game:GetService("TextService")
local fontSize = 25
local padding = 8
local textLabel = Instance.new("TextLabel")
textLabel.Position = UDim2.new(0.5, 0, 0.5, 0)
textLabel.AnchorPoint = Vector2.new(0.5, 0.5)
textLabel.AutomaticSize = Enum.AutomaticSize.X
textLabel.TextSize = fontSize + padding
textLabel.Text = "GetTextSize Text Label"
textLabel.Parent = script.Parent

local setAddedTextHeight = function()
      local finalTextHeight = TextService:GetTextSize("", fontSize, Enum.Font.BuilderSans, Vector2.new(math.huge, math.huge)).Y
      local addedTextHeight = finalTextHeight - fontSize
      print("Preferred Text Size Adds " .. addedTextHeight .. " to Default Text Size")
      textLabel.Size = UDim2.new(0, 0, 0, fontSize + addedTextHeight + padding)
end

setAddedTextHeight()
GuiService:GetPropertyChangedSignal("PreferredTextSize"):Connect(setAddedTextHeight)
  • If you want your UI text elements to be exempt from any scaling, simply give it a UITextSizeConstraint or use TextScaled. But remember - users who are setting a preference for a larger text size might have trouble reading text that is too small, so consider adjusting your UI to adapt to larger text sizes.

-- TextScaled
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(0, 500, 0, 350)
textLabel.Position = UDim2.new(0.5, -275, 0.5, 0)
textLabel.AnchorPoint = Vector2.new(0.5, 0.5)
textLabel.TextSize = 25
textLabel.TextScaled = true
textLabel.Text = "TextScaled Text Label"
textLabel.Parent = script.Parent

-- UITextSizeConstraint
local textLabel2 = Instance.new("TextLabel")
textLabel2.Parent = script.Parent
textLabel2.Size = UDim2.new(0, 500, 0, 350)
textLabel2.Position = UDim2.new(0.5, 275, 0.5, 0)
textLabel2.AnchorPoint = Vector2.new(0.5, 0.5)
textLabel2.TextSize = 25
textLabel2.Text = "UITextSizeConstraint Text Label"

local UITextSizeConstraint = Instance.new("UITextSizeConstraint")
UITextSizeConstraint.Parent = textLabel2
UITextSizeConstraint.MaxTextSize = fontSize
  • The recently released Flex layout is great for allowing elements to grow, shrink, and wrap based on their contents :muscle:

Next Steps

This feature is available in beta and ready for experiment in Studio now :tada: Use the in-game menu during a play test to try out your UI at different text sizes.

You might notice that some UI in Studio is affected by the change in setting - while we are working to split this out into two distinct settings (one that controls studio UI and one that controls in-experience UI), you can get a preview of how Roblox Studio and other plugin UI is affected by the settings. Certain, modern UI (looking at you, Studio NextGen!) works really well with this setting, and other pages will need some attention before this is ready to launch in Studio :grinning:

Please leave any requests and feedback in the comments below. If you end up implementing support for these features, consider sharing with us! What other accessibility settings would you like to see in the future?

With that, and a big thank you to @WhyyyyyyyIt for his hard work on this project this summer, we are looking forward to being more accessible with you all :smiling_face_with_three_hearts:

126 Likes

This topic was automatically opened after 10 minutes.

This is a very interesting change – my knee-jerk reaction would be that this would break most of our game’s existing UI.

Currently, we heavily use UIScale and AutomaticSize in our UI workflow; however, as per my various, different, bug reports, it unfortunately has broken a lot of our text UI.
To remedy this, we’re forced to manually calculate the text bounds with TextService – which is not ideal, since it wouldn’t mesh well with this setting!

it’ll require significantly more effort on our end to support this change, which is a bummer since we’re focusing our utmost on releasing our game. Having this change mess with our UI would be a huge issue, and so we’d appreciate it if the aforementioned bugs could be fixed first before moving on with the studio beta :sweat_smile:

If the UIScale bugs were to be addressed, it would be a lot easier for us to use AutomaticSize instead of calculating the text bounds manually everywhere, and thus support this change more easily!

44 Likes

:joy: what a weird comment… Yes the whole point is for people with visual difficulty or anyone who likes big text. It’s not like you are forced to use it.

24 Likes

You’re right, but it breaks my game’s GUI, and most players will have it set to default.

3 Likes

What are they gonna do next, add an option to change the CoreGUI UICorner Radius?

(Metro UI confirmed?)

8 Likes

What about for games that scale UI with UIScales? Labels will often not use TextScaled in this case, and if you are unable to make your UI work well with different text sizes (or just do not want to spend a long time doing it), you’ll need to add text size constraints to every part of your game to disable this scaling. Might be a lot easier if using components with a library like React or Fusion, but if not, then it’ll take a while…

I guess the user could just change their preference for the specific game, but I don’t think that’s really the best user experience–they’d expect the game to just work.

3 Likes

It says that it won’t do anything unless the player explicitly sets it to something other than default

4 Likes

Yeah, I mean for users who changed it.

3 Likes

its a good feature but it would be good to make the game able to set it to specific value or stop it like how we can stop shiftlock or change the camera type/movement type

8 Likes

I spoke out against this when it was first broached to developers because it was a comically bad idea then, and I’m speaking out against this now because it’s a comically bad idea now.

I don’t know how many thousands of times I need to scream this before Roblox Corp gets the message, but here we go yet again:

HANDS. OFF. MY. CONTENT.
HANDS. OFF. MY. GAMES.

Do not touch them unless I explicitly want you to! When I click “PUBLISH” I fully expect my players to see EXACTLY what I published. Accessibility options are fine, but ONLY when they are unobtrusive, ONLY when they do not break my stuff.

THIS breaks my stuff.

My dialog UI scales its text such that the text box can accommodate 4 lines of text, and my dialogs are written with this amount of space in mind. This app level setting breaks the promise I have with my text box since text is now far larger than it’s expecting it to be.

This is unacceptable.


CC @BitwiseAndrea

45 Likes

Previous posts deleted because of off-topic and memes but now I’ll write better so they can’t take it down:

This breaks every text inside my game. If I make a game, I want it exactly as I made it, like

said, and, well, good for all the people with a vision difficulty, but bad if it could affect other players. No thoughts on this update.

6 Likes

I feel like it would make more sense to just have this as a readable property, not automatic. Other accessibility settings like preferred transparency and reduced motion already work like that.

Not being able to disable this for specific UIs also kinda sucks.

8 Likes

I don’t personally need to use this, but it’s nice to see additions like this for players with disabilities

2 Likes

would be cool if you guys have added a percentage for resize amount (slider going from 25% to 200% maybe), would combine very well with sdf rendering

2 Likes

Seems like a cool update but couldn’t it break UI in some games?

2 Likes

let us disable this in studio, this wont be any where useful beside for grandmas

13 Likes

I’ll be honest: This update may be good for those who have vision issues, but there’s a possibility that some games may work not as expected and break game mechanics. I suggest to give creators the ability to completely disable this feature in place settings or just set maximum and minimum size.

9 Likes

This is a fantastic feature, great for the people with vision issues!

One minor complaint (insert that one buzz lightyear gif here) though: This will probably make text scaling for GUI a pain, having the option to disable it entirely would be nice, I’ll try my best to support this feature as much as possible though!

3 Likes

So I have to completely rewrite my UI scaling system because of this one feature? I just got my system to work the way I wanted it to and now this is happening?

4 Likes