Random Font – a typographic experiment exploring randomness [pdf]

49 pointsposted 3 months ago
by misone
(ilcovile.it)

13 Comments

misone

3 months ago

A printed essay where each paragraph is rendered in a different, randomly selected typeface. Found on Il Covile, an Italian publication exploring typography, philosophy, and design. The text is presented in both Italian and English.

The text is presented in both Italian and English.

The authors also created a LibreOffice extension that applies random fonts to any document, allowing users to experiment with the same generative approach directly. It's called "Patina": https://www.ilcovile.it/V3_p_patina.html

rgovostes

3 months ago

The technique applied is not randomly selecting a different typeface per paragraph, but tweaking the glyph shapes when a character is repeated. Glancing at the LibreOffice extension, it seems to slightly vary CharScaleWidth by 90–110% and CharEscapementHeight by 97–100% of the base height.

mock-possum

3 months ago

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

rgovostes

3 months ago

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

3 months ago

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

user

3 months ago

[deleted]

user

3 months ago

[deleted]

wkoszek

3 months ago

The effect is beautiful. Is there a way to easily get the very same effect in TeX or some other text -> PDF format?

gus_massa

3 months ago

English version in page 7.

Fnoord

3 months ago

Clever to apply on a restaurant menu (like in example on page 7). It makes the dishes feel more outstanding, special therefore justifying the price. Which other examples could make sense?