One of the coolest things I received this Christmas was TYPuzzle - a unique system for people to explore, design and animate bitmap letter forms. Created by Ian Mitchell Graphic Design and Illustration Programme Leader at Liverpool School of Art and Design.
In the early 80's I had a pink panther sliding tile puzzle. It was a 4x4 tile grid and I thought it was epic the first time I put his face together - the second time I knew exactly where and how to slide, how to unscramble and decode - the novelty was still there, but the challenge was gone.
Fast forward 30+ years to December 2016; I squealed with delight to discover the sliding tiles format reimagined as a typographic design tool. TYPuzzle encouraged me to create as well as problem solve.
TYPuzzle is a beautifully constructed typographic game consisting of sliding black and white tiles (on a 5x5 grid) that can be reordered to design any Roman letterform. It is the latest outcome of a research project developed by Ian Mitchell which explores the potential for a restricted modular system to design and produce animated typography; and the use of a haptic design interface to encourage experimentation with typographic forms.
The prototype system I received is fantastic. Each time I sat down to write this post I became distracted playing with it. Challenging myself to create condensed character sets, or to create a letter or a word in a faster time than previously, to improve the curves on a bowl, or open up a counter form. It is a fun and stimulating design interface to use.
Modularity is fundamental in letterform (and typeface) construction, be it humanist with the regular strokes of a pen or the pressure and movement of the hand, or engineered precision with geometric or bitmap systems, the modular elements which provide consistency.
The system exploits two characteristics of bitmap and modular typefaces: With each slide of a positive or negative tile, the user demonstrates the potential for a restricted modular grid system to produce visually cohesive yet varied typographic forms.
The project was originally developed as an installation for the Type Motion exhibition at FACT (the Foundation for Art and Creative Technology) in Liverpool which encouraged visitors to participate in the design and production of type. An animated typeface and Opentype font were then produced using outcomes curated from the TYPuzzle system. The (free) font is available for download here
Subsequently, Ian developed the handheld version of the system I have been playing with. There are a few of these prototypes available to buy and instructions which show those of you keen to make your own here
I was excited to read that there are plans to develop an App which will challenge people to design and submit digital characters from the system to expand the Opentype typeface!
For me, as well as seeing the potential for grid-based type design, the notion of this analogue moveable pixel, stimulated ideation for my letterpress typesetting outcomes (that are constrained by moveable types rigid vertical, horizontal arrangements). I was excited to contact Ian and here more about his research and how TYPuzzle developed.
Hi, Ian - firstly huge and heartfelt thanks for sharing your work and for giving me a new medium for sensory play with type. I love it!
Can you tell us a little more about the type motion event and your first TYPuzzle installation?
Type Motion was a major exhibition at Liverpool’s Foundation for Art and Technology (otherwise know as FACT). The main exhibition showcased the use of moving typography in cinema, artists films, title sequences, advertising and music videos. FACT has strong links with Liverpool John Moores University, so their curators were keen to collaborate with staff and students from the Art and Design School, and for obvious reasons, the programme that I lead – Graphic Design and Illustration. FACT have a lab space that often features spin-off public engagement events connected to the main exhibition. I submitted a proposal for the Lab that turned into the first TYPuzzle installation. One of my main research interests has been been how non-print media or technology such as moving image and digital interactivity can be the driver for typographic experimentation and whether this actually influences changes to the formal qualities of letters. I saw the opportunity to develop a project that explored these research questions but in a very accessible and public way. My proposal pitched that the installation would allow visitors to the main exhibition to engage directly with the subject of the exhibition in a unique and entertaining way. They would be able to design type in a simple and controlled manner by playing with the puzzle. Whilst do this they would also produce animated sequences without realising it, which I’d turn into moving type that could be played back in different environments with the gallery space.
And as part of the exhibition, you translated the TYPuzzle outcomes into a range of media, video, animation formats as well as a dot matrix LED light system - how did the technology inform and support the research?
The most technical problem for the installation was how to capture the interactions. I felt there were two options. One was to record the position of the tiles using electronics hardware and software such as Arduino.
The other was to use motion capture features available in software such as Isadora to capture movements through real-time video.
Both options were outside of my technical know how and I could see strengths and weaknesses of both approaches from a UX point of view. In the end I went with the Isadora option because I knew an ex-colleague, Sam Meech, who was something of an expert in using it, and he was interested in helping me develop the project. Without Sam's input the installation would have never happened. Once I’d built a table top version of the tile puzzle, we set up the system using an animation rostrum camera and Sam got to work on designing the software. He developed a programme to capture video when it detected motion stopping, rather than starting. This was achieved by comparing the live video stream with a stored image of the puzzle not in use. Any difference detected prepared Isadora to capture, and then when this comparison dropped below a threshold (in other words there were no hands or arms in shot and everything was still) capturing was triggered. We wanted to system to be intuitive as possible, with as few interaction procedures or instructions as possible. So all people had to do was move their hands away from the puzzle each time they wanted to capture an image. Although we felt this was quite an elegant solution we quickly discovered the system was fairly unstable. Really we should have tested the system more rigorously before the exhibition. Instead I had to use the exhibition as a testing ground, although this did work quite well within the “laboratory” context of the FACTLab. The limitations of the system and possible solutions are documented on the project website. During the exhibition I was receiving very short bursts of QT movies of people’s interaction via dropbox. I’d then take these movies through a process I’d developed using AfterEffect to clean them up and convert them into appropriate formats for display on the project website and for the dot matrix animations. Fortunately the dot matrix LED screen at FACT used a 50x50 grid, so there was no problem scaling up from the 5x5 grid of the puzzle.
How have the users (both at the exhibition and of the hand-held protoype) embraced/responded to the haptic and sensory qualities of creation with TYPuzzle?
The installation at the exhibition lasted for two weeks, in which I ran workshops over each weekend, where I was onsite helping visitors use the installation whilst taking the captured footage and turning it into animations for the website and the dot matrix screen. The installation seemed most popular with either children or graphic designers, which is probably not that surprising as they are the most likeliest groups to appreciate an installation based on a toy about designing type. The puzzle definitely engaged people. Some children dragged their parents back to the exhibition after an afternoons shopping, which as quite nice. I did gather some feedback from users – one described it as "typographic Krypton Factor”, after the 1980s UK TV game show, which had an intelligence round that involved a 2D or 3D puzzle challenge – which I found quite apt. One unforeseen problem with the amount of engagement was that groups of people crowded over the puzzle obscuring the camera and subsequently the capturing of the interactions. I guess this links back to my response to your previous question and the limitations of the system that I discovered. Although the initial objective of the installation had been for users to participate in the co-creation of animated type, the exhibition had shown me that people were more interested in the challenge of designing or finding letters with the puzzle, and that maybe this should be the focus of any future iterations of the project.
TYPuzzle builds upon previous research projects including; Life of Type (2013), Letterformer (2004), Chinese Whispers (2000) and Squarepusher interactive touch screen toy (1999), what is it about the inquiry into animation and interactivity of type that first piqued your interest?
I guess this interest originates from the inspiration for the Chinese Whispers project, which dates back to when I and a small group of friends set-up what we referred to as a typographic collective after graduating. This was an era when the typographic experimentation of Emigre and Fuse still exerted a tremendous influence over graphic design and typography. We had all been using Fontographer to design all sorts of “experimental” typefaces and we grouped together to publish the results under the name of Beaufonts – a pun on ostentatious haircuts and beautiful fonts. Many of our fonts were quite irreverent and ugly. In fact Eye Magazine referred to us as a jokey type collective in a round-up of new type foundries. Many of us were also working in the emerging digital field – at that time it was called multimedia. When we met we would discuss our day-jobs (digital animation, interactive design, the internet) along with our love of type. One idea that sprung up during these discussions was in direct response to something that Jeff Keedy had said in an article in Eye Magazine about whether it was possible to predict what all the characters of a typeface would look like from seeing just one. We had the idea to design a collaborative typeface through a process of the old parlour game Chinese whispers or consequences to test Keedy’s hypothesis. We liked the idea, but at the time couldn’t work out an effective or efficient way of realising it. Then when I started teaching I used my research time and my basic knowledge of Director’s programming language lingo and Director’s new internet plug-in technology Shockwave to bring the idea of designing a collaborative typeface to life.
I designed a type design application that could run within a browser interface that allowed users to submit their designs to a database and see previous designs. The designing of the letters used a modular grid but rather than just black squares users could select different shapes (curves, diagonals etc) that could all interlock. This was all informed by my own love of modular design systems and systematic approaches to making art and design. The project had some success.
Five typefaces were created by over 180 people from 23 countries around the world. As far as I’m aware it was one of the first of these collaborative design projects on the internet and certainly the first type design one. Subsequently I was asked to repurpose the application as an interactive installation for an exhibition about type at Moderna Museet in Stockholm. I then started exploring the feasibility of designing typefaces with motion features – animated typefaces basically. I produced one called Bambino, which had a geometric cursive quality to it. It was extremely laborious for me to produce and ultimately killed-off my interest in this for a few years. Then a few years later I began reflecting on this work and I started questioning the whole validity of typographic experimentation. I had been asked to review a book called Shapes for Sounds by Timothy Donaldson that charted the history and development of each letter of the roman alphabet. In the book a comparison is made between the dramatic changes in form of each letter before the invention of printing, and the subsequent inertia of developments since – despite the subtle variations in form made incrementally over the past 500 years in most cases their underlying skeleton (their ductus), has never really changed since the invention of printing. Donaldson referred to this as type having been “frozen" by printing. This made me question whether it was valid to continue to propose new forms for letters or uses for the alphabet when history suggested that these endeavours were ultimately futile. The book did cite those notable moments of genuine experimentation with the form – which Donaldson referred to as “disobedience” and this led me to consider what conditions inspire such disobedience – the obvious being technological advancement. If print “froze” the alphabet, could digital melt it? So I started exploring animation and interactivity again.
On your website, you describe how you discovered 11 as being the optimum number of positive 'pixels' to create letterforms within the 5x5 system. What did your experimentation process look like? And what did you learn in your experimentation that inspired or surprised you?
My process looked very basic. A sketchbook and graph paper basically. I should say that I wasn’t exactly methodical with this experimentation. I already new that at least a 5 by 5 grid was needed to draw all the letters of the alphabet in a very basic fashion without consideration for upper and lower case, consistent x-heighs or descenders. I just started drawing bitmap letters made up of specific amounts of pixels. Quickly I realised to test some particular amounts on letters that would either need a lot, or just a few pixels to form them. This would hopefully uncover a middle ground or optimum number. I had thought of using some form of digital process to help with this, but in some ways what I was trying to produce – the puzzle, should in fact support this research into an optimum number. For instance the app version that I’ve started working on, will allow users to use different numbers of positive pixels and alternative grid dimensions. I’m sure complete alphabets can be formed out of 9 or 10 pixels too. The resulting typeface might look a little odd, but could be quite fun.
What advice do you have for other designers experimenting with modular type systems?
In general modular type systems are an accessible way to get into the design of typefaces. They offer the designer the classic test of being creative within set restrictions. My word of advice would be to be aware that they do have their limitations and you can’t really craft a typeface that conforms to the accepted traditions of optical balance using just a modular system. I’ve always struggled to design humanist typefaces with beautiful curves. Experimenting with modular type systems has allowed me to explore other ideas beyond traditional type design.
TYPuzzle prompted me to consider the flexibility in the rigid and modular elements in my own work. It has been really inspiring to play with! What are your goals for the project? What do you hope to discover or achieve (either for yourself or for the design community)?
Well the project has been on and off for the two years now. My initial concern at this stage is quite modest – to make what I have done so far more public. I’m aware that I need to be more active promoting the project. It’s great to get such a positive response from you as it does motivate me to continue developing the project. The prototypes are quite expensive to produce and more importantly they are very laborious to make. Ideally I’d love to produce more of them, but this would require finding a way to get them manufactured in bulk.
Unfortunately I discovered that these puzzles are only produced as 4x4 grids or 3x3 grids by toy manufacturers. I hope that by getting the project in more peoples hands more people will contribute designs – either through the prototype version or an app version that I have just started working on. I’m developing the app version with colleagues from LJMU’s Applied Computing Research Group. The plan is that the app will be more of a game. It will challenge people to design and submit letters, record the number of moves it takes for people to design letters and give feedback on how unique or popular a submitted design is. The app will also feature a variety of grid formation to be “ played” so there’s potential to investigate further what is the optimum number of pixels to design complete alphabets. If this all works I’d hope to produce an Opentype font family featuring all the designs that will be distributed back to the public. During initial meetings, my colleagues from the Applied Computing Research Group saw a more educational angle for the project if the app was used within a classroom context. The plan is to test the feasibility of the system as a pedagogic tool for different age groups. From the design communities perspective I don’t think we will discover anything hugely profound about type design or modular design systems but I’d hope that the TYPuzzle will give people who use it a lot of enjoyment. There is potential for it as a some kind of designer’s toy or it might just renew an appreciation for bitmap typefaces and modular design processes.
With the app coming and the prototype plans available for people to make their own TYPuzzle, How can people get involved in your research? And/Or how can people connect/stay up-to-date with the project? #TYPuzzle?
At the moment everything is documented on a project website at http://graphics-lsad.co.uk/typuzzle, including the results from the exhibition, a very basic typeface that can be downloaded, and source files, plans and instructions to make their own version of the prototype. I try to keep this website updated with major developments.
Otherwise people can stay up-to-date by following me on twitter or instagram – both @graphics_lsad. Instagram also has a hashtag #typuzzle which I’ve underused so far, but I’ve noticed you’ve used. Thank you.
Finally, did you ever have a sliding puzzle as a kid? If so what was depicted on yours?
Yes I did. I can’t remember exactly what it depicted. I think it was an animal or a maybe a landscape. It definitely was’t the number puzzle ones that I discovered when I first started looking for the puzzles again. They looked way too hard.