26.09.2022 - 29.11.2022 / Week 8 - Week 13
Yung Siew Weng / 0339847
Yung Siew Weng / 0339847
Advanced Typography / Bachelor of Design (Hons) in Creative Media
Task 3 / Type Exploration & Application
LECTURES
Ad typo #1 - 5 are completed in Task 1 : click here to review! ❤
Task 3 : Key Artwork
MODULE INFORMATION
AD Typography Task 3 - Type Exploration & Application
INSTRUCTION
For Task 3, we get to dictate our own project. We are to either design a typeface to solve a problem in the area of our interest (Graphic Design, UI/UX, Animation, Entertainment Design or any other) or explore the use of typeface in our area of interest or experiment a font that is novel and unique, working with material that might be 3- dimensional, digitally augmented, edible, unusual, typographic music video or fine art. The end outcome would be the designed typeface in its application - any kind of format related to the issue being solved or explored: animation, 3D, print, ambient, projection, movie title or game title, use of different material etc.
EXPLORATION
//I spent sometimes on developing & figuring the proper idea towards my typefaces.//
At the very first, we are instructed to prepare a proposal for at least 3 ideas to develop.
#Proposal (Version 1) :
Fig 1.1 Project Proposal 1, PDF (week 9/ 26.10.2022)
Feedback _ Week 9 / 26.10.2022
//As I was not feeling well on the day, I take my peer's feedbacks as reference which more applicable to mine//
General Feedback :
Don't select an existing typeface, as existing typeface is such like tracing but not in the terms of you designing the font.
Although I don't have specific feedback on my proposal, I still develop and try out more possibilities of the proposal, checking if it works for my final project.
#Proposal (Version 2) :
Fig 1.2 Project Proposal 2, PDF (week 10/ 31.11.2022)
Feedback _ Week 10 / 02.11.2022
General Feedback :
The full process from the first pitch to the end of creating the typefaces should post in your e-portfolio to prevent any copyright or plagiarism issue. You had to work backwards, think on where to use the typefaces. For example, the newspaper headlines typefaces.
Specific Feedback :
- For the idea #1, UI/ UX typefaces basically considered as screen based typefaces such as the hyperlinks. But if you create a bold shape and proposed as UI/UX typefaces, it might not so applicable in this sense or if you might having intention on using it as a heading only.
- For idea #2, existing typeface is not allowed, you had to build your own typeface from the ground by yourself.
#Proposal (Version 3) :
//not the final version//
I gave it a quick refresh after getting the feedback, but finally determined that the issue was misleading words used. I did the amendments on specific the idea (where the typeface should be involved).
Fig 1.3 Project Proposal 3, PDF (week 10/ 02.11.2022)
After some exploration of the three (3) potential ideas and the feedback I received, I came up with an idea to further explore idea #1 "Roundish".
#Rationale
As for idea #2, my idea of using existing fonts as reference to refine are allowed. Also, for #idea 3, since it's been digitised and considered, it seems like I'll probably having lesser exploration as it considered as my thought in previous semester. In fact, in its current state, I might have a new design concept. To reduce anxiety and confusion as well as make my life easier, I believed that using #idea 1 as my final ideation was the most appropriate decision.
This idea is particularly get randomly from a workshop. Also, as I like something ruled and guided, but obviously seeing my past assignment doing something more in "Art Deco" style, I felt that I might take the opportunity to create a typefaces that can be used in varieties. The idea was to use in varieties which may applicable for all screen based design such as poster, packaging, headings of website etc.
Fig 1.4 References (week 10/ 01.11.2022)
At the very first of the exploration, taking the letter O and C as the reference, I start to develop on the Caps Letter, checking on any potential on creating this typeface. In facts, the letter O and C was been explored during the workshop, which I felt that having the potential to further exploration for the full typefaces.
I spent a day exploring the typefaces and develop the digitalisation sketch on uppercase (a base version). Using O as a starting point, I developed several capital letters by using the family's traits.
Fig 1.5 Base Development Process #1, Uppercase (week 10/ 01.11.2022)
Without considering the possibilities and kerning, I created 23 uppercase letters and finally have the notion and excitments of continuing to develop the typeface.
Fig 1.6 Outcome of Base Development #1, Uppercase (week 10/01.11.2022)
Fig 1.7 References & Progress (week 10/ 02.11.2022)
Fig 1.8 Full Progress, Outline Development #1, Lowercase (week 10/ 02.11.2022)
Fig 1.9 Outcome of Outline Development #1, lowercase (week 10/ 02.11.2022)
To check how the font looks in words/phrases, I took some sketched letters to test the results.
Fig 1.10 Testing (week 10/ 02.11.2022)
As I doing the progress development in class and having opportunity to show the development to Mr. Vinod after class for a feedback.
Feedback _ Week 10 / 02.11.2022
Specific Feedback :
I like the idea of letter A (fig 1.2), but might can having some refinement. For the lower case, higher your x-height. As you are creating a type in bold, you can make the adjustment to having a high x-height so that the type not showing too squeezed.
After receiving the feedback, I did some amendments on the x-height. Taking the lowercase "d" as a reference for x-height, I created a blue line (represent the x-height of the version 1) and red line for the x-height of version 2 (after amendment) :
Fig 1.11 x-height adjustment (week 10/ 05.11.2022)
Continued by the exploration and development on the amendments, the full process and the outcome :
Fig 1.12 Development, adjustment (week 10/ 05.11.2022)
I even compared the version 1(before the adjustment) and the version 2 (after adjustment) ; orange represent the before version, black represent the version 2.
Fig 1.13 Outcome, adjustment (week 10/ 05.11.2022)
After, I continued the exploration on the leftover letters to develop the full outline sketch for the alphabets.
Fig 1.14 Development Process (week 10/ 05.11.2022)
Fig 1.15 Outcome, Full Outline Base, Upper- and Lowercase (week 10/ 05.11.2022)
Feedback _ Week 11 / 10.11.2022
Specific Feedback :
It don’t look like you did a great job by post rationale the idea, you should really think backwards about that. You need had a specific product / brand to achieve the task requirement. Basically, what you need to do is to find a things (whatever it is) that your typeface can solved it. For the letterform, the arc stroke of the lowercase ”j” seems a bit too long, can ended it a bit more earlier.
After, I continued the exploration. I checked the consistency between the letter before developed into glyphs.
Fig 1.16 Adjustment on Letter C (week 11/ 10.11.2022)
Following after letter, I continued the progress on designing the numbers.
Fig 1.17 Development Process, Numbering (week 11/ 11.11.2022)
Taking "Arial Rounded MT Bold" as a guide to develop the numbers and yet finalise the first version of digitalisation.
Fig 1.18 First exploration, Numbering (week 11/ 11.11.2022)
Using glyphs as the tools to adjust for the consistency and testing whether which components is the most suitable in the family. The development process :
Fig 1.19 Adjustment on Glyphs 3 (week 11/ 11.11.2022)
Fig 1.20 Full development on numbers, Glyphs 3 (week 11/ 11.11.2022)
Since Glyphs 3 having some features to make the letter more consistent, I used the features in Glyphs 3 to re-adjusted the alignments and developed on the letters. For example, the Letter H.
Fig 1.21 Development Process, Letter H , Glyphs 3 (week 12/ 14.11.2022)
Fig 1.22 Exploration in Glyphs 3 , Uppercase Letter (week 12/ 14.11.2022)
And I did some comparison on the outcome. For example, letter X :
Fig 1.23 Development Process, Letter X , Glyphs 3 (week 12/ 14.11.2022)
Then, continued by I did a final touch-up on the letter :
Fig 1.24 Development Process (week 12/ 14.11.2022)
Fig 1.25 Before vs. After (week 12/ 14.11.2022)
Fig 1.26 Uppercase letter outcome, Glyphs 3 (week 12/ 14.11.2022)
Continued after the uppercase letter, I continued the exploration towards the lowercase. Using the base outlines that created, I did some adjustments and construction on glyphs to achieve the consistency and the best outcome.
Fig 1.27 Proof of exploration in Glyphs 3, lowercase letter (week 12/ 15.11.2022)
I reconstructed some of the letter that I felt a bit weird/ not consistent. Some of the development process (fig 1.28) :
Fig 1.28 Development process (week 11/ 11.11.2022)
As we are instructed to show progress on the next day, and yet I haven't finalised on what should I aimed to solve by using my created fonts. So, I finalised the current state for letters and numbers (except k, e, s, x).
Fig 1.29 Latest outcome on Glyphs (week 12/ 15.11.2022)
Then, I exported the fonts and did some explorations on the "potential issue to solve". The direction that I figured and searched is the brand that having round feelings, but still guided.
Based on the module information, "explore the use of the typeface in your 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 typeface. End result: a complete typeface generated (.ttf) + applications.
At the beginning, I having the idea to use the font for cute game as my created fonts having the characteristics of bubbling and somewhat present a "cute" atmosphere. But, when I doing the researches and exploration, I been attracted by a brand "Domino's". I felt that my fonts having the potential to replace its original fonts. To be mentioned, when I first arrived Semenanjung M'sia, I thought the "Domino's" is a business company in which it having a very “commercialise" fonts. So, I did some further research regarding the company brand and I finalised my rationale on selecting "Domino's" as my options for this particular types.
#Rationale of why Domino's?
Fig 1.30 Domino's Pizza, Rationale (week 12/ 15.11.2022)
The rationale of believing the brand "Domino's" is suitable for my types is due to the facts of the logo; the logo was design with round and rectangle (guided) with having a same notion with my created typeface. I did a comparison on the original font (left) and my created typeface (right) to determine the potential of improvement towards the brand.
Fig 1.31 Domino's Pizza, Rationale (week 12/ 15.11.2022)
And second, based on the research on Domino's Pizza, the brand had used "Futura" as their font on the branding. In facts, Futura might had been overused by many brands such as Nike, Amazon, Ikea furniture tag, Cisco, Dolce Gabbana and Gillette, Omega ... It is not saying Futura is a bad font, but I believed that Domino's pizza should have their self-identity to represent themselves in the market. For example, own typefaces.
Then, I experienced on some potentials (compare the original vs. Roundish) :
Fig 1.32 Futura vs. Roundish (week 12/ 15.11.2022)
Fig 1.33 Domino's Logo, Futura vs. Roundish (week 12/ 15.11.2022)
Fig 1.34 Test font, Typeface design for Domino Pizza (week 12/ 15.11.2022)
Continued after the testing, I think of some potential towards the applications. I did an experiments, inserting the created typefaces to the Domino's Pizza box. And, I felt my creation of the typeface is truly suitable for a "brand new Domino".
Application ideas : Packaging, Poster ...
Fig 1.35 Application experiments (week 12/ 15.11.2022)
Feedback (week 12 / 16.11.2022)
Specific Feedback :
The typeface works for Domino's Pizza, but don't forgot to put the registered trademark. What you can do is create headlines for Domino's Pizza such as social media post about "Buy one Free one..". And, you need to keep in mind that you want to showcase the use of your typeface, as much as possible.
After the feedback, I continued develop into the punctuations and the leftover letters.
Fig 1.36 Development process, leftover letters (week 12/ 17.11.2022)
 Fig 1.37 Outcome, Full letters and numbers (week 12/ 17.11.2022) |
