Launching Typography
This project is an exploration into the topic of type, examining aspects of type face pictorially, graphically, structurally and interpretively.
How can text appear on screen as well as in a physical tangible form? Can graphical choices inform meaning or further definitions within language?
I'm keen to investigate a few things in the coming weeks, one being how text is used as a vehicle for communication, particularly in relation to instructions. How could a words meaning or definition have a knock on effect to how the text is displayed graphically on screen e.g the words inflate, spin, chase, trap or disappear?
The second idea I'm toying with is to investigate type face and font, particularly how this could effect readability. The evolution of graphic design and type has lead to an estimated half a million fonts, a single character alone has such variation, so I'm eager to look at how each letter of the alphabet could be displayed in these many font families. I could take this to a physical resolution by creating and printing a pdf document holding 26 chapters, each dedicated to a single letter in its numerous graphical formats.
Research
Kiel Mutschelknaus created the above type tool called space type generator. He is an educator at The Maryland Institute College of Art in the graphics department and right now is actually working on around 30 type generators. I love the use of rotation on this to create these abstract shapes, its almost hypnotic and you can create so many variations. The sliders and UI are designed really well to allow you to easily and in realtime see the physical effects of your actions. Overall the sliders and graphical on screen text manipulation is what I love about this example the most.
Key Ideas From This.
-
Sliders with customisable components
-
To graphically use words like rotation or wave and form a deeper connection to their definitions
Groteskly Yours is a St. Petersburg-based type foundry that was founded in 2019 by Eugene Tantsurin. The videos above are taken from his instagram page where he has hundreds of explorations into type. He can manipulate the letters as vectors and in one of his videos he created a mesh of the letter then made the wire frame mesh take on the behaviour of a wave, it was cool to see the effects that motion had graphically.
The example of the TWIST above is what I was thinking about at the start of this project and it was good to see how he has managed to realise this concept. By doing what the word literally says he has made the text twist by using a rotate function. I like as well the use of grids when it comes to text, having the word displayed as a multiple to me seems more pleasing to the eye.
New York type face graphic designer. Her work is bold, bright, fun and she looks at placing large type in constraining transparency which is the aspect I like the most.
New York motion graphic and AR designer. Her computational work is innovative and looks at fun interactive ways to bring textures and physical aspects into her digital work. I really enjoyed her example of an interactive brush typeface which was created with p5.js and has fully customisable features like rotation, colour and shape.
New Swiss Design house specialising in their own Swiss Type Design. The bold and heavy type face design is enhanced by motion graphics across the instagram feed and their animations are really what drew me into researching these font families more.
Ty is a Canadian graphic designer and all round well versed digital creator, specialising in animation and the creation of NFT artwork. He uses mainly the adobe suite to make these videos, including illustrator and after effects.
Visually his grid structures and composition are rich. I admire the use of colour and 'chaotic' illustration style.
The individual movement in each cell creates a nice visual composition, its busy on the eye but I like how you have to dart between each grid square to catch whats going on.
The individual movement in each cell creates a nice visual composition, its busy on the eye but I like how you have to dart between each grid square to catch whats going on.
The link above is to this designers instagram portfolio which is probably the most active account for recent work. Italian web designer specialising in the adobe suite and creative code. I especially liked again the grid layouts and it was interesting to see how this designer approached the subject of type.
Sketchbook
isometric...
Looking at my research examples I'm noticing how drawn to grids and perspective I am. I started drawing and messing about on paper with isometric grids and it may be something worth investigating for final project resolutions. Could perspective add to the visual appeal of the pdf or could having the flow on screen across an isometric grid be an option as well?
Coding Work
From week 1 workshops I've learned a lot to do with how text and Processing can be a powerful tool. It was good to brush up on knowledge after the break and remind myself of things like how a String() is formed, how to create an array[] and various text editing the Leading etc. We did start on some more complex examples which I screenshotted to follow along with, these included how to animate your text along the x,y,z axis, making aspects of text interactive with key press and mouse actions and importantly how to import large .txt documents to allow the computer to interpret the words as data.
Illustrator
Illustrator just released the update with a long awaited improved 3D window, this means it's ten times more simple now to create and render your text in a 3D workflow without ever leaving illustrator and you export as a full .png with a background or you can single out your text as an asset for export.
Trialing the workflow with 'SPIN'.
To test out if my idea of importing 3D text from illustrator worked I tried it out on the word SPIN. Illustrators new update lets you dive straight into a 3D workspace with easy editing tools to extrude graphics and text. You can extrude through bevel, plane or inflate etc. For this, I chose to inflate thinking for when it spins it could look balloon-esque. After you extrude it gives the option to edit your materials and lighting which was great for adding some directional lights.
The image below is the exported .jpg rendered in Illustrator, however I didn't upload the whole image to Processing but instead exported the text as an individual asset on transparent background.
Step two was then uploading the asset into the data folder in Processing. I had to mess about for some time with the settings to make sure the image was resizing properly and wasn't majorly pixelated.
'Do what you see' = Spin / Disappear / Hide / Reveal / Grow / Inflate / Multiply / Shake
The famous technique of using place holder text to encapsulate the on screen graphic technique you are demonstrating e.g the word SPIN will spin and rotate on screen.
I've been playing around on different workflows to get my final output. Combining applications like Illustrator, Processing and finally compiling in Premiere Pro to create a video piece.
Step three was editing in Processing and playing around with the functions I was learning about in workshops. I really took a liking to the 3D ideas from the workshop in this experiment, by using the Peasy cam and some rotate() functions I quickly started to get some interesting visual results.
Spin was really starting to spin!
Step four was loading in a camera and exporting a video after creating the rings made of the 3D spin word file. Some were set to rotate at the frame count and some of the rings were stagnant but looked to be moving when the camera was rotating.
Below is the final cut video of the best spin sequence.
Process
The Idea
My idea is based on a fairly simple premise, what you see is what you get. Through embracing instructions and looking at the text in an interpretive manner, I hope to use a series of words where the textual definitions will inform the overall form of each word.
"SPIN"= text rotation
"DUPLICATE"= text multiplication etc etc
It's been an idea executed by many, incorporating the placeholder text into what they are trying to accomplish visually. I am going to create something similar but I will be drawing on my graphic design influences that I have been researching like Ty Dale, New Glyph and italiano.jpg to create a visually rich composition in grid format.
The Realisation
Final outcome I want create a moving image of some kind, most likely a video file. Once again drawing upon my graphic design influences, I hope to lay this all out in a grid format to create a more interesting composition.
Creating a grid is something I did in the final stages. I imagine I could've done this all within Processing, but for me it will be more simple to export each sketch as individual .mov files at a 1920x1080p size. I came across this simple tutorial that will help me with the maths and measurements needed to position the grid in the video editor.
I'm thinking any grid borders can just be added as an overlay on the final video, I could create this in either illustrator or photoshop.
display() {
fill(125,200,10);
rect(this.x, this.y, this.diameter, this.diameter); //shapes on show
fill(26, 100, 20);
rect(this.x + 5, this.y + 5, this.diameter, this.diameter);
fill(10, 200, 50);
rect(this.x + 10, this.y + 10, this.diameter, this.diameter);
fill(30, 220, 75);
rect(this.x + 20, this.y + 20, this.diameter, this.diameter - 25);
fill(5, 160, 45);
rect(this.x + 25, this.y + 25, this.diameter + 20, this.diameter);
fill(125,200, 120);
rect(this.x + 30, this.y + 30, this.diameter, this.diameter + 80);
fill(25,240, 220);
rect(this.x + 35, this.y + 35, this.diameter + 50, this.diameter);
fill(15,220, 160);
rect(this.x + 40, this.y + 40, this.diameter - 10, this.diameter);
Creating a Shiver With a Jitter()
Using 4 Exports
To Create The Grid ...
The North East is a design studio located in Tokyo that has an online market place specialising in graphic design books. I had a look through this site a lot as it had some great references for layouts, fonts and colour palettes.
This was one of the books I particularly enjoyed, 'Vacant Spaces' by Michael Meredith and Hilary Sample. Based around a photography series of vacant spaces in New York, the pair have come up with some aesthetically pleasing designs embracing image and type.
I'm particularly focussing on grid structures with graphic design and how typeface is displayed on grids.
