Figma Support Forum

Fonts looking

Why fonts looks so horrible at Figma? Look at screenshot, left side is Figma, right is Adobe XD. Last looking is perfect. What’s problem with left? Font Arial (Regular) 18px, 100% scale of viewport, text color #000, back color: #fff. I have this bug with any fonts.

Any manipulation with “Property->Compatibility->Change height DLP settings” and “ClearType” doesn’t help.

*Windows 10, Figma Desktop or Web (it’s look same).

  1. Figma uses a custom font rendering engine because it needs to ensure that fonts render the same for all multiplayer users. This rendering mechanism is of course different from any other font renderers out there.

  2. There is no way to change it. Your display settings don’t affect it. What exactly do you mean by “looks horrible”? To me it just looks thicker, and that’s completely normal because:

  3. On the actual website or an app, every one of your users will have a different device, display hardware, OS, browser, and their settings. All of these factors affect font rendering, there is no “standard”.

    That’s a part of what software designer needs to be aware of. Nothing will look exactly like Figma when implemented in code. For some users the fonts would look even thicker than in Figma, while for others they would look even thinner than in XD in your case. And you can’t do anything about it.

I’m sure that problem with optimization for my hardware or OS. I have a two screens from different price segments, and font have same problem with each one. But I check project at phone with $80 and font looks surprisingly good.

Do you view the Figma file or the prototype on the phone? I’m not sure if the prototype view uses the device rendering or Figma’s own.

Does this happen if you vectorize the fonts? On your screenshot everything looks kinda blurry, even parts of the XD interface and the font there, so maybe something is wrong with the OS-wide display settings indeed.