06/10/2020 - 20/10/2020 (Week 7 - Week 9)
Fann Man Ling - 0344623 (BDCM)
Typography // Mr. Vinod & Mr. Shamsul
Project 2A // Font Design
FONT-DESIGN
INSTRUCTION<iframe src="https://drive.google.com/file/d/1rwG7jpPWjQnW7byT0RwHAf6ua7Ynsggy/preview" width="640" height="480"></iframe>
LECTURES
Week 7 (Feedback, Briefing and Demo)
This week we were given feedback on our Project 1 final work. After that, we were briefed on the first part of Project 2, which is font design. Our task is to design a new typeface with the letters " a i m e p y t g d o b ! , . ", and generate the typeface by using Illustrator and Font Lab/ Calligraphr. Apart from that. we were asked to dissect and analyze a typeface from the 10 typefaces given. In the class, he told us that we need to do 5 sketches before digitalizing it, Then, the lecturers showed us a demonstration on how to digitalize our sketches by using Illustrator. In the demo, Mr. Vinod explained some information that we need to know when designing a font. Finally, we were asked to came up with five sketches within the given time, and received the feedback based on it.
Week 8 (ILW - 1 hour Feedback Session)
This week is independent learning week so we don't have an actual class, but Mr. Vinod had one-hour rapid feedback session for those who wanted to consult. Aside from that, he posted the following instruction in our Facebook group, which is to finalize our work in the form of design with the text "I am a type god, obey me!" in A4 size.
Week 9 (Progress Check & Feedback Session)
This week we need to show the lecturers of our poster design with our created typefaces, then to receive feedback in finalizing it.
I choose to dissect o, e , a of Bodoni because I like its classiness.then study the font carefully by analysing its anatomical parts through dessecting it
Fig 1.1 : Dissection of letter 'o' (06/10/2020)
Fig 1.2 : Dissection of letter 'e' (06/10/2020)
Fig 1.3 : Dissection of letter 'a' (06/10/2020)
These are the rough sketches of my font design:
Fig 2 : Rough Sketches (16/10/2020)
PROGRESS
When I designing this typeface, I mainly took reference from College font Fig 3.1. It really inspired me as it got that geometric slab look what I enjoy most. Additionally, I noticed some nuances like the curve of g, o have to overshoot the X-height and so forth by study the sample picture Fig 3.2
Fig 3.1 : College font Fig 3.2 : Reference
Then, I started working on digitalizing it by using Adobe Illustrator:
After placing the shape in the line accordingly, I united them by clicking the 'Unite' option in Pathfinder and adjusted its corner radius to round the corner.
Fig 4.1 : Using 'Unite' option in Pathfinder.
Fig 4.2 : Adjusting its corner radius.
In order to make it more sophisticated, I used 'Add Anchor Point tool ' to add some necessary point there, so that I can use 'Direct Select tool ' to drag the path in a way to give a minor changes to the corner. Fig 4.3 : Using 'Add Anchor Point tool ' .
Fig 4.4 : Using 'Direct Select tool ' to drag the path.
Then, I used the 'Anchor Point tool ' to round the corner.
Fig 4.5 : Using the 'Anchor Point tool ' .
Fig 4.6 : Done rounding the corner.
For the letter 'g' and 'o', I ensured they have overshoot.Fig 4.7 - 4.8 : Letter 'g' and 'o'. (17/10/2020)
This is the first result that came out:
Fig 4.9 : Draft 1 (17/10/2020)
Then, I used Calligraphr to make my font for actual usage.
Fig 5.1 : Placing the designed letter into Caligraphr (opened via AI) (17/10/2020)
This is when I use the font that made by using
Caligraphr in my poster design, but unfortunately it caused an obvious distorted pattern to the font.
Fig 5.2 : Poster draft 1 (made via Caligraphr) (17/10/2020)
During the feedback session, regarding to the poster Fig 5.2, Mr. Vinod suggested me to add a very small tail to the 't' and change the thickness of the bar of 't', he then told me that I should make changes on my comma design and advised me to redo the work by using Font Lab 7. Mr. Shamsul also told me to use 'Helvetica' for the font and author name below.
After done placing the shape in the line accordingly, I redid the process that shown above which is using Pathfinder's unite and group the 't' with its bar. After that, I rounded its corner with consistent number.
Fig 6.1 : Unite the 't'.
Fig 6.2 :Using 'Direct Select tool ' to round its corner radius.
Then, I changed the thinness of the 't' bar and add a short tail to it. Besides, I redid another comma design.
Fig 6.3 : Changing the thinness and adding short tail to 't'.
Fig 6.4 : Using 'Add Anchor Point tool', then using 'Direct Selection tool' to resize its tail. (20/10/2020)
Next is further processing my font typeface in Fontlab.
Fig 8.1 : Adding letters in Fontlab.
Fig 8.2 : Metric Window in Fontlab
I did some kerning and letterspacing, especially with the 't'.
Fig 8.3 : Tracking in Fontlab
I decided to name my font as Falaxy bacause I wanted a name that is easily to be remembered. Thinking of perhaps through modifying some noun, the word 'Galaxy' suddenly came into my mind, so I decided to replace its 'G' with 'F' which taken from my surname.
Shown below is the poster before feedback:
Fig 9.1 : Poster before feedback (20/10/2020)
Shown below is the poster after received feedback which stated above Fig 6.1:
Fig 9.2 : Poster after feedback (21/10/2020)
I realized that there was an awkward space between letter 't' and 'y' , 'o' and 'b', so I fixed it again to perfect it. Moreover, I did letterspacing between the letter 'e' with '!' as I felt there was too close to each other. Shown below is my final version:
Fig 9.3 : Final Poster design (21/10/020)
FINAL WORK:
Fig 10.1: Project 2A_Final Font.jpg (Falaxy)
Fig 10.2: Project 2A_Final Font.pdf (Falaxy)
Fig 11.1: Project 2A_Final Poster.jpg
Fig 11.2 : Project 2A_Final Poster. pdf
* Basically, I improved both final works by:
- Redesigned the comma ‘,’.
- Added a small tail to letter ‘t’.
- Previously used Calligraphr to design, after feedback I changed using Font Lab 7 to create my font.
- Did letterspacing and tracking to the final poster.- Changed the author name in the poster to "Helvetica".
FEEDBACK
Week 8
Specific Feedback: Mr. Vinod advised me to remove the hook thing at the top of my every character that I've designed.
Week 9
Specific Feedback:
Mr. Vinod and Mr. Shamsul pointed out some issues that I should make amends on:
Fig 12 : Feedback from Mr. Vinod and Mr. Shamsul
- The font name and author name should use 'Helvetica' font, it could be placed in alignment of the text. - Make sure it's 300 ppi when exporting the final work in JPEG format.
- Add a very small tail to the 't' would be better as well as changing the thickness of the bar of the 't' as it should follow the general thinness of stroke.
- The comma ',' is horrible.
- Use Font Lab 7 instead of Calligraphr as it distorted the typeface.
REFLECTION
Experience
At first, it was quite hard to come out my own font design, as there are many nuances and rules that I have to pay attention to. Not only that, it's vital to ensure the font design is consistent. They really distressed me when designing it.
Observation
Eventually, I learned the pattern in designing the font after studied and did analysis about the genaral anatomy and a particular typeface, such as there's an overshoot for letter 'g' and 'o', the stem of the letter 't' should not exceed cap-height, but only exceed a little X-height, and the exclaimation mark '!' should reach the cap-height. Other than that, I noticed an interesting thing of designing the font which is an slightest change to a serif or tail in the letter can create a whole different persona.
Findings
In general, this is a great and useful experience for me to learn design my own font and I think it's cool to use my own font in typing out a text. Through this project, I gain a better understanding of using some features and tools in Adobe Illustrator which I really appreciate as I can make use of them in my other project as well. Most importantly, I learned to be more cautious to every details in regardless of designing font or other project's work, because I often need to scale the text down and up to check if everything fits. Just like Mr. Vinod said in the class, "never trust your eyes" and "the evil in the details", I strongly believe only be careful with all the details can you make a good design.
WEEK 8
I came accross this interesting article from Medium.com when I looked up Bodoni in Google.
Basically, this article is telling about the history, the use of Bodoni font family, and the anatomy of a classic Bodoni type.
For the history part, Bodoni was created by Giambattista Bodoni (1740-1813), who ruled the world of publishing in the late 1700's. He came out this typeface out of those traditional calligraphy style that dominated the print press business when he took ouver his family printing business.
He was saluted as the modern type by many as this modern font (Bodoni) is characterised by its elegance and flexibility and interestingly it remained the most populat type until the mid 19th Century.
'' Massimo Vignelli, a famed Italian designer, praised the type as being one of the six necessary fonts to be used. “Bodoni is one of the most elegant typefaces ever designed”
The only typefaces you need — Massimo Vignelli
For the purpose of Bodoni typeface, it can be largely used for display and headings due to its timeless style. You can tell it has been a favourite of most fashion brands and upmarket magazines, such as Vogue, Calvin Klein and Gucci.
Bodoni’s timeless style has served Vogue for over 100 years
However, Bodoni is not often favoured as body text. This is because of the 'dazzle' effect that the Bodoni font letters have in a small point size. The 'dazzle' will reduce the readability of the text.
Fot the Anatomy of Bodoni part, there are 3 key traits that differentiate Bodoni from other typefaces:
Firstly, is the high contrast between its thick and thin strokes. Secondly, is the abrupt or unbracketed serifs used across all the Bodoni fonts. Lastly, the characteristics of the vertical axis and the horizontal stress creates overall geometry and balance to the Bodoni font.
<iframe src="https://drive.google.com/file/d/1vBtBSG_HqcNTzaQEmKYJGWJFHDTCkNgA/preview" width="640" height="480"></iframe>
WEEK 9
In this article from Studio Kayama, I learned the 5 fonts that add credibility and professionalism to scientific research.
General speaking ,choosing the right fonts can affect how the scientific research is recieved. I believe this is useful for me as a typeface user or even more as a designer to know to apply the right typeface in my future work.
The first, is Arial. It is the most common typefaces for the last 30 years. It is an easy-to-read font in small and large blocks of text, so it's especially nice for figure labels and legends. To get a better result, the font size should be at least 8 points.
The second, is Helvetica. It looks great on both print and on screen.
The third, is Baskerville. It is a serif font, and generally serif fonts are better suited for print. This font works best when used in long blocks of text and it would be better results to keep the font between 8 and 14 pts. Plus, this font looks dignified, so use this for the important professional occasions-award ceromonies, recognitions, etc.
The forth, is Caslon. It is a serif font (with tails), and is best used in blocks of text. Like Baskerville, keep the font between 8 and 14 pts for the best results. Using this in a report or an application would be a good places.
Lastly, is Garamond. It is a great font to be used in long process such as textbooks, dissertation and theses. Keeping it at 9 point is optional.
<iframe src="https://drive.google.com/file/d/1MIOBLS5KYfkN4uVyt5ZYBKVA9lZT8FCu/preview" width="640" height="480"></iframe>
*Further Reading of Week 10, 11, 12 are on another blog post (Project 2B).
Comments
Post a Comment