Fonts + Spectrum

[ninavizz]

Hello! At the bottom of this page, it clearly states that the Adobe Clean family is restricted to use by Adobe and Adobe software product; however, using it is a dependency of the OSS Spectrum system.

As mentioned in another thread, a team I'm working with wants to adopt the Spectrum components library for use in their desktop webapp. If we cannot use Adobe Clean, what are the technical options to overcome that?

There is currently only 1 developer on the team, and that developer has no FE experience. He has said that it would be "very hard" for him to plug-in the fonts I've been using (Roboto and Montserrat families, as variable fonts by Google) to the Spectrum components. Help?

[castastrophe]

@ninavizz The font family is provided as a stack so if the Adobe Clean font is not loaded, typography will fallback in the following order:

1. Adobe Clean
2. Source Sans Pro
3. -apple-system
4. BlinkMacSystemFont
5. Segoe UI
6. Roboto
7. Ubuntu
8. Trebuchet MS
9. Lucida Grande
10. sans-serif

You can override this stack and provide your own definitions by providing your own values for the following custom property: --spectrum-sans-font-family-stack

[ninavizz]

@castastrophe Thank you for chiming-in, Cassondra! I did not know we could override typography stuff in Spectrum. Our developers are new to FE, and wanting to stick to as many OEM values as possible such that no a11y or usability stuff is broken.

I wish we could ship our tool with Adobe Clean to install on end-user machines, but my understanding is that's not an option for a for-profit enterprise tool that uses Spectrum for its UI (what my UX work with Spectrum is to support). Is that correct?

[castastrophe]

My understanding is no but I am an engineer and cannot speak to the legality around the use of the proprietary font. The fallback fonts available in the existing stack are comparable to Adobe Clean in terms of usability and accessibility.

[ninavizz]

@castastrophe No worries—I'm both a designer, and a former designer with Adobe's consulting org, so am waaay too familiar with Clean and its licensing rights. Just wanted to make sure I hadn't missed anything obvious.

The issue isn't with desiring the aesthetics of the letterforms themselves, but rather with how the font itself is programmed—and it's wackadoo built-in something-something, forcing off-vertical-center display of the alternate fonts in Spectrum's CSS set.

Literally the only reason I'd want Clean, is to avert the annoying font display probs w/in UI controls (where it's a problem). That is why I'm curious if the Spectrum team will ever consider different design tokens for use in UI controls, versus in lines/paragraphs of text. 14px Bold Adobe Clean needs certain character spacing and line height attributes to be legible and elegant to read, in lines of text or paragraphs—but those same attributes then make it render wonky in a button container or text field, as 1-4 words of text.

While the developer who contributed earlier (in another thread?) commented the vertical-alignment problem has been fixed in Spectrum2, I'm still concerned there might be problems with the same CSS font properties used in UI control text, vs sentence/paragraph text. Again tho, I'm a designer w/o the ability to remember syntax I can't visualize—so I'll never speak a second language or learn code-concepts to their correct terminology.

Sorry to be longwinded, and TY for caring! :D