Underlining text with descenders is broken

Underlines have been broken since I started using Figma when it first came out. It is the only thing that frustrates me (this program is perfect in every other way, seriously).

There have been several tickets opened about it that were auto-closed due to inactivity:

The basic problem (and I will re-use an image from that first link, thank you @jdb) is that descenders (seen on glyphs like β€œg” or β€œj”) are overlapped by the underline in text elements. The top example (without ink skip) is the way it currently works, and the bottom (with ink skip) is the default behavior in web browsers and is currently not possible in Figma:

Is there a possibility that we can get a font option to allow for this behavior? As @Lino_Ramirez and @Gary_Tam have mentioned, this is a CSS option that can be configured.

I understand that it’s most likely not as easy as adding an option to enable some CSS property, but I would love to hear if others are in favor of this functionality! Or if there are inherent limitations with WebGL, etc. Thank you!

5 Likes

No idea on updates or roadmap for this @Support_Team ?

Even this forum does it right:
image

I’m not even sure this should be an option. it should just behave this way for a11y purposes and it just looks better.

4 Likes

Hello there, Thank you for sharing your idea about underlining! Also, thank you for gathering similar past ideas from other community members.

We understand that this idea may be useful to other community members as well, and we are interested in hearing their reactions to this idea. Votes and comments can help us gauge the interest and feasibility of implementing such a feature.
Please feel free to vote up!

Thanks,

While this issue is most likely to be covered in development, we have marketing teams who export creative assets directly from Figma for our social assets. Fixing this would greatly increase the legibility of our content copywriting and improve the quality of our assets.

4 Likes