nikku
commented
3 years ago Using Inter as a font does come with a set of challenges:
- (1) How to deal with existing diagrams that are rendered with Arial? The size of labels that we serialized is different :arrow_right: we need to investigate if Inter is a more or less drop-in replacement
- (2) How to distribute Inter along with the library?
- (3) Make usage of Inter optional with a Arial fallback?
Is your feature request related to a problem? Please describe.
We currently use Arial when rendering BPMN. Arial was designed for IBM in 1982 to avoid paying licensing fees for Helvetica. It works visually because it is generic, but it was not designed for use on screens and its legibility suffers as a result. Newer, screen optimized typefaces are available for us to explore.
Arial does have the advantage of being universally available everywhere, but there are ways of embedding fonts so they reliably appear as the primary option, while still relying on Arial as a fallback.
Describe the solution you'd like
We should consider using Inter, an excellent open source typefaces designed to be used on screens at all sizes.
We have already spent a bit of time doing preliminary exploration and testing of Inter from a design and development perspective. Now we need to agree on what is the best way to embed Inter within diagram-js. One option is to integrate Inter with the BPMN font, so they're bundled and loaded together.
Inter is a variable font with highly customisable dynamic metrics that can be used to optimize the font's tracking and leading for our specific use case. I would like to do a bit of pair programming/design in a branch to determine the exact right settings for Inter in bpmn-js.
Describe alternatives you've considered
We could use a system-UI font, but it would lead to inconsistency in the experience.
Another obvious choice might be IBM Plex, a screen font that we use everywhere else in the UI. For our BPMN diagrams, we want a generic, neutral typeface like Arial. Plex does not fit the bill.
Additional context
Inter GitHub Repo Inter Lab