IBM Plex Integration

[joshblack]

Currently, we offer support for a handful of font faces (Sans, Mono, Serif) and a handful of weights (light, normal, semibold). We also offer a way for these fonts to be loaded easily through Google Fonts by default.

However, it seems like the usage for IBM Plex has grown broadly to include the following use-cases:

• Able to include different fonts from: http://github.com/ibm/plex for internationalization
• Able to leverage the Variable Font as opposed to Sans plus a variety of weights
• Able to bring in multiple weights as opposed to our limited set

This discussion is for figuring out the best API for providing these font faces across our different style targets, including:

• CSS
• Sass
• CSS-in-JS

Some broad changes that we'd also like to see happen:

• Provide a dedicated API or config for this in Carbon
• Provide a solid default similar to what we have now that works for most use-cases
• Provide a solid ramp for adding additional languages for internationalization
• Use fonts directly from @ibm/plex instead of having any checked into our packages

Links & Resources

• IBM Plex on GitHub
• Example with Inter UI

Checklist

• IBM Plex v6.0
• Add locale switcher support to storybook v6 in @carbon/react #8711
• Bring in IBM Plex font faces into storybook #8712
• Plex Integration #9705
• Move fonts to be in the type package and document migration path #10874

[joshblack]

Project kick-off May 17th

Notes:

• Plan for Sprint 10 is to have a Plex beta shipped with support for:
  • Sans
  • Arabic
  • Mono
  • Serif
• Our team will use this plex beta to interop with storybook v6, this work includes
  • How should we forward the plex sass in @carbon/styles
  • What's the best way to bring in language-specific fonts by a consumer?

[tay1orjones]

@joshblack This is complete from my understanding, closing.