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
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.
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.
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.
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 :-/
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?
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
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.
cool, thank you!
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.
Delightful! I wonder whether I could achieve this effect in pure css…
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.
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:
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 :-/
The effect is beautiful. Is there a way to easily get the very same effect in TeX or some other text -> PDF format?
English version in page 7.
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?