TYPOGRAPHIC

Typographic was a two-week project for us to focus on typography design and pair it with code. The brief also focused on the actual use of text, typography and how we could alter the conventions.

WEEK 1

LAUNCH

We launched the project and started by looking at some references in typography design and history. Then we started a workshop on text within Processing. We flew over the basics of text input and looked at different possibilities of layout, animation, display, and distortion.

IDEAS & RESEARCH

I always wanted to create a font and this project was the perfect opportunity to do it! So I started by looking at different experimental font foundries. I was also very interested in variable font and the basic theme of distortion and movement of fonts.

DIA Studio
Voir cette publication sur Instagram

Save the date! Oct 29. @dia_mitch will be speaking The Center for Future Publishing @cffp_geneva The lecture will discuss education and research projects of our studio. Especially the new things brewing at @headgeneve @head_kinetic. More info and invites coming soon. #headkinetic #graphicdesign #kinetictype #kinetictypography #kineticidentity #branding #designresearch #motiondesign #typography #typedesign

Une publication partagée par DIA (@dia_studio) le

I managed to figure my project idea quite quickly as I did a lot of research even before the project itself as typefaces always interested me.
My main idea for this project was to create an unconventional variable font. Instead of tweaking the weight or width I wanted to modify some specific parts of each letter, like the 'A' mid bar. I wasn't sure how I could involve code yet, but I then figured out that I could create an interface for it.

I looked at the already existing variable font interface and got inspired by SchultzSchultz (german agency) type experiment. I loved the unconventional way they had to modify the font.

TypePhase

Universal Sans

SchultzSchultz

From the research I did, I started to sketch some fonts and went on with a kind of restriction by using the same component in almost every letter possible.


I liked the process of creating a font out of existing shapes like this font.

And it inspired me to restrict myself with this curve.

I continued with this path and managed to create different characters and 2 different versions sometimes.
I found the whole process very intriguing and motivating. It is very hard to decide how a font should look like.




WEEK 2

WORKSHOP

The second week we started off with Tim's talk and workshop on kinetic typography with processing. It was really interesting to see what his process was to create such a dynamic and powerful kinetic motion type.
I loved the workshop and spend multiple hours tweaking the code and ended up with super interesting outputs.

It was so nice to have Tim along for this project, it was a great opportunity to learn new processes and new tools in processing. He was also super helpful in troubleshooting our issues the next day in the studio.

FONT PROTOTYPING / CODING

I continued the font making process and focused on the A to be variable as a start. It was a crash test sort of.


After his workshop, I started to explore the possibilities of making an interface with processing, but apparently we can only use P5.js to create these kinds of variable font it has to involve CSS as it is the only meaning of altering font settings.

I still managed to see a "practical" example of the variation with a plugin on my font software. It allowed me to play with the Weight axis of the font.

Sadly it didn't work out as it should, but interestingly it gave a very compelling output.

Here are different states of the alteration.




I still continued to create the font (only 8characters due to the short time)

PROBLEMS ENCOUNTERED

So apparently the partial variable font I exported wasn't compatible with the P5 sketch sadly. I tried multiple ways to bypass this by changing the calling method but it didn't work... At least I understood the reason for it and know I could fix it later (not in the project timeframe though).

Here's the test I made using a P5.js sketch from CodePen.

I had to rapidly change my direction for this project. I re-read the brief and was interested in making a video/print output as a redirection of my idea.

FINAL ARTWORK

As I understood my interface wasn't working due to my font compatibility I experimented with different things in processing. I took old sketches from last year as well as the ones we did during Tim's workshop.

I thought it would be really interesting to mix them up. I tried it, it kinda worked. The sketch was struggling to render everything. It took literally 3min to render 1 frame.

So I continued to explore different paths and tried to reconsider my idea. It was only on Tuesday I figured out what I wanted to do.

I remembered this idea of contextualizing fonts and text we talked about the last few days. It inspired me to create an artwork that will contextualize the font I started to create. I had the idea to create a poster to "promote" this new font. It is one of the new means to let know the world this font is available to use.
I still wanted to create something visually compelling.
I started to take the 'A' weird variations as source images and input them in the processing sketch using Tim Rodenbroeker kinetic method.

I took this sketch and tweaked a lot of variables and structures to get this final output. I then exported 8 different videos with 8 steps of the 'A' shape/weight variation.

Having these 8 steps of the font variation I put them up on a poster. I created the canvas on photoshop

and then added the 8 videos with after effects.

Here's the final result :


REFLECTION

I reflected a lot on the actual conventions of font making today. I did a lot of research about the theory of font making and looked at a lot of foundries. I found some really interesting experimental fonts.
From this filed of research, I started to look at the theory of the movement of type. How they could be distorted, moved around a canvas. Will the type express something different from its original form.

It was also very interesting to reflect on the context of the font. Where is it displayed, what's its purpose?
I think I wanted to create an unconventional font

FUTURE IMPROVEMENTS

I hope I can manage to fix the compatibility issue with my font and of course finish it.
I would love to create a clean full variable font with a working interface to modify it. I think that's a long term goal. I might develop a serie of posters in semester one.

OVERALL THOUGHTS

I liked this project because the perfect reason for me to finally start creating a font. I found interesting the brief to involve code for the final artwork. It was very interesting to see the difference between everyone's outputs. The brief was really interesting to work on.
It was still a bummer this was a short project, I would have loved to focus more on the theory of font making.
I also would have liked to have tutorials during this project, it would have helped me maybe to question different things I haven't thought about.
It still was a great project!

BONUS / IMROVMENT

I continued to design the font and was planning to finish it during the spring break. Sadly because of the COVID mess, I couldn't finish it in time for the changed summative assessment deadline (26th of March).
Though here is the current progress of the font. There are two styles, the first one is almost complete for letters. the second one though is yet to be completed. This doesn't mean that I'll stop designing it, my goal is to finish it in the upcoming month.

First style

Second style

I'm also learning type design by myself, so it was quite hard to get to know the process. Now I feel a bit more comfortable with the tools and theory, I feel I can deliver a high quality and finished product next month! Which is really exciting.
The next step after this would be to make it variable, which isn't long but will require a lot of testing etc.