Advanced Typography / Task 3
31.5.2023 - 5.7.2023 (Week 9 - Week 14)
Loke Yan Ling / 0344602
Advanced Typography / Bachelor of Design in Creative Media
Task 3: Type and Exploration
Task 3: Type and Exploration
In this task, we are required to:
Create a font that is intended to solve a larger problem or meant to be part of a solution in the area of your interest be it graphic design, animation, new media or entertainment design or any other related area not necessarily reflecting your specialisation.
End result: a complete generated font (.ttf) with applications.
or
Explore the use of an existing letterform in an area of interest, understand its existing relationship, identify areas that could be improved upon, explore possible solutions or combinations that may add value to the existing letterform / lettering.
End result: a complete generated font (.ttf) with applications.
or
Experiment. For your idea to qualify as an experiment it must be novel and unique — working with material that might be 3-dimensional, digitally augmented, edible, unusual, typographic music video or fine art.
End result: defined by student.
The end outcome could be
- a designed font and its application in the form
- format that it is intending to provide a solution to,
- a designed font that adds value to an existing use,
- an experimentative output that results in something novel and unique.
The work can manifest into any kind of format related to the issue being solved or explored or experimented.
Proposal
Fig 1.1 Proposal, Week 9 (31.5.2023)
Research
I proceed to go through idea 2, using the perler beads as experimentals to make a typeface. Based on research, pixel fonts developed from the invention of the computer and were based on the on-screen display format of pixels.
Fig 1.2 Typographic Design Form Communication 6ed-Rob Carter
Fig 1.3 Digital letterforms
Fig 1.4 Designed by Matt Woolman
As I review back all the book and resources provided by Mr Vinod to find supportive information, I found out the books provided in semester 1 have talk about rendering type on screen. Fig 1.1 show digital letterforms have decreasing resolution as the number of pixels is reduced. Four sizes of a hinted letter a are shown enlarged and at on-screen reproduction sizes on Fig 1.2. The smaller the point size, the less pixel square used.
Pixel font is popular on the internet because we all used to see it when we were playing video games. This typography is ideal for online designs that require text legibility at small sizes.
Vid 1 First trial, Week 10 (3.6.2023)
The first trial is came from the suggestion from Mr. Vinod when giving feedback on the proposal. An unstable rasterize occurs when showing the typefaces. The first trial showing the evaluation of phoenicians alphabet to roman, it is just a trial to help me visualize my idea to apply to experimental.
Fig 1.5 Digitize Exploration progress 1, Week 10 (3.4.2023)
Fig 1.6 Exploration 1, Week 10 (4.6.2023)
The second is creating pixel font typefaces with a minimum number of perler beads as text legibility at small sizes. The design was changed throughout the creation process to ensure that fewer perler beads were used to create it. The font is consistent for some alphabet but not for all. At this time, I feel a bit unsure and no direction on what I am doing. Mr. Vinod has point it out that this experimental should be more challenging, what I am doing in this stage is very easy that everyone can do it.
Mr. Vinod suggest the font should ascender, descender and so on that meets a typography basic requirement. Thus, I keep up my exploration with 8-8 square and with ascender descender, x - height and baseline. In my previous work and previous semester, I was mainly focus on sans serif font and there is multiple solution of pixel font in capitalize san serif font. Therefore, I was trying to develop a perler pixel font in serif and lower case, adding weight either on the stem or on bowl.
Fig 1.7 Exploration 2 #1, Week 10 (7.6.2023)
Fig 1.8 Exploration 2 #2, Week 10 (7.6.2023)
Fig 1.9 Exploration 2 #3, Week 10 (9.6.2023)
Fig 1.10 Exploration 2 #4, Week 10 (9.6.2023)
Fig 1.11 Exploration 2 #5, Week 10 (10.6.2023)
Fig 1.12 Exploration 2 #5, Week 10 (11.6.2023)
Fig 1.13 Exploration 2, Week 10 (11.6.2023)
Vid 2 Half Progression, Week 10 (11.6.2023)
With a rules not exceeding the 8 bits some of the letters such as "a", "e", "h" and "s" have to exceed the x-height guide to develop characteristic I want to add in. I found that the letterform looks good when they are individual but not look good when all placed together which is inconsistent.
I redesign the font by including the rasterize characteristic inside. I abandon the rules that i set by myself and concentrate to design a consistent and balance font in small capitals.
Fig 1.14 Exploration 3 progression 1, Week 13 (20.6.2023)
Fig 1.15 Exploration 3 progression 2, Week 13 (20.6.2023)
I did not satisfied with some letterforms 'm', 'w' and the number. Mr Vinod suggest that just make it wider and the exclamation mark should become narrow at the end.
Fig 1.16 Improvement 1, Week 13 (21.6.2023)
I find that the design font outside the board makes my work easier and quicker.
Fig 1.17 Improvement 2, Week 13 (21.6.2023)
Fig 1.18 Improvement 3, Week 13 (21.6.2023)
Fig 1.19 Final font, jpeg, Week 13 (22.6.2023)
Fig 1.20 Final font with guides, jpeg, Week 13 (22.6.2023)
In the process of designing my font, I became more clear about how I wanted to present my font in my application. As we all know, pixel fonts are currently mostly found in games and it also reminded me of coding. By following my mind, I remember a scene of The Matrix (1999). I really like the mysterious atmosphere bring by the movie. I would try to recover the scene by using my font in stop motion animation.
.png)
.jpeg)
.jpg)
Fig 1.21 Ironing process 1, Week 13 (30.6.2023)
Fig 1.22 Ironing process 2, Week 14 (30.6.2023)
Fig 1.23 Ironing progress 3, Week 14 (1.7.2023)
At first i was using 50x50 boards to build up the pixel font, but the rasterize part cannot connect together. I have several try on different temperature. So, i change to using 52x52 board to make the space closer and it works. The quality of the perler beads not that good that causes the outcome does not meet my expectation... Due to not enough of time, I have to continue my work. I only take photos on 22 letterforms which is only the letterforms used by the sentence from The Matrix.
Fig 1.24 Editing Video, Week 14 (3.7.2023)
There is a long work to do in editing the animation, estimated wrong screen size, arrange the order. Jittering of the screen, indisputable alignment, rasterization, I still like how it looks and would name it as Uncertain. There is a small surprise at the end of the video.
Vid 3 Uncertain, mp4, Week 14 (6.7.2023)
I feel the typing part are too long and boring but i also don't want to lose the rasterization part. I had tried speed up only the rasterize part, the process of showing the font being build up will not be that significant. I try with speed up the whole part and adding sound effect.
Vid 4 Uncertain with audio, Week 14 (16.7.2023)
The feedback are the video are too long and slow, the letterforms are small which do not show the rasterization part clearly. The suggestion are try more application with exists letterform (22 letterform) such as showcase of 3 or 4 letterform in gif, placing 3 letterform align and some short sentence. The progress is shown while in class.I really appreciate the guiding and feedback that let my work can be perform in such a playful and interesting manner which I really want to achieve it.
Fig 1.25 Compilation of animation progress, Week 14 (5.7.2023)
Fig 1.26 animation letterform 'a', Week 14 (5.7.2023)
Fig 1.27 animation letterform 'h', Week 14 (5.7.2023)
Fig 1.28 animation letterform 'm', Week 14 (5.7.2023)
Vid 4 Rasterize, Week 14 (5.7.2023)
I feel that the duplicate letterform can be replaced by other letterforms, that will bring more visual impact. The changes has been done in final submission. GIF will keep on playing which is what I want for the outcome.
Vid 5 Guess?, Week 14 (5.7.2023)
Fig 1.29 Minor progress improvement
Adding 2 or 3 words, total of 5 as gif, so it could keep on repeat. The timeline has shortens. However, the file is too big, the gif cannot been uploaded either in blog or google drive. Thus, I ues back the original one as gif.
Vid 6 '9 or 8', Week 14 (5.7.2023)
I feel that it can develop more, i try out with two version and i like the second version.
Fig 1.30 Develop Version 1
Fig 1.31 Develop Version 2
Vid 7 Pop, Week 14 (5.7.2023)
Same as the previous video, pop have develop in two version. I like the version 2 also.
Fig 1.32 Pop Version 1, Week 14 (6.7.2023)
Fig 1.33 Pop Version 2, Week 14 (6.7.2023)
I done the font presentation on Week 15 because I thought experimental doesn't need this part also. After sever reminder from Mr Vinod, I final realize that I should include the font presentation. Mr Vinod has provided a link and we are required to chose one as a guide.
Fig 1.34 Font Presentation Guide
I used the same color scheme from The Matrix (1999) black and highlight green to perform the fonts. The only part I refer from the guide is from page 14. As my colour scheme is made up of two colours, the contrast of the colours constantly alternating makes a visual impact. On the cover, I placed the main elements in the centre and the alphabet to the side, so that the details of the font could be shown and echoed in the centre. The font is also presented in a colourful interplay.
Fig 1.35 Cover Page
Fig 1.36 Font Presentation 1
In the font showcase on page 3, I like how the guide uses blocks to represent fonts. In the guide, it presents the fonts randomly and I wanted to add some meaning to it, something that represents me, or something that represents our side of the culture. That's when I thought I could put the abbreviations of the Malaysian states, I just picked 9 out of the 13 states to present. After finishing the placement of the fonts and colours, I felt it was a bit monotonous, so I tried to turn some of the fonts into 3pt lines.
Fig1.37 Font Presentation 2
On the last page of the presentation, I want to use sentences or paragraph. However, my fonts are not generated in ttf, so arranging them one by one into words loaded into sentences is quite challenging. Therefore, I decided to choose a short sentence to present my font. Since I designed my font with the intention of presenting a sense of uncertainty and mystery. While thinking about the core of my typeface, an idea popped into my mind, the prophecy of 2012. I'm sure many of you have heard of the prophecy that 2012 is the end of the world, and it kind of fits in with the plot of Matrix. In Matrix, the hero is the saviour who saves them from the end of the world.
After arrangement have been done, I noticed that background have taking much attention from the main elements. So, I decrease the opacity and increase the negative space to prevent it looks too crowded. The improvement made it much better. The compilation of font presentation is submitted in Final Task 3 submission section.
Fig 1.38 Improvement for Font Presentation 3
Final Task 3 Submission
Fig 2.1 Font Presentation, PDF, Week 15 (10.7.2023)
Vid 8 Final Uncertain with audio, mp4, Week 14 (16.7.2023)
Fig 2.2 Final animation letterform 'a', GIF, Week 14 (5.7.2023)
Fig 2.3 Final animation letterform 'h', GIF, Week 14 (5.7.2023)
Fig 2.4 Final animation letterform 'm', GIF, Week 14 (5.7.2023)
Fig 2.5 Final Rasterize, GIF, Week 14 (6.7.2023)
Fig 2.6 Guess?, GIF, Week 14 (6.7.2023)
Fig 2.7 '9 or 8', GIF, Week 14 (6.7.2023)
Fig 2.8 Pop, GIF, Week 14 (6.7.2023)
Feedback
Week 9
Specific Feedback:
Someone have created a alien language in uppercase and latin language in lowercase. Thus, the typeface can type in two language in uppercase form at the same time. You can refer your idea 1 to this. For the idea 2, there is a project call "Disappointing Lego Flags (@LegoFlags) / " on Twitter within a limited size ratio, it is interesting because it is challenge and it is new. Do it in a creative way, this idea will be experimental. You should do something that excites you so can keep moving on.
Week 10
Specific Feedback:
Should add guide line such as ascender, x- height and descender. The font can have multiple variation refers to the others. Consider to redesign. Looks on the variations, stress, weight. After confirming how it looks like, then proceed to the experiment & application stage. Consider the space between the beads because they are in circle shape, what looks like in pixel will not exactly the same look like in perler beads.
Week 11
Specific Feedback:
Inconsistent has seen in the fonts, maybe increase to 16-16 squares to have a a detail and consistent stroke, either adding weight in vertical or horizontal stroke will be clearly seen. The current font are limited with 8-8 squares so there is not much things to explore. Can do more research on bold seri and study how it looks like.
Week 12
Specific Feedback:
looks consistent without looking the details. Just make the letterforms 'm' and 'w'' wider.
Week 14
Specific Feedback:
The progression of ironing are good, good to see it, but it does not shown clearly in application, try more. The video is too long, try on just focus on a few words then showing just few letterform rasterize together, not sentence. Keep the 6 letterforms rasterizing on the screen and apply same speed to all animation.
Reflections
Experience
I quite exciting having the opportunity to design fonts again with a deeper knowledge on typography.The challenging part is the limited time and unexpected situation to handle. This semester workloads are quite heavy. I also finally know how to apply consistency into fonts although Mr Vinod have said this since semester 1 (really having a slow minded to catch up), just using the same weights of stroke and bowls. I'm very happy that I finally catch up before this semester end.
Observation
Using the same weights of stroke or bowls have been create for last letterform will achieve consistency and also the characteristic should be shown in same pattern. Exclamation mark should narrow at the end. The bowl weight will become thinner when connecting to the stroke, only the curvature part have a heavy weight. Commar will have double length than the period.
Findings
Changing one pixel (beads) will affect the overall visual look of the font, like minor changes would change the way it looks on the font. Achieving both balance and visual look spending a lot of time. I did not did much reference and study and it causes some letterform such as 'x' and 'z' does not design well. Although I know how letterforms looks like, but when I build them up, it is another story.
Further Reading
Fig 2.1 Further reading book cover
Typographic Design Form Communication 6ed-Rob Carter
Fig 2.2 Unity in type font design
Unity of design in the type font (pg37)
Combining letterforms from the Times Roman Bold font (Fig. 2-26) creates a cohesive typographic design due to their visual similarities. The letterforms share common elements such as curves, verticals, horizontals, and serifs, resulting in a balanced and unified appearance. This principle of repetition with variety is a fundamental characteristic of well-designed type fonts, including Times Roman Bold.
Fig 2.3 serifs typeface
Historical Classification of Typeface (pg 39 - 41)
Serifs are distinctive elements of typefaces that offer recognizable features and can provide insights into their development. The featured serifs are the most commonly observed ones across various typefaces.
Fig 2.4
The Evolution of Typographic Technology - Digital Typesetting (pg 128)
1970s to present
Digital typographic systems use a grid-based approach to encode the shape of each letter using distinct points. The characters are stored as digital instructions with x and y coordinates on the grid. Higher resolution is achieved by using more dots or lines to describe the letterforms, resulting in smoother curves. The quality of letterforms is influenced by their digital resolution, which can be enhanced through hinting. Hinting preserves the unique characteristics of typefaces at different sizes, ensuring the optical integrity of curves, strokes, and serifs.
Comments
Post a Comment