Use negative text-indent on Heading component?

[gerardo-rodriguez]

I'm wondering if we should add a negative text-indent to the headings? (Only larger headings? Not sure.)

I noticed it at some point and now I can't unsee it. In the screenshots below, it feels better when the heading has a slight negative text-indent, in my opinion.

@tylersticka, how do you feel about this?

With no negative text-indent (as things currently are)

With a negative text-indent

[tylersticka]

I've often thought about this with letters like "T" that naturally have a lot of whitespace on their left side. I thought I'd see how this change would fare on other initial letters used in our names.

Here's what I thought, first at the suggested -0.1em and then after halving that to -0.05em.

Initial	-0.1em	-0.05em
A	❌	❌
C	✅	✅
D	❌	✅
G	✅	✅
J	✅	✅
M	❌	✅
P	❌	✅
S	❌	✅
T	✅	✅

My feeling is that the -0.1em is too much except for initials with a large left curve or a large amount of confined white space. But when I reduced that a bit, I preferred the version with negative indentation for all but the letter "A," the left endpoint feeling a tad less aligned with that change applied.

But this was at desktop sizes. I tried the test again at smaller sizes, and I found that the negative indent always looked "off" to my eye.

So the potential solution would be to only apply an indent when the font-size exceeds a certain value. But how would we do that when we're using things like clamp?

Would we mathematically figure out an equation to clamp a negative indent as well?

[gerardo-rodriguez]

Thanks for digging deeper into this, @tylersticka!

I was mostly curious when I opened the issue. Since there isn't a straightforward solution, I agree we leave this in the backlog for now, as you suggested. It's not a high priority for me. 😉