[rgovostes]

I made a brief attempt of splitting each character into a separate <span style="transform: scale(<random>, <random>)">c</span>, but it doesn't look good because the transform is applied after the glyph is rasterized. I didn't see a way to scale the font size itself in two different axes, and applying a single scaling factor of 97-100% does not perfectly recreate the effect. text-rendering: geometricPrecision probably helps.

[zackmorris]

I'm not a frontend developer, I knew about ::before and ::after, but just learned about adjacent sibling combinator +, general sibling combinator ~ and :has() after reading your comment. Maybe every character in the text could be wrapped in a <span> via Javascript where the class name is the unicode value (in hex, say). Then css could tighten the spacing and simulate kerning for certain character combinations:

  text:
  
  it
  
  html:
  
  <span class="69">i</span><span class="74 sarcastic">t</span>
  
  css:
  
  /* could also use ch or ex instead of em */
  .69 + .74::before {
    margin-left: -0.1em;
  }
  
  .sarcastic {
    transform: skewX(-10deg);
  }
  
  /* loosen spacing a bit for certain randomness */
  .69 + .74.sarcastic::before {
    margin-left: -0.05em;
  }

Maybe the type of randomness applied could be set as additional classes on the character, limited only by imagination (I added .sarcastic as an example). Maybe AI could be trained on sample text to tidy up the kerning for a large number of permutations, althought the generated css could get quite large.

I asked AI if there's a way to apply css to specific characters instead of selectors, but unfortunately that doesn't seem to be possible (yet). It feels strange to live in a world where I could have just asked AI to do all of this for me in an online sandbox in less time than it took me to write this comment :-/