After "digitalise" the full version of roundish, I figured that the letter 't' was not so consistent in terms of the font family. In order to achieve the consistency, I added a tail for the letter.
Fig 1.38 Before vs. After, letter 't' (week 12/ 18.11.2022)
 Fig 1.39 Outcome, Glyphs 3 (week 12/ 18.11.2022) |
Fig 1.40 Development Process, Punctuations (week 12/ 18.11.2022)
Because my idea was to tackle the typeface difficulties on Domino's and there are copyright and trademark symbols included in the brand, I proceeded to build on some symbols. And, I used Glyphs' features to create the symbols.
Fig 1.41 Development Process, Symbols (week 12/ 18.11.2022)
Fig 1.42 Outcome, Punctuations and Symbols, Glyphs 3 (week 12/ 18.11.2022)
After the full digitalisation, I departed my journey to Glyphs, to make minor adjustments & refine by using its features. I used the features based on the tutorials, by refining all the edges and coordinates and also, I used the filter; green harmony to balance the roundness.
//I did not took the full progress of every letter, but take an example of letter M. I adjusted and refined on the small minor details that can be noticed through AI.//
Fig 1.43 Minor adjustment on glyphs (week 13/ 23.11.2022)
During the adjustment, I figured that my letter "S" for both uppercase and lowercase was seems to be weird. In facts, when I developed this letter previous, I was quite struggling on created this. I spent days to re-build the letter to get the most suits outcome.
Fig 1.44 Original digitalisation on letter "S" (week 13/ 23.11.2022)
Fig 1.45 Amendments attempts (week 13/ 23.11.2022)
Both or (more attempts) was not satisfied by me and I took some feedbacks from my peers on deciding which position that I should be go deeper (the recommendation was the attempt #2, which more likely as the family"). Then, I continued the adventure :
//I managed to have more attempts besides, but I just recorded the final here//
Fig 1.46 Development, Letter 'S' (final) (week 13/ 24.11.2022)
Fig 1.47 Full outcome, after development of letter S (week 13/ 24.11.2022)
Continued by, I realised that since I proposed the idea for Domino's Pizza, I should have a "$" symbol to represent the price.
Fig 1.48 Development of the dollar symbol, '$'
//Average side bearing was around 35 pt. I used the letter H as my master to control the full type.//
Fig 1.49 Comparison on before and after side bearing (week 13/ 25.11.2022)
After, I copied the basic kerning text from Garage Fonts and start my journey on "kerning". The proof of kerning;
Fig 1.50 Screen Recording, Proof of Kerning (week 13/ 27.11.2022)
After complete the typefaces, I exported as Truetype (.ttf) and started to design for the applications.
#Application Exploration
Since my idea for the typefaces was designed for Domino's Pizza. I had the notions on creating some applications that applicable for them.
Having the notion on combining Domino's Pizza logo and pizza illustration to a cute animation for billboard. Below fig 1.51-1.52 are the ideation towards the design thinking. I used the punctuations of the typeface to create the facial expression (indicate the typeface are variety-used).
Fig 1.51 Ideation of illustration (week 14/ 28.11.2022)
Fig 1.52 Ideation, Application #1, Billboard (week 14/ 28.11.2022
Fig 1.53 Outcome, Application #1, Billboard (week 14/ 29.11.2022)
Fig 1.54 Outcome, Application #1, Billboard without illustration (week 14/ 29.11.2022)
Then, I figured that there should have a ketchup sauce as Domino's Pizza is a fast food brand. To replace the "tomato", I used "Domatos" to represent the identity of this is tomato sauce from Dominos. To be mentioned, the Domatos was build from the lowercase o with the punctuations * (mentioned under fig 1.54) :
Fig 1.55 Ideation of Application #2, ketchup (week 14/ 29.11.2022)
Fig 1.56 Mockup Outcome, Application #2, ketchup (week 14/ 29.11.2022)
Continued by, since Domino's Pizza's signature is Pizza. I did created a pizza box as one of the application from the typeface.
Fig 1.57 Ideation & outcome, Application #3 PizzaBox (week 14/ 29.11.2022)
By taking the references from the previous project brought by Domino's Pizza "The official food of everything", I having the idea on creating postcards. Using the basis of the Domato (application #2) and pizza concepts (fig 1.58) to create postcards
*Both pizza and Domato were build from the typeface except pizza dough.
Fig 1.58 Ideation, Application #4 Postcards (week 14/ 29.11.2022)
Fig 1.59 Ideation, Application #4 Postcards (week 14/ 29.11.2022)
Fig 1.60 Mockup Outcome, Application #4 Postcards (week 14/ 29.11.2022)
The most important to create for the overall of this is the Domino's logo. The rebrand of its branding from Futura to Roundish.
Fig 1.61 Mockup Outcome, Application #Logo Sign (week 14/ 29.11.2022)
Fig 1.62 Mockup Outcome, Application #Cap (week 14/ 29.11.2022)
FINAL OUTCOME , AD TYPO TASK 3 @ TYPE EXPLORATION & APPLICATION :
//As I am having too much version proposal, I did a revised version that indicate the idea of Domino's Pizza//
Fig 1.63 Final - revised, Final Project Proposal (week 14/ 29.11.2022)
#Type Exploration :
// For non-commercial purposes. The font is protected by copyright //
Fig 1.64 Final Outcome, Roundish Regular - Uppercase & Lowercase
(week 14/ 29.11.2022)
(week 14/ 29.11.2022)
Fig 1.65 Final Outcome, Roundish Regular - numbers & punctuations
(week 14/ 29.11.2022)
(week 14/ 29.11.2022)
Fig 1.66 Final Outcome, Roundish Regular , PDF (week 14/ 29.11.2022)
#Applications :
| Fig 1.67 Final Outcome, Application #Billboard (week 14/ 29.11.2022) |
Fig 1.68 Final Outcome, Application #Billboard (week 14/ 29.11.2022)
Fig 1.69 Final Outcome, Application #Ketchup (week 14/ 29.11.2022)
Fig 1.70 Final Outcome, Application #Pizzabox (week 14/ 29.11.2022)
Fig 1.71 Final Outcome, Application #Postcards (week 14/ 29.11.2022)
Fig 1.72 Final Outcome, Application #Logo Sign (week 14/ 29.11.2022)
Fig 1.73 Final Outcome, Application #Cap ( (week 14/ 29.11.2022)
Fig 1.74 Final Outcome, Application, Full (week 14/ 29.11.2022)
FEEDBACK
WEEK 9 / 26.10.2022 @ Proposal
General Feedback :
Don't select an existing typeface, as existing typeface is such like tracing but not in the terms of you designing the font.
WEEK 10 / 02.11.2022
@ Proposal
General Feedback :
The full process from the first pitch to the end of creating the typefaces should post in your e-portfolio to prevent any copyright or plagiarism issue. You had to work backwards, think on where to use the typefaces. For example, the newspaper headlines typefaces.
Specific Feedback :
- For the idea #1, UI/ UX typefaces basically considered as screen based typefaces such as the hyperlinks. But if you create a bold shape and proposed as UI/UX typefaces, it might not so applicable in this sense or if you might having intention on using it as a heading only.
- For idea #2, existing typeface is not allowed, you had to build your own typeface from the ground by yourself.
WEEK 10 / 02.11.2022
@ Development
Specific Feedback :
I like the idea of letter A (fig 1.2), but might can having some refinement. For the lower case, higher your x-height. As you are creating a type in bold, you can make the adjustment to having a high x-height so that the type not showing too squeezed.
WEEK 11 / 10.11.2022
@
Development
Specific Feedback :
It don’t look like you did a great job by post rationale the idea, you should really think backwards about that. You need had a specific product / brand to achieve the task requirement. Basically, what you need to do is to find a things (whatever it is) that your typeface can solved it. For the letterform, the arc stroke of the lowercase ”j” seems a bit too long, can ended it a bit more earlier.
WEEK 12 / 16.11.2022
@
Development
Specific Feedback :
The typeface works for Domino's Pizza, but don't forgot to put the registered trademark. What you can do is create headlines for Domino's Pizza such as social media post about "Buy one Free one..". And, you need to keep in mind that you want to showcase the use of your typeface, as much as possible.
WEEK 14 / 30.11.2022
@
Development
Specific Feedback :
Upper and lowercases are excellent, Numbers seem a little diff in proportion especially when compared to uppercase. But overall good job! Complete. Competency : Mastering - Outstanding.
REFLECTION
EXPERIENCE
Comparing this experience to the prior assignment this semester, I found it to be far more engaging. At the same time that I was having a great time developing the typeface, I was also happy that I had the chance to create a complete typeface. In truth, I was having trouble coming up with ideas at first, but fortunately, I was given the chance to attend "my first variable workshop," which indirectly benefited me, where I explored some concepts to pursue. It comes as a surprise to me. Additionally, I have truly benefited from having the licence and understanding of glyphs since it gives me the freedom to modify in any way.Thus, the type exploration may be seen as a nice summation of the full typographic experience, which truly enhanced our future.
Comparing this experience to the prior assignment this semester, I found it to be far more engaging. At the same time that I was having a great time developing the typeface, I was also happy that I had the chance to create a complete typeface. In truth, I was having trouble coming up with ideas at first, but fortunately, I was given the chance to attend "my first variable workshop," which indirectly benefited me, where I explored some concepts to pursue. It comes as a surprise to me. Additionally, I have truly benefited from having the licence and understanding of glyphs since it gives me the freedom to modify in any way.Thus, the type exploration may be seen as a nice summation of the full typographic experience, which truly enhanced our future.
OBESERVATIONS
Throughout the adventure, I saw that various people had varied perspectives on creation. For example, I, however, intend to directly digitise rather than keep idea sketches on hand. As opposed to thinking more about whether the freehand sketches might be worked on for digitalization, I believed that instant digitization could help me consider the possibility of developing. Since I'm not a really good artist overall, I actually prefer to begin the digitalization process instead of having some preliminary sketches done before digitalization. However, what I realised from my observations was that regardless of which tactics you decide to go with, pick, or utilise, employ the ways that you enjoy or prefer to achieve the best results. This reminds me of a quote: "Remember, this is your outcome at the end of the day."
FINDINGS
Throughout this experience in Task 3, I discovered the significance of documenting the process. After hearing a presentation from our senior, I saw how crucial the process was for additional investigation or even for recollection with regards to the techniques we employed to get an output. Also, Mr. Vinod claims that keeping track of our progress will help us avoid getting into trouble with copyright or plagiarism. As such, I believed that these findings will be considered beneficial for my future in the design world.
FURTHER READING
To deepen my understanding of the typography phenomenon, I used Grilli Type (GT Academy) resources posted on Instagram as a reference to construct my punctuations :
#Period
Fig 2.1 Period
The shape of period is related to the dot on the "I" but should be slightly larger. Heavier fonts requires heavier punctuations. A period should be large enough to indicate a pause in the text, but not interfere with the flow of reading.
#Comma
Fig 2.2 Comma
The comma is roughly the height of two stacked period. The comma's head should be slightly smaller than the period.
#Colon/ Semicolon
Fig 2.3 Colon/ Semicolon
The colon and semicolon are stacked punctuations marks. A period at the x-height and a period or comma on the baseline.
#Exclamation Mark
Fig 2.4 Exclamation Mark
The exclamation point is the same height as the capital letters. The dot should be slightly smaller than the period.
#Question Mark
Fig 2.5 Question Mark
The question mark is the same height as the exclamation point, with overshoot to compensate for the rounded top.
#Quote
Fig 2.6 Quote
In the heavy fonts, the quotes should be 5-10% smaller than the comma so as not to appear too dark. Quotes are positioned near the cap height and at the baseline. Round quotes should overshoot slightly.
#Guillemets
Fig 2.7 Guillemets
The design and angle of the guillemet influences spacing, so it should adapt to the width of the typeface.
#Parentheses
Fig 2.8 Parentheses
Parentheses isolate information from surrounding text. So the stem should be slightly thinner than the O. They are placed around the cap-height and can extend to the descender. They should work with both upper- and lowercase.
#Brackets
Fig 2.9 Brackets
Brackets are straight and adhere to the same proportions as parentheses. The stem width is slightly thinner than H.
#Bar
Fig 2.10 Bar
The bar is used with braces in mathematics, music and computing, so it should also share their proportions.
#Hypen/underscore
Fig 2.11 Hypen/ underscore
The length and weight of the hyper depends on the proportions of the font. The em dash and underscore are half the width.