4 ms·

The "Texture Healing" feature is a really smart use of OpenType features to make problematic monospace combinations look much better without breaking the grid a

The "Texture Healing" feature is a really smart use of OpenType features to make problematic monospace combinations look much better without breaking the grid at all. One naive way to do this would be to create ligature pairs for difficult pairs (mi, lm, etc). But instead, they seem to be selecting character alternates that fill the fixed width differently based on their surroundings.

idan 3y ago
It really is super clever! And the crazy part is that it's been possible for a super long time, just nobody thought of the technique. Mad props to Riley Cran and the entire crew at https://lettermatic.com https://lettermatic.com for devising this technique as a part of this project.
- csande17 3y ago
  I'm curious: did the team consider applying the technique to letter pairs like Ty and TA that traditionally get kerned closer together in proportional fonts? As far as I can tell from the demo, these pairs currently aren't affected by texture healing, and they look a little awkward in Radon especially.
nvartolomei 3y ago
Commit Mono font does something similar and calls it “Smart kerning”. Visit https://commitmono.com/ https://commitmono.com/ and click on the “04 Intelligent” tab for details. In practice this is unusable. Because the width of the letters now depends on the succeeding character, the text jumps as you write it. Super annoying. Cool for reading. Awful for writing.
- Daneel_ 3y ago
  Exactly my experience as well.
- naikrovek 3y ago
  [flagged]
- CGamesPlay 3y ago
  It doesn't in this font? Possibly because of what they talk about where it optimistically gives as much space as possible to succeeding glyphs. You can try it on the page; the code sample boxes are editable. I see no jumping when I type "calming", their example word. [append] Oh, I do see some jumping when I type "optimized". Honestly, it doesn't seem very jarring to me; the jumping is always right where the edit point is so the added or removed letter causes a much bigger jump.
  - deleted 3y ago
    [deleted]
- sakjur 3y ago
  If this gets popular, I could see a text editor that lets you use a non-healing version of the font for any text that has been written in the viewport and then swaps it out as soon as you no longer looks at that block of text – or straight up uses a different font for my modifications compared to the committed code. But even without anything like that, if it’s good for reading I like to use different fonts when reviewing and writing code to help with the context-switch, so I think this could be useful to me. And I guess people in regions where a single keystroke isn’t always a single character such as Korea, China, Japan and the arab world might be used to the jarring effect already?
  - philsnow 3y ago
    > I could see a text editor that lets you use a non-healing version of the font for any text that has been written in the viewport and then swaps it out as soon as you no longer looks at that block of text The text editor widget on their page is a bunch of "line" divs with individual terms being inside spans. If you add an inline style of font-feature-settings: "calt" off; or, more completely, font-feature-settings: "calt" off,"dlig" var(--ligatures,1),"ss01" var(--ligatures,1),"ss02" var(--ligatures,1),"ss03" var(--ligatures,1),"ss04" var(--ligatures,1),"ss05" var(--ligatures,1),"ss06" var(--ligatures,1),"ss07" var(--ligatures,1),"ss08" var(--ligatures,1); to a single line div or a single term span, it won't do the healing. If one of the CSS pseudo selectors worked for these kinds of elements (I see there are a lot that apply to forms, but.. maybe :active / :active-within would work for editable spans?), you could have healing automatically apply to terms when they 'blur' / when they're no longer active.
  - pdpi 3y ago
    If it's good for reading, it's especially good for Github itself, which is a largely read-only interface for code.
- sensanaty 3y ago
  Unrelated, but why is it that Font marketing pages specifically always have such cool-looking demoes? I love the navigation on that site, I might steal that for my own site
  - tambourine_man 3y ago
    Probably because if you care about typography, you care about design and you crafted that demo page with passion, instead of picking a free template with 3 columns adorned by free icons of rockets, gears and brains.
