Scaling fonts & text seems to be highly inconsistent?

[LegendarySoldier]

Okay, so recently I've been working on a project for a server I develop for and I've come to notice an issue with UI scaling or more specifically scaling the position of text. The issue is minute and could most likely be missed entirely by most people but it's been bugging me as it ruins the design of the UI on quite a few resolutions. When decreasing the resolution from 1920x1080(1080p) the center point of my text seems to change. Regardless of the method I am using for scaling the text and alignment options it continues to offshoot up, down, left and right depending on the resolution.
I've been unable to resolve the issue and I'm wondering if this is simply a bug or if there's an actual solution other than correcting the offset for each resolution.
An example of my issue can be seen bellow.
// Function for drawing the images shown below.
// Scale screen is ScreenScale(input/3) as that scales assuming the default values are correct for 1080p

surface.SetMaterial(rounded_square)
surface.SetDrawColor(255,255,255,255)
surface.DrawTexturedRect(ScrW()/2, ScrH()/2, ScaleScreen(32), ScaleScreen(32))

draw.SimpleText("6","Custom_Font_1", ScrW()/2, ScrH()/2, Color(255,255,255,255), TEXT_ALIGN_CENTER, TEXT_ALIGN_CENTER)
1920x1080

https://i.gyazo.com/9d1d55351e49df9f82fbae7216484a89.png

640x480, this image is unclear but it if you look close you'll see that the six is now resting on the bottom of the square.

https://i.gyazo.com/4de78a9b7d61fa0b99bb207d2baca8c8.png

[Deathking15]

Do you have an example where the "bug" is seen in a, for lack of a better word, practical environment?
I'm having trouble wrapping my head around what the problem could be, when I don't even understand what it is I'm looking at in the second picture.
Like... is the problem that the center of the number is not aligning with the center of the square?

[LegendarySoldier]

The second picture is the exact same as the first only at a much lower resolution. It's difficult to make out but character isn't quite scaling properly. The white outline also looks grey due to how small it is but it's the same image being drawn.

[Deathking15]

I won't lie, I don't know why either are showing up the way they are. The 4 arguments for DrawTexturedRect are start-x-coord, start-y-coord, x length, y length.

You have the start coordinates for your rectangle the same coordinates as the center of your text, ScrW/2 and ScrH/2. Seems to me like it shouldn't work to begin with, but I don't have any experience with ScreenScale() so maybe that's just me being ignorant.

Have you tried it with a different font?

[zamboni]

Scale your fonts based on monitor height, always.
local nativeHeight = 1080

function ScaleHeight(input)
return (input / nativeHeight) * ScrH()
end
Make your font size with ScaleHeight.
Since the box surrounding your number is a square, and both sides should be equal, set the size of your square to be equal to your font size.

[LegendarySoldier]

I just noticed that I copied the wrong line of code, the actual one I ran was centering it all correctly. Been busy for a few days so I just got time to check the thread now.
Will try and report back.

[zamboni]

Post your code again, then

[LegendarySoldier]

Okay currently I am running this and it still results in the same issue.
surface.SetFont("Futura_22_400")
surface.SetDrawColor(255,255,255,255)
local w, h = surface.GetTextSize("1")
surface.DrawRect(ScrW()/2-w/2, ScrH()/2-h/2, w, h)
draw.SimpleText("1","Futura_22_400", ScrW()/2, ScrH()/2, Color(255,0,0,255), TEXT_ALIGN_CENTER, TEXT_ALIGN_CENTER)

Once again the 640x480 is a nightmare to look at but it showcases the issue pretty clearly.
640x480

https://i.gyazo.com/71937d338f9e1cfc9d5ad928ee0f16f8.png

1280x720

https://i.gyazo.com/c7a6908db42b66f1adedfeb6f5e27303.png

1920x1080

https://i.gyazo.com/5f0bfaad39eb9a1d4d13c9cf656d0ce3.png

[zamboni]

And what about your font creation?

[LegendarySoldier]

local function ScaleScreen(num)
return ScreenScale(num / 3)
end

local function ScaleFontHeight(_in)
return(_in / 1080) * ScrH()
end 

local function CreateHUDFont(size, weight)
local name = string.format("Futura_%s_%s", size, weight)
surface.CreateFont(name,{ font = "Futura Md BT", size =  ScaleScreen(size), weight = ScaleScreen(weight), shadow = false, antialias = true })
end
Issue persists regardless of scaling function

[zamboni]

now I find that somewhat hard to believe, especially because your ScaleScreen function simply divides the number by 3. There is no resolution-dependent scaling being done there. In your images, I can clearly see the number is too big for the box and it's being cut off.
If this changing font size does not fix the issue, then it must be something else, and I've no ideas for that.

[LegendarySoldier]

The scalescreen function is divided by three in order to make sure I can provide default 1080p numbers to the function.

-- This is what the ScreenScale function would look like in lua.

function ScreenScale(num)
return ScrW()/640*num
end

-- And this is the ScaleScreen function.

function ScaleScreen(num)
return ScreenScale(num/3)
end

[_Fancy_]

I figured it's probably something to do with the decimal points and font unfriendly numbers that you're inputting.
Try using this function on the screenscale when creating the font:
function RoundToDiv2(num)
    local round = math.Round(num)
    if round % 2 ~= 0 then return round + 1 end
    return round
end

-- example RoundToDiv2(ScreenScale(10))
I tested the above with this block of code that you provided and it seems to have fixed it.
surface.SetFont("Futura_22_400")
surface.SetDrawColor(255,255,255,255)
local w, h = surface.GetTextSize("1")
surface.DrawRect(ScrW()/2-w/2, ScrH()/2-h/2, w, h)
draw.SimpleText("1","Futura_22_400", ScrW()/2, ScrH()/2, Color(255,0,0,255), TEXT_ALIGN_CENTER, TEXT_ALIGN_CENTER)