Typography design for multi-language supported app

Question

I'm designing a mobile app with target users who speak Japanese, Chinese and English.

I tend to use system font instead of distributing fonts with app, because the build size will be large due to those non-Latin characters.

Hence, I encounter the following situation (example),

1. Japanese use Android (Roboto/Noto) and browse English article.
2. Chinese use iPhone (PingFang / SF Pro family) and browse Chinese article.

However, for better reading experience, line height should be different for each font and its corresponded language.

My first attempt is,

1. Design different typography (primary difference is line height) for each supported app language and its corresponded OS (Android / iOS).
2. Apply the typography according to app language set by user.

This method is not good in following case,

1. A Chinese set the app language to English, but primary browsing Chinese article (percentage of this kind of user is large from our data).

Can anyone share the experience how to handle typography in multi-language supported mobile app?

Thank you!

Answer 1

Everybody has different preference for viewing content. I think best would be allow the user to set their own preference.

For default, if you have metadata(like what content is in which language) you can choose the font setting per language(not user selected language). Every platform has some default font.

Answer 2

System resident UNICODE font faces. In general though, the real estate that needs to be afforded to non-Latin ideographic-based language typography- both in line height and character count - is greater than in English (there are exceptions, natch). 12 pnt is probably the lowest point size to consider, but YMMV. Bear in mind character formatting too is different across languages (bold, italics, etc in Asian locale character sets). So design using locale-detecting CSS switching may be the way to go.

See here: https://usabilitygeek.com/how-to-internationalize-your-typography/