Alignment issue with alternative font

[b-graves]

Hi,

We are considering switching to Lato font for our reshaped UI, however I've tried using it and while most of it looks good, text that needs to be aligned vertically centrally often looks misaligned and messy, for example buttons and text fields shown below:

Inter:

Lato:

Is there a good way to get around this? Perhaps I need to adjust the line height in the theme somehow?

This is the theme defintion I am using:

const config = {
  themes: {
    cognaTheme: {
      fontFamily: {
        body: {
          family: 'Lato, Inter, Arial, sans-serif',
        },
      },
    },
  },
}

[blvdmitry]

Hey, I'll check it with the font. My first thought was it might be related to the font itself and its baseline. Some fonts are better than others with that and that's why so many products are using Inter or system fonts

[blvdmitry]

Here is the comparison of both font on foogle fonts for 12/16 size. First is Lato, second is Inter

It doesn't look like a huge difference, so when I tried using Lato from Google Fonts in a Badge it also turned out to look better than on the original screenshot, it might be related to the source of the font and the file format used I believe:

[b-graves]

Ah interesting! Thanks for this. It looks good in your example from Google fonts! I started off with google fonts but I switched to adobe https://fonts.adobe.com/fonts/lato because Google only seemed to provide a limited set of weights (300, 400 and 700) whereas adobe had the full set. I'll have a go using google instead and see if I can make the limited weights work

[blvdmitry]

Would be amazing if you can confirm that using Lato from Google fonts fixes the issue with the alignment for you as well

[b-graves]

So it seems like there are two versions of Lato, the old one hosted on google and the new one hosted on abobe.

https://www.latofonts.com/lato-free-fonts/

The old one on google works much better with the alignment, but the range of weights 300, 400 and 700 doesn't really work in our UI. We are using mostly the regular and medium weights in Inter (400 and 500) and if you map that down to (300 and 400) everything looks a bit spindley and thin. The new version in adobe has the full range of weights but the alignment issue makes everything look a bit naff. I think we might have to stick with Inter for the time being, which is a shame because I like the warmth of Lato!

[blvdmitry]

By the way, does it have the same alignment issues in design as well? Do you have the same problems in case you're trying to create a custom badge in your design tool? Trying to figure out if it works better outside of Reshaped components

[b-graves]

Yeah the badge has the same issue in figma, and I tried making my own badge from scratch using Lato and it looks exactly the same as the reshaped one. I think the latest version of Lato just sits really low in the line height for some reason

[blvdmitry]

Ok, I guess I won't be able to solve this on the Reshaped then so I'll close this ticket. Feel free to leave comments in the future if the situation changes and thanks for checking various Lato versions 🙌