Consistent Font Alignment for UI Elements

Introduction

Fonts are essential typographic elements that help express identity and style in user interfaces. On Roblox, we build UIs based on predefined styles, and with the advancement of technologies, we’ve gained access to over 10 fonts, many of which are available on the Google Fonts website. Additionally, Roblox introduced its font for advertisements called “Builder Sans.” However, there is an issue that undermines these positive developments.

In November 2022, a bug report highlighted a problem with the font “Josefin Sans,” where letters were not centered within the frame when used, causing misalignment. This issue was acknowledged by other developers but remained unresolved until 2024 when a Roblox employee confirmed that the problem lies within the font files and not Roblox itself. The suggested workaround involves using UI instances like UIPadding or adjusting the TextLabel position:

Problem

As a Roblox developer, it is currently too hard to accept that there are no plans to fix this issue, and we must rely on workarounds. These workarounds are not always viable solutions, and not all developers are familiar with handling other UI instances. Furthermore, if Roblox Corporation’s fonts adhere to alignment standards, it is only fair that all other fonts should follow the same guidelines.

Solution

The solution is straightforward: fix the font files to ensure consistent positioning when developing UI elements. Popular fonts distributed by Google Fonts maintain precise positioning and alignment, which should be the standard for all fonts used in Roblox.


If Roblox is able to address this issue, it would improve not only my development experience but also that of many other developers. We would no longer need to rely on inefficient workarounds, leading to more productive and higher-quality features in our projects. Ensuring font consistency would greatly enhance the overall development process on Roblox.

11 Likes