How to make individual textlabels look cohesive

[BitLang]

I’ve been trying to separate textlabels into individual textlabels of one character (in order to create a gradient effect). However, a major issue arises when I start to place them - is there any automatic way to get the kerning right? For the time, I’ve been giving every single individual textlabel an equal length (the length of the original label divided by the amount of characters it holds), but this has caused some problems:

Clearly, the kerning is off, since all letters are not the same size. Is there a way to automatically access information about what size I should make the characters?

This is the code I’m using, if anyone is interested:

while wait() do
	local chat = game.Players.BitLang.PlayerGui.Chat.Frame.ChatChannelParentFrame.Frame_MessageLogDisplay.Scroller;
	for i,v in pairs(chat:GetChildren()) do
		if v.Name == "Frame" then
			if v.TextLabel:FindFirstChild("TextButton") then
				
				size = v.TextLabel.TextButton.Size;
				
				v.TextLabel.TextButton:Destroy();
				
				local folder = Instance.new("Folder");
				
				listLayout = Instance.new("UIListLayout");
				listLayout.Parent = folder;
				listLayout.FillDirection = Enum.FillDirection.Horizontal;
				
				folder.Parent = v.TextLabel;
				
				openBracket = Instance.new("TextLabel");
				openBracket.Name = "1";
				openBracket.Text = "[";
				openBracket.Parent = folder;
				openBracket.Size = UDim2.new(0, size.X.Offset/(string.len("BitLang")+3), 1, 0)
				openBracket.BorderSizePixel = 0;
				openBracket.BackgroundTransparency = 1;
				openBracket.Font = Enum.Font.SourceSansBold;
				openBracket.TextSize = 16;
				
				for i,v in pairs(string.split("BitLang", "")) do
					local textLabel = Instance.new("TextLabel");
					textLabel.Text = v;
					textLabel.Name = tostring(i+1);
					textLabel.Parent = folder;
					textLabel.Size = UDim2.new(0, size.X.Offset/(string.len("BitLang")+3), 1, 0)
					textLabel.BorderSizePixel = 0;
					textLabel.BackgroundTransparency = 1;
					textLabel.Font = Enum.Font.SourceSansBold;
					textLabel.TextSize = 16;
				end
				closeBracket = Instance.new("TextLabel");
				closeBracket.Name = "="..tostring(2+string.len("BitLang"));
				closeBracket.Text = "]";
				closeBracket.Parent = folder;
				closeBracket.Size = UDim2.new(0, size.X.Offset/(string.len("BitLang")+3), 1, 0)
				closeBracket.BorderSizePixel = 0;
				closeBracket.BackgroundTransparency = 1;
				closeBracket.Font = Enum.Font.SourceSansBold;
				closeBracket.TextSize = 16;
				
				colon = Instance.new("TextLabel");
				colon.Name = "_"..tostring(3+string.len("BitLang"));
				colon.Text = ":";
				colon.Parent = folder;
				colon.Size = UDim2.new(0, size.X.Offset/(string.len("BitLang")+3), 1, 0)
				colon.BorderSizePixel = 0;
				colon.BackgroundTransparency = 1;
				colon.Font = Enum.Font.SourceSansBold;
				colon.TextSize = 16;
			end
		end
	end
end

[Forummer]

in order to create a gradient effect

UIGradient | Documentation - Roblox Creator Hub

is there any automatic way to get the kerning right?

TextService | Documentation - Roblox Creator Hub

[McThor2]

Is it just the colour you want to vary? If so then you may be able to use a single text label with rich text enabled.

[BitLang]

Trying to make a gradient with outlines - using individual textlabels and manually creating a gradient works best for me, as UIGradient works across the whole UI.

Thanks, though - Instantly solved my problem.

[BitLang]

I’m creating a gradient, meaning colors fading into each other

[McThor2]

Okay yeah I think rich text can do that too. Here’s the link to the docs about it

[BitLang]

Isn’t rich text just regular text with markdown?

[BitLang]

Update to my previous comment - tried making every textlabel the width of the character with getTextSize, and there are still kerning issues:

Tried using the TextBounds property of the individual TextLabels as well, with no effect.
Yes, I am using the exact font, size, and size of the frame.

[Forummer]

Vector2.new() use this as the function’s fourth argument. You may need to use a different font.

[BitLang]

I was already using Vector2.new(100,100) as my fourth argument (the size doesn’t really matter, the text shouldn’t be wrapping), and switching to this didn’t make any changes (although it does make more sense, so I’ll keep it that way).

Changing the font in the argument for :getTextSize() doesn’t exactly seem to fix anything - and if anything, I’d like to avoid changing the actual font of the text considering that I’d like to keep it as close to the default chat as possible.

(same result - even when i set sci-fi as argument for :getTextSize()! I’ve tried a few other fonts as well.)

[Forummer]

By changing the font I meant the actual font of the text and subsequently the font passed to the GetTextSize().

What font are you currently using?

[BitLang]

Currently, I’m using SourceSansBold. Changing the font (both actual and passed to the function) results in this:

Certainly not the best result either.

[Forummer]

Have you tested with the other fonts of the ‘SourceSans’ family?
https://developer.roblox.com/en-us/api-reference/enum/Font

It’s the ‘i’ and ‘t’ in both cases causing an issue, perhaps you could hard-code something that handles offset characters, i.e; shift ‘n’ pixels left/right.

[BitLang]

With all other members of the ‘SourceSans’ family:

Minor, but noticeable issues in kerning with most of them - as you said, with the ‘i’ and the ‘t’. I’ll try to hard-code it in, it seems like some characters are getting shifted too far to the left or right. I’ll try that in a bit - for now, I’ll mark this as solved. Big thanks for all the help!

[McThor2]

Yeah pretty much. It has a few different tags to wrap around text. There is one for colour so you could wrap each letter with a different shade.

[BitLang]

Tried it, it gave me exactly what I was looking for - thanks. Marking this as the solution since this is the only one that worked