lettering Icon Addition

[MichaelMarcialis]

Summary

Added a new lettering icon to EUI. Closes #4825.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in Chrome, Safari, Edge, and Firefox
• Added documentation
• Added or updated jest and cypress tests
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5525/

[elizabetdev]

Thanks, @MichaelMarcialis for opening this PR.

The code looks great. 🎉

But I have a suggestion. When compared with the other icons, the lettering icon seems thinner. I noticed that it has 1px of weight like the other icons, but it's perceived as thinner.

What do you think of changing the font weight to medium?

[MichaelMarcialis]

When compared with the other icons, the lettering icon seems thinner. I noticed that it has 1px of weight like the other icons, but it's perceived as thinner.

What do you think of changing the font weight to medium?

Thanks for the comment, @miukimiu! While it looks similar to Inter regular, I actually ended up drawing this lettering glyph by hand to ensure that it aligned better to the pixel grid. If you don't feel like it's important to align to the grid though, let me know and I can swap it out for a version that uses Inter medium.

[elizabetdev]

Thanks @MichaelMarcialis,

I run some tests using the inter medium. I had to do some adjustments to make it align better to the pixel grid. But even though, when I did some browser testings in low res it didn't look so good.

So let's stick to your version which is perfectly aligned to the pixel grid! 🎉

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5525/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5525/