Update Android to using System Fonts only

[cwzilla]

Hi team,

We want to shift towards using system fonts only, which means we'd like to change any existing custom fonts to the native font. From what I'm aware of, it is just the Metropolis font, please let me know if there are other any other fonts to consider. Would like to know if there are any implications or design requirements needed for this change.

Thanks!

┆Issue is synchronized with this Jira Task

[gabrielluong]

@cwzilla I am wondering what styles we should substitute when we use a bold, semibold, medium styles of Metropolis?
In our code base, we currently set the font weight:

Bold fontWeight="700"
Semi-bold fontWeight="600"
Medium fontWeight="500'

[cwzilla]

@mcarare

Hi team,

Can we actually pause on this for now? I realize it won't be a simple change as updating the font, but we would need to audit and see where the current headline styles are being used and how that would actually translate to the system font and ensuring it still works with our UI and is accessible. I'll need to do a bit more research, I may have some further questions later. Thank you!

[Dunexus]

#8089, #21817, #21892 could probably be closed in favor of this open ticket as they are similar or conflicting with this one ?

[cwzilla]

Hi @mcarare, I'm taking a look at where Metropolis is currently being used in-app and on Figma and this is what I've managed to find. Can you let me know if there's anything I'm missing?

Name	Current Style	Where it's Used
Header 20	Font: Metropolis / Size: 20 / Weight: 600 / Letter Spacing: 0.5px / Line Height: 24px	Onboarding Modal, Dialog Title, App Bar Top, etc.
Header 16	Font: Metropolis / Size: 16 / Weight: 600 / Letter Spacing: 0.5px / Line Height: 20px	Default heading on cards, screens, etc.
Header and Button 14	Font: Metropolis / Size: 14 / Weight: 600 / Letter Spacing: 0.5px / Line Height: 16px	Buttons
Header 12	Font: Metropolis / Size: 16 / Weight: 600 / Letter Spacing: 0.5px / Line Height: 20px	Small headings in Settings (the purple headings)

To switch this over to using system font, our UI doesn't exactly work with Material's default headline settings, so we would need to create additional headline styles. For example, our current Header 20, would be equivalent to Roboto / Size 20 / Weight: 500 / Letter Spacing: 0.15px. What's the best way to define these new styles that will work with any system font (not just Roboto)? Thanks!

[mcarare]

@cwzilla In my opinion, for just removing the Metropolis font we should use the approach already used in this PR. Meaning, where the Metropolis font was previously used in the app, we should have a correspondence in order to know what are the values of the new style, like in the example you have given.

As for other system fonts, I do not think that is a problem, in the sense that it was not taken into consideration in the other places we already use system fonts. Meaning, if it was not a problem in other places, why would it be in the places we preciously used Metropolis and we want to use the default system font (already used in all other places in the app)?

[cwzilla]

@mcarare Ah yes, that makes a lot of sense! In that case, here are the updated type styles. For Current Style, I am just referencing what we have in Figma (so it may not be accurate to what's in the app, though they should be pretty similar). Let me know if there's anything I'm missing. Thanks!

Where it's Used	Current Style	New Style	Notes
Onboarding Modal, Dialog Titles, App Bar Top (Page titles), etc.	Font: Metropolis / Size: 20 / Weight: 600 / Letter Spacing: 0.5px / Line Height: 24px	Font: Roboto / Size: 20 / Weight: 500 / Letter Spacing: 0.15px / Line Height: 24px
Default heading on cards, homepage, tab tray, etc.	Font: Metropolis / Size: 16 / Weight: 600 / Letter Spacing: 0.5px / Line Height: 20px	Font: Roboto / Size: 16 / Weight: 500 / Letter Spacing: 0.15px / Line Height: 24px
Buttons	Font: Metropolis / Size: 14 / Weight: 600 / Letter Spacing: 0.5px / Line Height: 16px	Font: Roboto / Size: 14 / Weight: 500 / Letter Spacing: 0.25px / Line Height: 14px
Small Headings (the purple headings in Settings)	Font: Metropolis / Size: 16 / Weight: 600 / Letter Spacing: 0.5px / Line Height: 20px	Font: Roboto / Size: 14 / Weight: 500 / Letter Spacing: 0.4px / Line Height: 20px
Text field/dropdown label	Unsure (the specs aren't on Figma)	Change to "Caption"	No new style needed to be defined, instead change to Material's default 'Caption'

[mcarare]

@cwzilla In places where Metropolis medium (weight:500) was used what would be the new weight?

[cwzilla]

@mcarare do you have some examples of where Metropolis medium is currently being used?