According to the World Urbanization Prospects report currently 55% of the world’s population lives in cities and is expected to reach 68% by 2050, which means 2.5 billion more people. In this context, Portugali highlights how the city has become a text to be read in which citizens are increasingly protagonists of their own story:

Today’s city is the postmodern city: untamed, shrew, capricious, ever-changing; actually, it is not a city but a text; a text written by millions of unknown writers, unaware that they are writers, read by millions of readers; each reading his or her own personal and subjective story in this ever changing and chaotic text, thus changing and recreating it and further complicating it. Juval Portugali

We move quickly towards the so-called smart cities, where IoT and the hyper-connectivity of citizens shape new paradigms of coexistence and interaction. According to Cisco, 500 billion devices with sensors collecting data are expected by 2030. In this context of hyperconnection and continuous interaction with the environment, disciplines such as data visualization and interaction design are key. However, the literature consulted, Bollini and Sun, Leigh, Johnson & Lee, highlights the need to deepen the processes of significance of graphical interfaces. Viljami Salminen asserts:

The future for UI typography being all about sensors and font formats that can respond to data acquired from these sensors, and eventually also new typographic tools that have contextual awareness which integrates more intelligent algorithms to our workflows. Viljami Salminen

In order to achieve this objective, the study of other fields such as graphic design applied to interfaces, and more specifically typography, is particularly relevant. According to Grégori Vincens and Jérémie Hornus: “Typography is the main interface between information and the residents of the city who benefit from access to it”. One of the revolutions that we are experiencing in recent years in the typographic framework are the so-called variable fonts, which can be a response to the need for meaning in interfaces, as their potential lies in turning typography into something alive that reacts and adapts to the environment.

This project presents a model that sets the groundwork for establishing a significant relationship between variable fonts and its application in graphical interfaces from data collected by different sensors.

On 8 February 2021 we held a one-day beginner-level workshop on interactive typography in semantic interfaces controlled by physical computing as part of the Processing Community Day 2021 @ Porto organized by the Faculty of Fine Arts of the University of Porto.

The goal of this workshop was to introduce participants to improve the user experience of graphical interfaces by creating a semantic relationship between typography and data collected by sensors.

Specifically, we showed participants the new font technology, variable fonts, how to connect sensors to the open-source board Arduino and learn the tools to synchronize the data and the typeface through HTML, CSS, and Javascript (JS).

The workshop program was (10h–13h GMT+1):

• Introduction (participants, instructors)
• Variable fonts
• Arduino and sensors
• Building an interface with HTML, CSS, and JS to interrelate a variable font and sensor data
• Sensor Variable Font model
• Developing a graphic interface prototype

It was a huge surprise what some of the participants achieved in such a short time! Here some results:

Bruna Sousa’s clock prototype

Marie Malarme’s variable color font sun / starts

Game intro Workshop: https://sensor-variable-font-workshop.netlify.app/

For Mac and Windows users:

• Visit https://code.visualstudio.com/download download and install your Os version.
• Visit https://www.arduino.cc/en/software download and install your Os version.
• Visit https://nodejs.org/es/download/ download and install your Os version. During Windows installation the app will ask to “Automatically install the necessary tools…” Check that option.

Now only for Window users:

• Visit https://git-scm.com/download/win and install your Os version.
• Visit https://classic.yarnpkg.com/en/docs/install#windows-stable your Os version
• Run PowerShell as administrator (right-click) and write:
• yarn global add windows-build-tools

Now only for Mac users: Open the terminal (Open Launchpad and look for Terminal) write and press intro after:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Now write and press into after:

brew install git

Now write and press into after:

brew install yarn

*If during the installation on the Terminal you are asked for administrator permissions, write “sudo” in front of the above codes.

Well done!!! Now you are ready to start the workshop

Recently, a chapter on the Sensor Variable Font project was published in the book Perspectives on Design and Digital Communication: Research, innovations and best practices published by Springer. Link to the chapter.

Abstract

Cities are rapidly developing into so-called Smart Cities, where the Internet of Things (IoT) and the hyper connectivity of citizens are shaping new paradigms of coexistence, so further research is needed on how to improve the user experience through design. One of the revolutions in recent years in the typographic framework are variable fonts, which have the potential of turning typography into something alive that reacts to the environment. In response to this context, we present a model that lays the foundations for improving the process of signification of graphic interfaces through variable fonts, establishing a relationship between typography and the data collected by different sensors, resulting in more satisfactory user experiences. The research is contextualised by a literature review focused on semiotics, graphic design systems, interaction design, graphic and natural interfaces and variable fonts. Then, it describes the elements and the architecture flow of the model and advanced model cases. Finally, the model is evaluated by developing some prototypes. As an outcome of the early approaches to model evaluation, we can confirm that the proposed model has enough level of abstraction and flexibility to be successfully applied to multiple interactive projects in fields such as IoT, games, data visualization, branding or motion graphics.

In the framework of an Erasmus Mobility Agreement with the Escola Superior de Media Artes e Design (ESMAD) of the Politécnico do Porto, I carried out with my colleague Lourdes Marco a workshop with students of the School of Design.

The purpose was to introduce them the possibilities of building semantic graphic interfaces through variable fonts and data collected by sensors. Moreover, we conducted a validation of the model in order to test its usefulness.

Here there are some images of the workshop:

Here a video of some results. Firstly they used a potentiometer to focus or unfocus the font and secondly a vibration sensor to modify the value of the axes of the font.

Protoype designed by Jordi Basora and Núria Artigas

On the occasion of the third edition of DIGICOM, an International Conference on Design and Digital Communication, organized by the Design School of the Polytechnic Institute of Cávado and Ave, I presented along my college Lourdes Marco a paper to introduce the definition of the model Sensor Variable Font to the design community.

The conference took place in the Teatro Gil Vicente.

In order to show different possibilities of the Significant Function, I prototyped a more joyful application of the model.

In this case the scenario is a shop with a variable identity. Each time a customer is detected by presence sensor the logotype will variate.

For this purpose I designed a specific variable font with Glyphs App which axe rotate 360º the glyphs.

To make each letter rotate randomly I use the JS expression:

return Math.floor(Math.random() * (max - min + 1) ) + min;

Here you can see the prototype working: Significant Function – random expression

The model has been created with a broad level of abstraction and sufficient flexibility to allow it to be applied in multiple interactive projects. The options are infinite and it is up to the designers to apply an adequate logic to their purposes.

On the following figures I show more variations of the model using more than one sensor and/or font axis: Model with one sensor and two axes You can see an example on this prototype with one sensor data applied to three different axes.

Model with two sensors and one axis

Model with two sensors and two axes You can see an example on this prototype with two sensors applied to different fonts and axes.

Model with a sensor that records binary values and a binary axis

The combinations are infinite. It depends on the nature of the project and the communication purposes. It is specially relevant the last example since it doesn’t use a numeric value. I will show you on following posts the possibilities of variable fonts to improve signification from non numeric data as text.

At the present time I only know two technologies able to interact with sensors and variable font axes (please write me if you some else). Sure there are more to come, but in the mean time… One is through the font-variation-settings CSS propriety and the another one is through the fontVariations Drawbot (Python) propriety.

To develop the prototypes I chose CSS since I was thinking to show the results by the Internet, due to I have more background writing code on HTML, CSS and JS and because I only knew about Johnny Five and I didn’t know libraries like this one.

On the following figure you can see the technological framework I used. I wanted to make use of Arduino since there are multiples sensor options and because the interaction between the data and the font representation is more direct. However on following posts I will show the model applied to online open databases.

You can see the code on the GitHub page of the project.

I share some images of the project report: