Minimal Wim

A grid-based typography experiment based on the work of Wim Crouwel

scroll down

Wim Crouwel was one of the pioneers of Dutch graphic design

And is best known for his grid-based typography

He passed away on 19 Sep 2019

In honor of him, we made a little experiment

We wondered how small our grid could be for an entire alphabet

And asked ourselves

how to program a

complete

alphabet

in a minimal

3x3

grid

Let's figure it out.

the minimal wim building block

we'll start with a square

and then divide it into 9 cells

you can slowly open cells horizontally

see how it resembles an "h"?

or open cells vertically

this looks like an "a"

each cell can have 4 states

0: no cell
1: full cell
2: open vertically
3: open horizontally

(the right and bottom cells are always resized)

131
111
131

221
121
111

we can also stretch its grid

and close the spacing

and even make some corners

for one or more sides

or round ones

We have now determined our design system

Each letter has 9 cells, of which each cell has 4 states

this means you can store the entire alphabet in 59 bytes.

This base64-encoded string of those 59 bytes is all you need to recreate the alphabet:

pZVQZVaQVBZVZaVaYQZp VdVdqVVBBVdZdQQVV99V ddVdVZVQZVBVwwapVVMM ddVBdV99VdEddVEpaVA=

def

ghijk

lmnopqrs

tuvwxyz

1234567890

By adjusting its properties, you can make font variations

corners : 1010 c.factor: 100% openness: 085% stretch : 000%

thin

Sphinx of black quartz judge my vow 1234567890

corners : 1111 c.factor: 100% openness: 010% stretch : 000%

round

Sphinx of black quartz judge my vow 1234567890

corners : 0000 c.factor: 000% openness: 015% stretch : 050%

high

Sphinx of black quartz judge my vow 1234567890

corners : 1111 c.factor: 100% openness: 015% stretch : 050%

gemstone

Sphinx of black quartz judge my vow 1234567890

the font properties can be animated as well

Stretch

scale

Wobble

Turns out, a minimal grid system can be quite versatile :)

Minimal Wim

Thank you.