Workshop “Responsive Variable Typography” at the Bauhaus-University Weimar

Introduction

The title of the workshop was “Responsive Variable Typography”, which represented an intersection, where students encountered the logic and intelligence of computers, while simultaneously blending the essence of typographic possibilities offered by variable fonts. The students used variable fonts with pre-trained ml5.js machine learning libraries to create reading interfaces that respond in real-time to human pose estimation and adjust the typography accordingly.

The aim of the workshop was to introduce students to Machine Learning (ML) and in the process to give them a glimpse of what is possible to achieve when machine learning is intersected with variable font interpolations. Thanks to all the students, organizers and workshop leaders. It was a great experience.

Workflow

In the workshop, we used poseNet, a pre-trained ml5.js machine learning library developed by Google’s Creative Lab that is able to detect and track human body poses from images or videos. Afterwards, the students were given the opportunity to choose from a selection of variable fonts. They could either opt for pre-designed fonts or explore a diverse range of free open-source options offered by platforms such as Google Fonts. These fonts were then combined with the powerful poseNet library and edited with p5.js and CSS, enabling the creation of dynamic reading interfaces that seamlessly adapted the typography settings based on real-time human pose estimation.

Results

I was truly amazed by the remarkable achievements of the participants within such a limited timeframe! Final works took the form of a Web application (Desktop/Mobile). Andrea explored distance and proximity, creating dynamic visual compositions, Luis experimented with colors, designing adaptive color schemes, Elsa focused on color interactions, producing captivating visual displays, Fee explored typography and interpolation, creating dynamic typographic interfaces. Here are some videos of the results:

Exhibition

At the end of the workshop, students showcased their prototypes, demonstrating the remarkable potential of combining variable fonts and machine learning. The culmination of their efforts was an engaging Workshop Exhibition, where visitors had the opportunity to interact with the prototypes.

Students:
Gabriela Parra Sánchez, Fee Kleihues, Claudio Bolzonello, Lorenz Weiland, Lisa Schulz-Coppi, Johann Joesten, Anna Lina Weiß, Elsa Babtist, Annika Daub, Anica Steinbart, Tobias Schmidt

The photo above shows the crew:
Charlotte Rohde, Marcel Saidov, Vivien Hoffmann and Jorge dos Reis.

Poster for the workshop was designed by:
Johanna, Lea Ansorg, Andrea Camurani

References:
Bauhaus-Universität Weimar
https://charlotterohde.de/
https://marcelsaidov.de/

Links:
www.ml5js.org
www.p5js.org
www.tensorflow.com
https://www.sublimetext.com/

Introduction

Workflow

Results

Exhibition

Artificial Intelligence in the

realms of TYpography & DEsign

Workshop “Responsive Variable Typography” at the Bauhaus-University Weimar

Introduction

Workflow

Results

Exhibition

Read also

Workshop Recap: Design Basics: Exploring User Interface (UI) Design within the Bauhaus Context

Quote of the Day: Donald E. Knuth

Dynamic Font Customization Using Real-Time Hand Gesture Recognition with ml5.js and Teachable Machine.

Artificial Intelligence in the

realms of TYpography & DEsign