- tomhallett 3y ago
  Could the “jump” problem be improved with a subtle transition (200ms, 1s, etc) from one state to the other? If the editor “repaints” commit mono on the letter-pair boundary, I could see that being a very jumpy UX — ie: the letter I just typed is moving by a few pixels. But if that repaint happens on the word boundary it might be less noticeable? In either case, a transition could be helpful for commit mono and/or Monaspace. (But agreed with above comments that Monaspace is more subtle because it spreads the spacing over the entire word, so maybe the transition is not actually percievable or worth it). :)
alberth 3y ago
I’m probably missing the obvious, but it seems to just make the “m” wider.
- turnsout 3y ago
  The issue with that is that it would reduce the space between pairs that need it (such as mb). Taken to an extreme, mm would run together into one letter.
zokier 3y ago
So many people here are now praising texture healing, but to me its just half-way measure. Why are we as a community so resistant for adopting variable-width fonts? This texture healing already breaks perfect character cell grid, so in some ways it feels like worst of both worlds. I feel at least partially the same about fancy ligatures; we could just use the actual characters in source code, Unicode is widely supported. Raku does that, but it would need better typesetting (with variable-width fonts) to really shine.
- lionkor 3y ago
  thats not what it does - it maintains monoSPACE while chaning the characters to not look the same width -- the best of both worlds, if anything
  - omnimus 3y ago
    Its ok but instead of uneven spacing you get uneven character widths. It might be ok but there is a reason why type designers make every character to be the same and try to balance everything including spacing. Monospaced fonts designs are dictated exactly by that limit of fixed character+fixed space. But maybe the “healing” might not be verydistracting.
    - stevage 3y ago
      > there is a reason why type designers make every character to be the same and try to balance everything including spacing. But this was designed by type designers. So you can make exactly the same argument about texture healing.
- SonOfLilit 3y ago
  I hate ligatures in code. It sometimes breaks out of the grid, but there still is a grid. Things are sometimes not micro-aligned but still macro-aligned, and that matters (to me).
  - zokier 3y ago
rob74 3y ago
Meh... not convinced. Once you have toggled the checkbox a few times, you start noticing inconsistencies: e.g. in the example shown by default, the second "m" in "time_limit" is obviously wider than the first one because it has more space to "grow" having "i"s on both sides. Not sure if I like this...
- JW_00000 3y ago
  Also, type mimi in the first code example: the two 'm's have different width...
solardev 3y ago
This is really cool!

idan 3y ago

It really is super clever! And the crazy part is that it's been possible for a super long time, just nobody thought of the technique. Mad props to Riley Cran and the entire crew at https://lettermatic.com https://lettermatic.com for devising this technique as a part of this project.

csande17 3y ago
I'm curious: did the team consider applying the technique to letter pairs like Ty and TA that traditionally get kerned closer together in proportional fonts? As far as I can tell from the demo, these pairs currently aren't affected by texture healing, and they look a little awkward in Radon especially.

nvartolomei 3y ago

Commit Mono font does something similar and calls it “Smart kerning”. Visit https://commitmono.com/ https://commitmono.com/ and click on the “04 Intelligent” tab for details. In practice this is unusable. Because the width of the letters now depends on the succeeding character, the text jumps as you write it. Super annoying. Cool for reading. Awful for writing.

Daneel_ 3y ago
Exactly my experience as well.
naikrovek 3y ago
[flagged]
CGamesPlay 3y ago
It doesn't in this font? Possibly because of what they talk about where it optimistically gives as much space as possible to succeeding glyphs. You can try it on the page; the code sample boxes are editable. I see no jumping when I type "calming", their example word. [append] Oh, I do see some jumping when I type "optimized". Honestly, it doesn't seem very jarring to me; the jumping is always right where the edit point is so the added or removed letter causes a much bigger jump.
- deleted 3y ago
  [deleted]
