How to make an AutoScaling text across multiple resolutions

Resources Community Tutorials
, ,
#1

I know there’s been a lot of posts asking how to scale text on multiple devices - and I’ve made my own way to do it, hopefully it can help someone out.

It’s not perfect and there are better ways to do it, I’d appreciate any sort of feedback to improve the code or other ways to do it!

Let’s start.

  1. Determine what you will be AutoScaling

image

I’ve chose to AutoScale my “ItemDescReal” across multiple devices.

  1. Create the UI and scale it to your liking!

image

  1. Check the AbsoluteSize of the TextLabel

image
Remember those two values.

  1. Check the TextSize of the TextLabel

image

  1. Make a new LocalScript and put it as a child (or anywhere else) of the object.

Code:

-- Function to adjust text size based on the AbsoluteSize of the UI element
local function adjustTextSize(textLabel)
	-- Get the AbsoluteSize of the TextLabel (X and Y)
	local absSizeX, absSizeY = textLabel.AbsoluteSize.X, textLabel.AbsoluteSize.Y

	-- Define reference sizes (as per your example)
	local referenceWidth = 645
	local referenceHeight = 652
	local referenceTextSize = 40  -- The text size when the size is at the reference values

	-- Calculate scale factor based on the current width and height relative to the reference size
	local scaleFactor = math.min(absSizeX / referenceWidth, absSizeY / referenceHeight)

	-- Calculate the new TextSize by scaling the reference text size with the scale factor
	local newTextSize = referenceTextSize * scaleFactor

	-- Set the new TextSize to the TextLabel
	textLabel.TextSize = newTextSize
end

-- Example: Adjusting text size dynamically on a TextLabel (You can change this to any other UI element)
local textLabel = script.Parent -- Assuming the script is a child of the TextLabel

Create a new method. We will use math to determine the perfect size on all devices. As you can see we will use the numbers I’ve asked you to remember earlier.

We need to connect the function to GetPropertyChangedSignal in order for it to dynamically scale whenever the resolution changes. Do not use RenderStepped or any frame based functions as it is not needed to run every frame and will result in memory leaks, even if it’s a tiny bit, this is the better option to prevent it.

-- Function to connect to the PropertyChangedSignal to detect when AbsoluteSize changes
textLabel:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
	adjustTextSize(textLabel)
end)

Instead of using the UITextSizeConstraint we can do the following to clamp the values of min and max TextSize values:

-- Optionally clamp the new TextSize to ensure it doesn't go below or above reasonable limits
newTextSize = math.clamp(newTextSize, 13, 40)

And we will initially call the function once the script starts.

-- Initial adjustment when the script starts
adjustTextSize(textLabel)

Full script:

-- Function to adjust text size based on the AbsoluteSize of the UI element
local function adjustTextSize(textLabel)
	-- Get the AbsoluteSize of the TextLabel (X and Y)
	local absSizeX, absSizeY = textLabel.AbsoluteSize.X, textLabel.AbsoluteSize.Y

	-- Define reference sizes (as per your example)
	local referenceWidth = 645
	local referenceHeight = 652
	local referenceTextSize = 40  -- The text size when the size is at the reference values

	-- Calculate scale factor based on the current width and height relative to the reference size
	local scaleFactor = math.min(absSizeX / referenceWidth, absSizeY / referenceHeight)

	-- Calculate the new TextSize by scaling the reference text size with the scale factor
	local newTextSize = referenceTextSize * scaleFactor

	-- Optionally clamp the new TextSize to ensure it doesn't go below or above reasonable limits
	newTextSize = math.clamp(newTextSize, 13, 40)

	-- Set the new TextSize to the TextLabel
	textLabel.TextSize = newTextSize
end

-- Example: Adjusting text size dynamically on a TextLabel (You can change this to any other UI element)
local textLabel = script.Parent -- Assuming the script is a child of the TextLabel

-- Function to connect to the PropertyChangedSignal to detect when AbsoluteSize changes
textLabel:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
	adjustTextSize(textLabel)
end)

-- Initial adjustment when the script starts
adjustTextSize(textLabel)

Thank you for reading!

Video preview:

5 Likes
#2

You can use AbsoluteSize to dynamically adjust the TextSize based on the UI element’s dimensions. Instead of relying on frame-based updates like RenderStepped, it’s more efficient to use GetPropertyChangedSignal("AbsoluteSize") to detect when the UI changes and update accordingly. By defining reference sizes and scaling factors, you can ensure a consistent appearance across different devices while clamping values to maintain readability. Additionally, implementing a UITextSizeConstraint can provide extra control over min/max text scaling, preventing extreme variations. This approach optimizes performance and ensures clean, adaptable UI scaling without unnecessary overhead.

4 Likes