Explore non-latin font scaling for Plex @font-faces

[tay1orjones]

Background

Non-latin families, particularly Japanese and Chinese (there are others as well), utilize a full-cap height that make them appear visually larger than the latin alphabet. They instead want them to be visually equivalent as much as possible. So the idea is to modify the styling surrounding these non-latin families to match the visual weight of latin. A common recommendation is to reduce font sizes by a certain amount

In this case they want to reduce the size of Plex Japanese/etc. by 5%.

Scope

This issue is for investigating and researching the best way to do this without impacting the rest of the system. I don't think we can modify font-size because it would impact the root value/sizing for em/rem units and would make every component in the system 5% smaller.

Potential solution

There are some new font-face descriptors that seem promising: https://web.dev/articles/css-size-adjust Some of the fine-grained descriptors aren't supported in safari yet. It could be a case of progressive enhancement, where we optimize for the three browsers that support them and just do the best we can for Safari.

Open questions

• Out of the font families that we support through carbon, what families need this treatment?
  • A: This is answered by new docs on IDL
• Is 5% reduction the % we're aiming for or is it 10%?
  • A: Again, based on the IDL page it's 5%.

Adjusted scale

While the default language for communication is US English, the IBM Plex font also has been created in multiple languages. Some alphabets have taller ascenders and longer descenders than others, necessitating an adjusted scale. Based on the particularities of each alphabet, we established two main categories.

Default scale

For Latin, Cyrillic, Hebrew and Greek experiences, use the IBM type scales.

Adjusted scale

For Chinese, Japanese, Korean, Thai, Devanagari and Arabic experiences, decrease the type’s point size to 95% while keeping the same line height as in the default scale.

Relevant internal slack convo

Tasks

Preview Give feedback

1. Modify the plex arabic story (and other stories for applicable families) to include a bunch of components (form elements, buttons, structured list, maybe even a datatable?) for testing
2. Research and implement the potential approach above
3. Open a draft PR for this so we can view it in the deploy preview
4. Share this with the broader team to determine if this solution meets their additional required criteria

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[DianaStanciulescu]

hi @tay1orjones ! any chance you had time to look into this or will do so soon?