Space Type Generator & TypeType
Stumbling upon SpaceTypeGenerator, a kinetic type generator that allows to create animated text, was a pure dopamine stroke due to its uniqueness and simplicity in use. No need in diving deep into complex motion graphic software, all required is web access and your creative mind.
The story behind connecting with Kiel Mutschelknaus, the master of work behind STG, is plain: the excitement of playing with the tool was followed by realization that the range of fonts was quite limited. “Actually, how cool would it be to be able to use different typefaces…Or maybe even TT typefaces huh?”
Eventually, TT Bluescreens, TT Travels Next and TT Trailers caught Kiel’s eye the most and were used for Instagram posts experiments which you can see down here.
All that inspired TypeType to discuss with Kiel the idea of extending the typeface range, as well as his workflow, purpose, fonts and more:
How do ideas of generators come to mind? Do you already have a vision of the generator you’re about to create before starting? Or is it a spontaneous process every time?
Yeah, great question. These generates come from a number of different places. Most of the time they’re a riff off of a previous generator. I’ll have stumbled across some interesting, unintended motion or parameter in one generator and it’ll have the space, energy and potential to grow into a brand new version or variation. Or it’ll be a technique or coding lesson I want to learn and I’ll try to curtail it to utilise typography.
Other times I’ll be inspired by an interesting design or motion I see online. And as soon as I see it, I close the image or reference right away and try to work off of what I thought I saw rather than the actual piece. I find working from memory distills the potential or energy in the reference I had come across. And translating whatever I saw into code also unlocks lots of possibilities.
Why did you choose typefaces as the main element of the tool?
There’s a really great space to explore with type and code. I know just enough typography to get me in trouble and just enough code to be dangerous. I’m not a master in either field but by having a passing knowledge in each I’ve been able to carve out a compelling niche.
Type is so beautiful already and what contemporary designers are doing right now with challenging traditional structures of typography is so interesting. And it so happens that both those things work well in type and code.
You’ve earlier mentioned that you had to use a rough variable font created by yourself, something coded that was a series of lines with a stroke applied to it. Why did you start from this point instead of using the existing typefaces?
Ha! Great question. The genesis for my hard-coded, DIY variable font (which I call LoFi Mono), was because of technical limitations. It’s hard to animate the variable axis of a variable font in the code I’m using (p5.js and Processing). It was hard when I started STG and it’s still hard. So I decided to create my own type as a series of functions that draws the spine of the letter with vertex and bezier curves and apply a stroke to it. It may be overkill (though I don’t know a better way), but it allowed me to scale width and height disproportionately and maintain fairly pleasing letterforms. It was a ton of work and makes me a little self-conscious about using it as a solution, but I attribute that process for a lot of STGs early success.
How do you see the purpose of STG project?
I think there are a few different purposes. For me, it’s always been about learning. Can I make this in code? Can someone use it? Is it interesting to interact with? How can I make this an interesting, easy, and compelling experience? The purpose is to address those challenges and maybe have it play a role in design and typography discourse.
And hopefully for users the purpose is to provide a motion tool they can use in their work! I’ve had lots of designers message me saying it saved them a ton of time from learning to use other motion tools. Some visitors to STG aren’t traditional designers or motion graphics people and hopefully it’s a satisfying and interesting entry point for them into the field.
5 нейросетей и полезных сервисов для создания изображений
Знаменитая нейросеть, которая помогает делать невероятные картинки, при этом уметь рисовать не нужно.
▫️ Spline Design
Поможет сделать свою 3D-картинку. Есть библиотека элементов, а также можно импортировать свои изображения и работать с ними.
▫️ Space type generator
Подходит для создания необычной картинки из текста. Также он может сделать текстовую анимацию.
Графический редактор для поиска иконок и простых изображений.
▫️ Streamline icons
Плагин для Figma, который поможет найти красочные иконки. Вы сразу сможете их кастомизировать и применить в своем макете.
spacetypegenerator.com
What a wonderful place to play with text and to generate your own GIF! Some of these can be downloaded and used wherever desired. The brain behind this kinetic type generator is Kiel D. Mutschelknaus. He is a professor of design at Maryland Institute College of Art and a freelance designer based in Washington DC. Some of his work can be seen at https://www.behance.net/kielm and can be followed at https://www.instagram.com/kiel.d.m/
Here are few that I made:
Tyre Marks Piet Mondrian Tyre Marks II There are No Ends Criss-Cross Jumbled
Space Type Generator
I have found many interesting websites when creating my FMP video. One of them being Space Type Generator – it was a simple, easy way to add effects motion to type without using specialist software.
Here are some screenshot examples of experimentation within Space Type Generator, I haven’t used any of the clips in my final video as they don’t flow with the rest of the visuals and look out of place.
I can’t upload videos to my blog so view my showreel on my website to see some of the clips in full.
rachel-m.co.uk
