Typography Task 3: Type Design and Communication
4/11/2024 - 16/12/2024 / Week 7 - Week 12
ChenYuhan / 0378131
Typography / Bachelor of Design (Hons) in Creative Media
Task 3:Type Design & Communication
LECTURES
Week 7:
Mr. Vinod summarized Task 2 for us and explained the requirements of Task 3 font design.
Week 8:
Independent Learning Week
Week 9:
After the self-study week, Mr. Vinod picked out several common misunderstandings in our font design and gave a unified explanation, followed by individual explanations for each person.
Week 10:
I learned in this class how to modify my punctuation marks. Adjust them and make them fit the design of the entire font.
Week 11:
After modifying the fonts, Mr. Vinod taught us how to use the software “Fontlab” to systematize our fonts.
 |
| Fig1.1,all lesson processes |
We first need to create a new font file. Before placing the font, we need to set the rules first, to ensure that the font position or size is not changed. Then we copy the letters or symbols in AI to each grid and adjust them accordingly. (Most of the time, this step is not necessary because you have set the rules in advance.) After completing the above steps, you need to adjust the letter spacing. I adjusted the margins of each letter according to the video and Mr. Vinod's requirements and made sure they were well preserved.At the end, I saved the original file and exported the font to ttf format and installed it on my computer, making it available for my free use.
 |
| Fig1.2,requirements |
Week 12:
Towards the end of the week, Mr. Vinod explained more details to us, such as the margin adjustment precautions in Fontlab. He also mentioned that we should make the poster without changing the font size.
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/13K1bGUQCjDVO9EjG_HnTEVAY7xbMRGxx/preview" width="640" height="480" allow="autoplay"></iframe>
TASK 3:TYPE DESIGN & COMMUNICATION
Week 7:
Analysis
Before I start, I need to analyze the letters h, g, b, and o. This will help me understand the structure of the letters.
 |
| Fig2.1,letter analysis |
I chose ITC font as the font for the analysis.
O:A perfect symmetry. In this font, it can be framed in a square.
H:A perfect left-right symmetry. But notice that its lower part is bigger than the upper part, so it is not symmetrical.
g:The upper part consists of a flattened "o", while the lower part is much more complicated.
b:The "o" part of b is not a circle, but an irregular ellipse.
Sketch
In the sketching part, we need to design three or more new fonts. I first familiarized myself with the use of the marker to make sure it would not suddenly change the size of the stroke.
 |
| Fig3.1,the font sketch |
1.The inspiration comes from Gothic and Cyberpunk fonts. I use bold to show its heaviness, and the corners are designed to be hard. I hope it can reflect a solemn and vast feeling.
2.Inspired by some lovely fonts. They look round and jelly-like. Compared to size 1 fonts, they are quite soft.
3.The design is based on calligraphy fonts. It looks very smooth and elegant. Its biggest drawback is that it is difficult to have uniform strokes because each stroke is handwritten without any rules.
4.The inspiration comes from the triangle. In this design, I tried to apply the triangle more thoroughly.
5.The inspiration comes from the neat black font. I designed each letter to be asymmetrical, or uneven, to make it more varied while keeping it in order.
6.Inspired by calligraphy. A wild cursive script. It will work well in situations where a bold font is needed.
Ultimately I chose font 1 for digitization.
Week 8:
I attempt to make my first digital attempt at my sketch.
 |
| FIg4.1,sketch1 |
Fig4.2,process1
 |
| Fig4.3,final1 |
I'm not satisfy with the digital result, I think I will learn more and modify it next week, or redo it.They don't look standardized or sophisticated enough.
Week 9:
Very good news! This week, Mr. Vinod explained to us in detail the problems that most of us encounter when designing fonts, such as the different sizes of letters resulting in different grids being occupied, and the fact that most letters are larger at the bottom and smaller at the top.
 |
| Fig5.1,process2 |
After the explanation, I chose to redo it in class.
The inspiration comes from simple fonts. The overall design is light and there are not too many strokes. (Pen tool, outline strokes have been performed)
As a serif-like logo, I added some interesting details below the letters.
 |
| Fig5.2,final2 |
After I finished designing the font, Mr. Vinod gave me a 1v1 tutorial, selected the font size 1 from my previous draft, and taught me how to digitize it correctly and accurately.
 |
| Fig6.1,process3 |
So, according to my initial idea, all the letters should be bold and hard, and their design should be regular. So I created them according to the rules.
I chose the all caps design.
Because it was hard to choose, I added some alternative letters at the end. (They are called alternatives because they look a bit like arrows, but they are actually "T", "I" and "G" designs.)
Fig6.2,final3
Week 10:
In this class, we learned how to make symbols like commas conform to font design guidelines. So I adjusted some of the symbols to make them more compliant.
 |
| Fig7.1,process4 |
I also adjusted the balance of the "s" to make it look more comfortable.
Week 11:
 |
| Fig8.1,FINAL |
I adjusted the design of the “#” so that the upper and lower lines are equal.
At the same time, we learned "Fontlab" this week. Through this software, we can systematize our fonts and export them into fonts that can be used.
 |
| Fig8.2,fontlab |
 |
| Fig8.3,fontlab letter |
 |
| Fig8.4,all letters |
 |
| Fig8.5,the distance |
 |
| Fig8.6,the font show |
Week 12:
This week we need to create a poster using the fonts we systematized last week. Please make it black and white and do not change the font size.
 |
