Random Font – a typographic experiment exploring randomness [pdf] (opens in new tab)

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 :-/