Space Mono issues

[rajsite]

🐛 Bug Report

The choice of Space Mono has some known issues where the Space Mono font renders certain character combinations unexpectedly:

• for example /> renders as an arrow instead of two characters.
• certain character sequences don't keep the expected monospace sizing, ie the word flame would have a character width of 4 characters instead of 5.

Related issues:

• Ligature in Space Mono google/fonts#406
• Change ligation and alternate forms so they are not enabled by default googlefonts/spacemono#2

💻 Repro or Code Sample

Example />: https://fonts.google.com/specimen/Space+Mono?preview.text=%2F%3E&preview.text_type=custom#standard-styles
Example flame: https://fonts.google.com/specimen/Space+Mono?preview.text=flame&preview.text_type=custom#standard-styles

🤔 Expected Behavior

Character ligatures are not enabled and monospace characters do not combine

😯 Current Behavior

See example above.

💁 Possible Solution

• Choose a less problematic font. Maybe Noto Sans Mono?
• Include the workaround to disable ligatures via css in nimble
  • Not ideal as it seems easy to mess-up. Particularly since nimble design may be used outside of Web. Maybe NI should not standardize on the font. Or maybe NI should make a fork like NI Space Mono with the patches applied.

🔦 Context

NI brand has decreed that we use Space Mono as our default monospace font on our website. But it has ligatures that can't be turned off. So, anytime we put a /> anywhere in that font, it turns it into an arrow. This is a font issue, so escaping the > with a &gt doesn't work. I'm trying to figure out how to workaround this issue with a SaaS vendor supplying a portion of our website.

🌍 Your Environment

Chrome 98 Win 10

[rajsite]

Some more context that was trapped in email threads and Teams meetings:

---

Ty:

Hey Milan,

I tried to reference a GitHub link about a Mono space font issue but I got a 404.
I wanted to try to look into the options for a new one.
Do you have a description of the "right" kind we need? I want to do some searching but I know we have a lot of requirements and would like to attempt to get up to date so I don't come back with trash 😉

Multilingual
MonoSpace
Cloud?
License?

---

Rick:

I want to piggy back on this and ask if we’ve been using Space Mono as our “Monospaced” font when we want to show code or numeric data or it’s just being used as the decorative secondary font called out in the Brand guidelines

---

Milan:

I wanted to try to look into the options for a new one. Do you have a description of the "right" kind we need? Multilingual? MonoSpace? Cloud? License?

ask if we’ve been using Space Mono as our “Monospaced” font when we want to show code or numeric data or it’s just being used as the decorative secondary font called out in the Brand guideline

1. Currently we only use Space Mono for Group Labels in nimble. I'm not aware of other places we should be using it now but Brandon or leslie may be able to give more insight there.
2. Because a monospace font is used as a label (not just for numbers) then being Multilingual makes sense.
3. Our goal is to have nimble be open source and easy to consume so a license that can be used freely in an open source project would make sense. I'm unfortunately not very familiar with licensing for fonts, I'm more familiar with licensing for source code. The current ones we use / have used are permissively licensed as follows:

• The current font we use generally (Source Sans Pro) uses the Open Font License: https://fonts.google.com/specimen/Source+Sans+Pro?query=source+san#license
• The current monospace font we use (Space Mono) uses the Open Font License: https://fonts.google.com/specimen/Space+Mono?query=space+mono#license
• The previous general font we no longer use (Roboto) uses the Apache License: https://fonts.google.com/specimen/Roboto?query=Roboto#license

4. I'm not 100% clear on what a cloud enabled font implies. If that implies that it is a font available in Google Fonts I don't think that is a hard requirement. We bundle the font into the nimble packages currently instead of linking to Google Fonts. It may be nice if the fonts are available in Google Fonts but it is not a hard requirement (that I know of).

Some more thoughts:

• It would be handy if what we choose can be made generally acceptable in the brand guidelines. ie we would like to share nimble everywhere, not just systemlink / stratus apps but web apps across R&D, pages on ni.com, even desktop apps in R&D.
• Our current plan [GitHub link] (that we have not acted on yet) is to use the Noto Sans font generally for non-English fonts.
  Maybe it makes sense to use the Noto Sans Mono font for both English and non-English monospace fonts

---

Ty:

Rick and I will circle back when we have next steps, probably in Github. Talk soon

---

Rick:

Ty and I discussed it and our recommendation is to stick with Space Mono for our English monospaced font using the font-feature-settings CSS properties to turn off standard ligatures (liga), discretionary ligatures (dlig), and contextual alternates (calt).

This will keep us aligned with NI.com who needs to stick with the brand fonts for English. Using the CSS properties should solve all the issues people were seeing with Space Mono. It also prevents going through a long back and forth vetting process with Brand to get approval for a new font.

---

Milan:

This is my understanding of the table of questions around the font usage:

• Monospace font as an accent font (used for certain headers and labels, not for monospace bodies of text, ie code snippets or numbers)
  • English: Space Mono
  • Non-English: ?
• Monospace font for actual bodies of text (code snippets or numbers)
  • English: ?
  • Non-English: ?

---

Rick:

• Monospace font as an accent font (used for certain headers and labels, not for monospace bodies of text, ie code snippets or numbers)
  • English: Space Mono
  • Non-English: ?

I'd leave these for Brandon or whoever is working on the styling to define. No new fonts but Space Mono (or Noto Sans Mono) is available to use if we decide we need it

• Monospace font for actual bodies of text (code snippets or numbers)
• English: ?
• Non-English: ?

For English we'd use Space Mono with the CSS tags I mentioned above. For non-English we'd use Noto Sans Mono (this keeps us aligned with ni.com)

[rajsite]

@fredvisser where I think this leaves us today in regards to monospace fonts is:

I'd leave these for Brandon or whoever is working on the styling to define. No new fonts but Space Mono (or Noto Sans Mono) is available to use if we decide we need it

I believe Brandon has removed space mono from our control designs (#584). So Nimble controls today are fine and compliant and do not need Space Mono.

For English we'd use Space Mono with the CSS tags I mentioned above. For non-English we'd use Noto Sans Mono (this keeps us aligned with ni.com)

For where we have monospace text generally (snippet of code, tables of numbers, outside our current control set). Rick and Ty's request is to use Space Mono to align with ni.com. We haven't implemented support for this in nimble yet. When we do we may align with the decision or do something else for technical reasons (requiring the font settings is burdensome / difficult to ensure consistency, reducing page size by minimizing the number of fonts, we opt to use font-variant-numeric for numbers instead. etc).