Type Design, Typography, Processing, Variable Type
Brief by
AUB - Self Initiated FMP
With this project i wanted to bring the concept of order and chaos as a reflection of the current climate into typography, allowing accessibility to the multitude of ways to convey a message visually. This was a part of a larger project "Change Generations" that provide resources and tools to create protest and activism media online.
This project was a response to the events of 2020. 2020 was chaotic with protesting and pandemics and personal mental struggles. I wanted to explore the idea that from the chaos eventually comes order. Protest and activism is the closest societal application of order and chaos I could think of. Protesting to restore order from corruption and chaos or bring chaos and disorder to an oppressive power. Examples of activism right or wrong have walked the line between these extremes. With the pandemic it has oppressed peoples tools for activism, this is the basis for this project, enabling access and resources for people to generate impact-full activism content online.
The rules and forms of the ordered font where made based on the golden ratio.
The ordered version of the typeface has three variable parameters; weight, roundness and slant. This flexibility allows the user to taylor the visual aesthetic to match the unique message and tone of voice. Try this version of the font, by clicking below . I experimented with chaotic tone of voice further by making a chaotic version of the typeface that works on one parameter. I first needed a way to distort the type in a chaotic way.
After experimenting with distorting a multitude of different ways I found that p5.js was the best tool to use to create a user interaction with the distorted letterforms. These experiments can be interacted with if this page is viewed on a laptop or desktop computer.
The next stage was to have the forms distort without interaction. I had make a flow-field, (based on a 3d Perlin noise) that gave a direction of travel for each point in the letter, distorting the letter exponentially over time. I would usually let the code run for about 6 seconds or when the letter reached a desired shape.
This gave me the two states of the letterform. Ordered and chaotic.
