Changing the 'Calibre' font will reduce some alignment issues in the UI

[RakeshUP]

The font 'Calibre' used in snapshot UI has abnormal ascender:descender ratio height as posted in the image below

For reference, this is what any font would look like(Roboto from Google fonts used for sample here)

You can check out more about this here https://seek-oss.github.io/capsize/

This abnormal descender height leads to alignment issues, where devs have to align by using a bottom padding/margin of around 4px lesser than the top one to make it look centered. It's also difficult to use center-align in a flexbox. Below is an example of Calibre being center-aligned in a flex

The items can be center aligned by specifying a margin(positive/negative) to any one of the items.

A place where alignment is not proper:

This is how it looks with the default system font:

The solution would be to change the font (or) get a set of Calibre fonts with proper dimensions. The ones I saw on the official Calibre font website do have the proper dimensions.

[bonustrack]

@RakeshUP Yes thats good point, this is something we've seen. We actually got a set of the same font with proper alignement, I can provide it to you but we will need to rework all the UI to be sure nothing break.

[RakeshUP]

@bonustrack I can work on that. I'll go through all the pages.

[samuveth]

@RakeshUP great, can't wait to see this!

[samuveth]

@RakeshUP I wan't aware of why this was happening, thanks for the clarification!