Wim Crouwel (1928-2019), is a beloved Dutch graphic designer whose pioneering work spans decades. As an agency with its roots in graphic design, our Creative Director Wimer Hazenberg wished to honor his legacy. This resulted in Minimal Wim, a grid-based typography experiment inspired by Crouwel’s work.
Graphic design pioneer
Wim Crouwel is one of the most recognized Dutch graphic designers, especially known for his grid-based designs. His work has received wide acclaim, winning awards throughout the decades from all over the world. He co-founded the first ever multi-disciplinary design agency in 1963, Total Design which is still running today. If you want to find out more about his work, why not check out the Stedelijk Museum Amsterdam’s exhibition, WIM CROUWEL: MR. GRIDNIK running until March 2020.
How to program a complete alphabet in a minimal 3×3 grid?
Our experiment looks to find out how small a design grid could become with which to create an entire alphabet. We begin with a simple square, which we then divide into 9 cells. These cells can be manipulated to open up horizontally and vertically. You can also leave out cells, or keep them in the grid. This means that each cell can have a total of 4 states.
With each letter consisting of 9 cells with 4 possible states, we can define all the letters of the alphabet in just 59 bytes. By strategically opening cells horizontally or vertically, you can create a readable font. All text in Minimal Wim is rendered using this design system.
Going further, you can also change the corners of cells, or the amount of which the individual cells open up. You can even change the dimensions of the underlying grid. All these options allow for entire new font aesthetics , like bold fonts, wide fonts or rounded variants. It’s basically adjusting a few variables.
Smooth scrolling experimentation
Developing Minimal Wim meant next-level smooth scrolling was needed, allowing for the seamless transitions between letters and font variations to truly show the value of our design system. We made the site using the Pixi.js library for ultra-fast rendering of rectangles. On top of that we built our own scrolling library and a sprite mechanism for static text. There are no graphical assets, what you see is all constructed from code.
In the end, Minimal Wim is a digital experience that simultaneously shows what we’ve made and how it was made.