sakjur 3y ago
If this gets popular, I could see a text editor that lets you use a non-healing version of the font for any text that has been written in the viewport and then swaps it out as soon as you no longer looks at that block of text – or straight up uses a different font for my modifications compared to the committed code. But even without anything like that, if it’s good for reading I like to use different fonts when reviewing and writing code to help with the context-switch, so I think this could be useful to me. And I guess people in regions where a single keystroke isn’t always a single character such as Korea, China, Japan and the arab world might be used to the jarring effect already?
- philsnow 3y ago
  > I could see a text editor that lets you use a non-healing version of the font for any text that has been written in the viewport and then swaps it out as soon as you no longer looks at that block of text The text editor widget on their page is a bunch of "line" divs with individual terms being inside spans. If you add an inline style of font-feature-settings: "calt" off; or, more completely, font-feature-settings: "calt" off,"dlig" var(--ligatures,1),"ss01" var(--ligatures,1),"ss02" var(--ligatures,1),"ss03" var(--ligatures,1),"ss04" var(--ligatures,1),"ss05" var(--ligatures,1),"ss06" var(--ligatures,1),"ss07" var(--ligatures,1),"ss08" var(--ligatures,1); to a single line div or a single term span, it won't do the healing. If one of the CSS pseudo selectors worked for these kinds of elements (I see there are a lot that apply to forms, but.. maybe :active / :active-within would work for editable spans?), you could have healing automatically apply to terms when they 'blur' / when they're no longer active.
- pdpi 3y ago
  If it's good for reading, it's especially good for Github itself, which is a largely read-only interface for code.
sensanaty 3y ago
Unrelated, but why is it that Font marketing pages specifically always have such cool-looking demoes? I love the navigation on that site, I might steal that for my own site
- tambourine_man 3y ago
  Probably because if you care about typography, you care about design and you crafted that demo page with passion, instead of picking a free template with 3 columns adorned by free icons of rockets, gears and brains.
tomhallett 3y ago
Could the “jump” problem be improved with a subtle transition (200ms, 1s, etc) from one state to the other? If the editor “repaints” commit mono on the letter-pair boundary, I could see that being a very jumpy UX — ie: the letter I just typed is moving by a few pixels. But if that repaint happens on the word boundary it might be less noticeable? In either case, a transition could be helpful for commit mono and/or Monaspace. (But agreed with above comments that Monaspace is more subtle because it spreads the spacing over the entire word, so maybe the transition is not actually percievable or worth it). :)

alberth 3y ago

I’m probably missing the obvious, but it seems to just make the “m” wider.

turnsout 3y ago
The issue with that is that it would reduce the space between pairs that need it (such as mb). Taken to an extreme, mm would run together into one letter.

zokier 3y ago

So many people here are now praising texture healing, but to me its just half-way measure. Why are we as a community so resistant for adopting variable-width fonts? This texture healing already breaks perfect character cell grid, so in some ways it feels like worst of both worlds. I feel at least partially the same about fancy ligatures; we could just use the actual characters in source code, Unicode is widely supported. Raku does that, but it would need better typesetting (with variable-width fonts) to really shine.

lionkor 3y ago
thats not what it does - it maintains monoSPACE while chaning the characters to not look the same width -- the best of both worlds, if anything
- omnimus 3y ago
  Its ok but instead of uneven spacing you get uneven character widths. It might be ok but there is a reason why type designers make every character to be the same and try to balance everything including spacing. Monospaced fonts designs are dictated exactly by that limit of fixed character+fixed space. But maybe the “healing” might not be verydistracting.
  - stevage 3y ago
    > there is a reason why type designers make every character to be the same and try to balance everything including spacing. But this was designed by type designers. So you can make exactly the same argument about texture healing.
SonOfLilit 3y ago
I hate ligatures in code. It sometimes breaks out of the grid, but there still is a grid. Things are sometimes not micro-aligned but still macro-aligned, and that matters (to me).
- zokier 3y ago

rob74 3y ago

Meh... not convinced. Once you have toggled the checkbox a few times, you start noticing inconsistencies: e.g. in the example shown by default, the second "m" in "time_limit" is obviously wider than the first one because it has more space to "grow" having "i"s on both sides. Not sure if I like this...

JW_00000 3y ago
Also, type mimi in the first code example: the two 'm's have different width...

solardev 3y ago

This is really cool!