Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Random Font – a typographic experiment exploring randomness [pdf]

ilcovile.it

Post reply on HN
Print view View original

11–14 of 14 posts

Re: Random Font – a typographic experiment exploring randomness [pdf]

#11

Post by kragen »

pgtan wrote: post #7

Someone is reinventing PostScript and Metafont https://www.moma.org/collection/works/139326 https://www.tug.org/TUGboat/tb09-2/tb21knut.pdf

METAFONT in particular does not have a way to write code to produce different random variations for the same glyph, nor does its output format have a way to encode those multiple alternatives in its output. I'm not sure if PostScript Type 1 fonts do either, but I'm less familiar with them.

Re: Random Font – a typographic experiment exploring randomness [pdf]

#12

Post by [deleted] »

rgovostes wrote: post #6
mock-possum wrote: post #5

Delightful! I wonder whether I could achieve this effect in pure css…

I made a brief attempt of splitting each character into a separate , )">c , 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.

[deleted]

Re: Random Font – a typographic experiment exploring randomness [pdf]

#13

Post by [deleted] »

rgovostes wrote: post #6
mock-possum wrote: post #5

Delightful! I wonder whether I could achieve this effect in pure css…

I made a brief attempt of splitting each character into a separate , )">c , 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.

[deleted]

Re: Random Font – a typographic experiment exploring randomness [pdf]

#14

Post by zackmorris »

rgovostes wrote: post #6
mock-possum wrote: post #5

Delightful! I wonder whether I could achieve this effect in pure css…

I made a brief attempt of splitting each character into a separate , )">c , 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.

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

Post reply on HN