Creative Coding: Group 13 Case Studies

Raffaello Chiarioni
Draw With Code — Case studies
4 min readNov 12, 2019

Generative Typography

By Raffaello Chiarioni, Andrea Gaglione, Federico Cordelli, Francesco Invidia

Hi, we are Group 13, a party of coders bond together by the passion of music, coding and typography.
We are interested in the potential of automation in the traditional instances of graphic design and we think of algorithms as a tool, an improved creative method in generating new possibilities and in exploring new formal languages.

Here we have selected four representative cases in which the use of coding enhance the way we use, design and play with typography.

1 — Universal Sans

Universal Sans is a typeface system designed by Briton Smith, in collaboration with Twomuch Studio, that allows you to customize a sans serif font matching your specific needs.

The first four basic things that you can customize are weight, the terminal endings, roundness and stroke joins skew.
Then you can select alternatives for specific characters such as lowercase a, uppercase Q, number and punctuation style.
You can then add weights by tweaking the parameter from 300 to 900 and save your current weight style.
The next step is to check all the font variants that you’ve created and add them to cart, selecting the license and download your customized font family.

You can fully customize your sans serif font parameters in a more interactive way, by using the Interpolator panel, that lets you select different font parameters in the x and y axis and explore the full spectrum of variants within their range.

> Visit site

2 —SpaceTypeGenerator

SpaceTypeGenerator is a project developed by Kiel Mutschelknaus, multidisciplinary artist whose activity ranges from design to animation, and from typography to coding.

Space Type Generator is a series of web tools that allows users to easily create animations based on typefaces. Encoded in Processing and using a variable font called Lofi Mono, each generator is based on a simple form (cylinder, toroid, plane, sphere, etc.) and offers the user a series of parameters to be modified. These variables can be linked to sine, cosine curves to create looped animations.

All you have to do is to write down something and then select from a variety of different default scenes that will turn your text into cool generative artwork.

> Visit site

3 — Nordik Impact

This site, designed by Murmure Studio is made to celebrate the 20th edition of Nordik Impakt, an electronic music event.

The poster generator allows you to create a personal unique version of the event’s poster. The goal is to use the generative design, with the combo music/informatic code, communicating the philosophy of the event and the electro music in general.

The role of this contemporary art is in fact to overturn old social models and rewrite a new society in which anyone is completely free and able, if not to create something completely new, to speak a language that can be reached by everyone, that of electronic music, that does not need translations. By the way the generative design reflects all these cultural objectives, making this couple very interesting.

> Visit site

4 — Anitipe

Anitype is a simple platform develop by Jono Brandel in which the user is given the possibility to animate type letters.

The main page is the complete type in alphabetical order. You can choose a letter and this leads you to the editor, in which the letter is shown executing a simple scale animation every second. On the left of the letter there is the code, which is written in plain JavaScript.

Anitype doesn’t include any library from JavaScript because it is designed to help the developers create a new type based on the modern technology and possibility, so it has to be a moving type, because our main reading support is not static, and it can be done by every programmer with no specific competence. The other main section of the site is the Entries section, which contains all the experiments done by the users of Anitype.

> Visit site

--

--