| Fig9.1,poster1 |
Fig9.2,poster2
 |
| Fig9.3,poster3 |
Final Outcome
Font dowload link:https://drive.google.com/file/d/1KZqpdTNzyG7ynCjRhbMnYzvZ4Ze_0cLy/view?usp=sharing
 |
| Fig10.1,Screen Grab of FontLab process (side-bearings) |
.png) |
| Fig10.2,Final Type construction in Ai JPEG |
Fig10.3,Final Type construction Ai in PDF
<iframe src="https://drive.google.com/file/d/1MqPAPxmmK88P5kVCQTKfjj5bzJdRx-or/preview" width="640" height="480" allow="autoplay"></iframe>
 |
| Fig10.4,Final JPEG A4 white poster |
 | |
|
Fig10.6,Final PDF A4 black & white poster
FEEDBACK
Week 8:
Independent Learning Week
Week 9:
General Feedback:In this class, we learned in detail several key points when designing fonts: 1. Letters like "l" and "g" need to consider the problem of crossing the grid. 2. Letters like "s" are not exactly the same from top to bottom, but are smaller on the top and larger on the bottom.
Specific Feedback:I used the pen tool to digitize the lettering last week, but the results were not satisfactory. Mr. Vinod was very patient in teaching me and demonstrated it on my computer. I learned how to use tools such as repeat to ensure that the same parts of each letter are the same.
Week 10:
General Feedback:In this section, we learned how to create commas and periods. They are based on the design of letters, such as the "s" that determines the direction of the comma.
Specific Feedback:Mr. Vinod pointed out that the exclamation mark I designed was too sharp and did not fit in with the overall font design. He also helped me adjust the "s" to make it more balanced.
Week 11:
General Feedback:The font design using AI is basically coming to an end. I made some fine-tuning to the overall process, such as deleting unnecessary anchor points.
Specific Feedback:Mr.Vinod pointed out that my "#" was needed to ensure that the upper and lower lines were equal length. So I modified it.
Week 12:
General Feedback:One thing we cannot ignore when it comes to systematizing fonts is paying attention to the spacing. Fortunately, we can adjust the font spacing by referring to the picture posted by Mr. Vinod.
Specific Feedback:Mr.Vinod said it was great and he even gave me a thumbs up. So I could start making the poster directly.
REFLECTION
Experience: In this half semester of font design, I started from designing font sketches, then used AI to digitize fonts, then systematized the fonts, and finally made posters. This process was very new and challenging for me. The most difficult step in this process was to systematize the fonts, because I used the Windows system, which was different from the professor, so I spent a lot of energy and time operating Fontlab, but the results I obtained were worth it.
Observations:The most important thing in the entire font design process is to correct any minor mistakes you find! For example, I completed the design in AI, but found that a section was not connected, or there were extra anchor points, but I was too lazy to change it. In the end, I found that it was a more arduous task when I systematized it - because if you don't want to redo your font, you have to change it again.
Findings:The biggest gain for me is that I understand the whole process of font production. During this whole process, I became familiar with and mastered the use of AI and Fontlab software. For my personal growth, the biggest help is that I am more meticulous in my work. Design is a tedious and long process that requires many revisions. Compared with the time when I first entered school, I am obviously much more patient now.
FURTHER READING
 |
| Fig11.1,typo graphic de sign |
Week 8:
 |
| Fig11.2 |
Writing is the starting point of font design. Early letters were constructed using simple geometric shapes (such as squares, circles, and triangles). Tools (such as reed pens and stone carving tools) have a great influence on the font form, especially the thickness of letters and line changes.
Writing is greatly influenced by the times, but it is inseparable from graphic-centered design.
Capital letters were originally designed for stone carving, so the lines are very straight to facilitate carving. Lowercase letters are written with a reed pen and have more curves, which looks more natural than capital letters.
 |
| Fig11.3 |
Letter width is measured in "em", and designers use this unit to precisely adjust spacing. Tracking is particularly important for typography - a larger distance makes it appear open, while a smaller distance makes it look more compact. For example, if the word "Design" is tracked to a negative value, the letters will touch each other, giving it a "squeezed" feel; increasing the tracking will make the text appear more relaxed. The spacing between some letter combinations (such as "Ta") can be particularly strange, so you need to manually adjust the tracking.
Week 10:
 |
| Fig11.4 |
A letter placed in different positions will bring completely different feelings: it is very stable when placed in the center, and it seems to "move" when offset, which even reminds me of the effect of gravity on objects.
When the letter deviates from the center, it seems to move in a certain direction. This sense of dynamics is very interesting and can add vitality to the typography. "Horizontal" and "vertical" are often used in design to convey emotions: horizontal makes people feel stable, while vertical is bolder, like flying or falling.
Week 11:
 |
| Fig11.5 |
Page margins are not only the borders around the text, but also include some auxiliary elements such as headers, page numbers, and titles. Good margin design follows specific proportions, such as the golden ratio.
Week 12:
 |
| Fig11.6 |
Adaptive grids are suitable for web design and can adjust the proportions according to the size of the browser window. These grids are usually based on simple ratios (such as 1:3, 2:1), or more complex golden ratios. The advantage of adaptive grids is flexibility, but they may be distorted when the window is stretched. In addition, there are fixed grid systems and responsive grid systems.
Comments
Post a Comment