Struggling with font

Hi there.
I’m moving a design from Figma to PenPot. And I’m struggling with font rendering.

Check out the attached image. I don’t get why the right arrow, with a character with the Noto Sans font is not vertically centered.

Do I do something wrong? How can I fix this?

Thanks.

Hej @romu,

I don’t have an immediate solution for your problem but some thoughts. Maybe they help.

  1. I’m not sure if this is an arrow from the Noto Sans font. Usually, they look different (more straight) then the one in your image. Maybe something got wrong during copying them from Figma.
  2. There a glyphs which are not center alligned. E.g diacrytical marks (the little accent things above some letters like here: è) are above the letters. Some are also “below” the baseline of the font. Maybe the arrow in your picture is a “below arrow” glyph.

These are just some thoughts. If you can share a file where this problem occurs it’s easier to have a closer look.

Ciao,
Sven

1 Like

Hi Sven.
Thanks for the help.

I can’t upload a document, I’m too new on this forum. But here is my process to reproduce:

  • I type the right arrow in a right document editor (I’m on mac, so it’s Control+Cmd+Space shortcut), in my case, I use Notion

  • I copy/paste this character from Notion to PenPot, and adjust the font settings (Noto Sans, etc).

Hope this helps. Thanks again.

Interesting…for me the Control+Cmd+Space (on a Mac) shortcut opens the emoji viewer for me. Maybe this shortcut has a special function in Notion. In this case, I doubth that it will insert a correct arrow glyph but more a generic symbol. Maybe I’m wrong.

You could try to change the font of the arrow. If it’s a glyph it should update its appearrance corresponding to the selected font. If its a symbol it should keep its appearrance. :person_shrugging:

Hi everyone,
I’m sharing a resource that’s solved many problems for me on many projects, and this situation might be a good fit!

3 Likes

Yes, same to me, it opens the emoji viewer. But they are real characters. If I change the font from Noto Sans to another, I see the arrow changing as well.

And thanks to the @findut link, you can see the right arrow character is U+02192.

But that doesn’t fix the rendering problem :wink:.

The unicode designation helps a lot. I just checked the Arrow glyph on the https://fonts.google.com/noto/specimen/Noto+Sans type tester. It seems that Noto Sans doesn’t have arrows in its glyphs set. So my guess still persists that the arrow you see in Penpot can’t be the correct one from Noto Sans because it doesnt exist.

Does the problem still exists with the U+02192 glyph from other fonts?

I hope my feedback and comments still make sense to you and help. If not just let me know. :slight_smile:

1 Like

Thanks to both of you. It was really helpful. So, I’ll change the font from Noto Sans to another one which includes the right arrow glyph, or…replace the glyph by another one.

Fun fact, Noto Sans has the left arrow glyph. But, same thing, the glyph is not vertically centered even on Google Font, it’s still located at the bottom of the area.

Another fun fact: copy the left arrow glyph from Google Font and paste it into PenPot → Crash!

1 Like

:rofl: great findings. That’s awesome!

1 Like