Typography3-Type Design & Communication (Font Design)
November .1.2023
1/Nov/2023-31/Nov/2023-Week9-Week13
QIAN GUOYI/0369462/Bachelor of Design (Honors) in Creative Media
Typography/Taylors University
Task
INSTRUCTIONS
LECTURES
1. Lecture Summary
Week9:
Ms Hsin and Mr Vinod reviewed our nine design sketches and gave their own opinions. At the same time, they would also demonstrate the style they felt was better based on the style of our sketches. After selecting, we spent a long time following the design from our sketch to continue designing our digital typeface creation sketch. Mr. Vinod taught us some methods to use lines, shapes or brushes to create digital fonts. We also tried new tools such as the width tool and pathfinder tool, which will be of great help to us in making digital fonts.
Week10:
Ms Hsin and Mr Vinod reviewed our first draft of the digital font and made many suggestions that were worth revising. We modified the fonts individually according to the teacher's suggestions, and everyone spent a lot of time asking for personal feedback.
Week11:
Ms. Hsin gave us a week to continue perfecting our Adobe Illustrator digital fonts, and we spent a lot of this class getting our personal feedback and making changes to our digital fonts.
Week12:
Mr. Vinod and Ms. Hsin asked us to download FontLab7 and needed to import the digital fonts for our design. We need to first determine the height value of the digital font on Adobe Illustrate and set it on FontLab7. We need to adjust and set the appropriate kerning for each letter on FontLab, so that our own digital font can be generated. We need to export the font with fontLab and create our own poster.
2.1Sketching of alphabets
The teacher asked us to use three different pens to draw the letters “ODHNG” and use different styles to design 9 fonts.And choose one of the fonts as the final design font, and use Adobe Illustrator to make the sketch font into a sketch font.
Fig2.1.2 week9
Since I was not very satisfied with any of the 9 font sketches I drew above,So I redesigned these four fonts, and the professor helped me choose these two fonts.
~In the first one, I added some very interesting elements, such as keeping the main body of the letters unchanged and adding some wavy short lines on the edges of the letters.
~In the second type, I designed it based on Gothic fonts. The fonts look more square.As shown in FIG
Fig2.1.3 week9
The picture above shows the font that the teacher demonstrated to me. The teacher reminded me that I need to keep the height and size of the font consistent. Also, the teacher reminded me that if I need to design Gothic fonts, I need to use a marker pen with a wide and flat tip to write.The teacher reminded me that I could choose one of these two fonts to make digital fonts.
In the end, I chose the Gothic font to make digital animations.
Fig2.1.4 week9
The professor wanted us to make our own number font using the letters and punctuation "oledsnhtig,.!#". Shown above is a sketch of a gothic font I designed for making a digital font.I followed the teacher's suggestion and used a marker pen with a wider and flat tip to write.
2.2 Digitalising of words
Fig2.2.1 week10
As shown in the picture above, the teacher asked us to design the digital font with reference to the font sketch we designed, and use the letters and punctuation marks "oledsnchtig,.!#" to make the digital font. Use tools in Adobe Illustrator Cut, width, shape builder, pen and brush Windows: Pathfinder, Align, Stroke, Actions: 1. Menu > Object > Path > Outline Stroke 2. Menu > Object > Compound Path > Make.
Fig2.2.2 week10
Fig2.2.3 week10
Letter e: I try to keep the width and height of each font consistent. From the comparison between the first draft and the second draft, the second draft is more atmospheric, making it consistent in size and height with the whole.
I also took reference from the letter 0 for the design of the letter e, because the two letters are very similar in structure.The same font c is also made based on the font o.Making the letters this way will make the letters overall look more unified and neat.
Fig2.2.4 week10
Letter n: I wish the style of the individual letters could be more consistent with the style of the overall letter. It is obvious that the second draft is more consistent with the stylistic form of the overall letter than the first draft. The vertical strokes on the left side of n in the second draft have undergone some changes from the landing strokes on the right side. Compared with the first draft, they are more vivid and not as rigid and monotonous as the first draft.
Fig2.2.5 week10
Letter h: The second draft of h is more in line with the overall style and tone than the first draft, and I made the vertical line of h based on the writing method of letter l. The first draft will look very monotonous or dull, and the overall size will be different, so I finally chose the final digital font for the second draft.
Fig2.2.6 week11
Fig2.2.7 week11
According to the teacher's request, we penetrated the path of the font, as shown in the picture above. Mr. Vinod helped me adjust the height of the letters to a suitable height and lengthen the Adobe Illustrate drawing board to better adjust the font in FontLab.
According to the teacher's request, we penetrated the path of the font, as shown in the picture above. Mr. Vinod helped me adjust the height of the letters to a suitable height and lengthen the Adobe Illustrate drawing board to better adjust the font in FontLab.
2.3Development of Font in FontLab 7
We need to import digital fonts from Adobe Illustrator into FontLab7 to handle kerning and spacing. When pasting digital fonts, we need to ensure that the height of our fonts and the font outline path are correct.
Fig2.3.1 Week12
As shown in the picture above, I imported the Adobe Illustrate fonts into FontLab. Because the number font I was designing was lowercase, the highest point of each letter would be a little different, so I spent a lot of time adjusting the height of each letter to make them look uniform.
As shown in the picture above, I need to adjust the spacing of each letter to the appropriate distance. I first adjusted the kerning of the letter o and the letter h, and compared other letters with these two letters. I adjusted the left and right spacing of the letter o to 50, because the size of the letter e, letter c and letter s are the same, so I also adjusted their spacing to 50, and compared their spacing to see if the spacing is consistent.
I compared the spacing between the letters n and h so that their spacing looks consistent with the letters o and e.
2.4Poster Design
The task this time is that we need to create a black and white poster using fonts created in A4 style. I wanted to create a black and white poster using the words the gentle light the nice night using a font I made in FontLab.I made a poster with a white background and black fonts and a poster with a black background and white fonts.
Fig2.4.1 Week13
Fig2.4.2 week13
2.5 Final Project 3 Font Design
Final Kerning
Fig2.5.2
Final Font Design Link and Image
https://drive.google.com/file/d/1g8PA2sDYzVj3qXKyg-0RMZI8YdZiH8KR/view?usp=sharing
Final Poster Design
Feedback
Week9:
Making a digital typeface requires splitting it into three artboards, keeping the original strokes so that the letters can be easily changed if needed. The teacher thought that the digital letters I made were not uniform in form. She reminded me to keep the size, height and width of each letter uniform, and gave me a demonstration.
Week10：
When making digital fonts, you need to set the artboard to 1000 pixels. The teacher suggested that I use one letter as a basis to design other letters. For example, designing the letters e and c based on the letter o will make the whole look more unified.
Week11:
Before importing fonts into FontLab, use commandY on Adobe Illustrate to view the font path and check whether all font outlines are expanded. This will affect fonts imported on fontlab. To make it easier for us to adjust our font shape, we should try to reduce the number of our anchor points.
Week12:
We should follow the kerning guide given by Mr. Vinod, which will help us save a lot of time. We can first adjust the spacing between the letters o and h, based on the spacing between the two letters, observe the spacing between fonts with the naked eye, and compare the spacing between the letters o and h to make adjustments.
REFLECTION
Experience：
I think this is a challenging task. This is my first attempt to design my own font and finally make it into a black and white poster.
Observation：
For this task, we first need to make and design a sketch of our handwritten fonts. Before this, I have never carefully observed the differences between various fonts. This task also allowed me to carefully study the different fonts. fonts and I have fun doing it. After completing a suitable font sketch, we need to use Adobe Illustrate to make a digital font. During this process, I repeatedly modified my font. During this, I discovered that the consistent width and height of the font can make the overall letters look better. It looks very uniform.After this, we need to import the digital fonts we designed into FontLab7, and adjust the spacing between fonts. I have never carefully discovered before that the spacing between fonts has a great impact on the overall unity of the font.
Findings：
Through this task, I discovered that designing and developing fonts is not an easy task. It takes a lot of time and energy to design a good font, and you need to carefully observe the differences. This assignment also introduced me to how typefaces are constructed, making me aware of the unique differences between each letter. Beyond that, I also need to look at different fonts and I need to use my imagination.
FURTHER READING
Typography is not just about selecting fonts and points from a drop-down menu. Typography is a skill that has been passed down for centuries, starting with wood and metal letterpress printing. Not only does it have a long history, it is also very practical. Some people just have a few practical tips that they can apply to everyday design projects such as resumes, newsletters, or business cards.
This talks about the spacing of font layout, font style, etc.The goal of typesetting is readability. Appropriate font size and appropriate white space on the layout are to facilitate people's reading and to allow information to enter people's field of vision in the most effective way.
Fig2
Different fonts represent different styles. The fonts in this article are all based on some ancient fonts. Each of them has its own characteristics, and their characteristics can bring people different reading experiences. At the same time, different font characteristics can adapt to the needs of different occasions.
Fig3
To give designers more options for variation, the font may appear in an italicized version.
Each font exudes a unique emotion or personality. It may be friendly, trendy, serious or silly, but most fonts are not universal, so you have to judge how a font looks to you. The feeling, and whether it is suitable to be placed in this design. One way is to list the characteristics you want the design to present. It would be better if you can determine the content first, so that you can directly choose the font to match the established tone of the content.
Type designer Eben Sorkin once said: Every font has its own voice, which will affect how we feel when reading text and how we absorb and process information.
It’s powerful and can make any form of written communication more effective and persuasive. When the text matches the personality of the font, it will be faster and easier for everyone to read; if the two do not match, the text will become confusing and slow down the reader. The easier it is for visitors to read, the easier it will be for them to find what they're looking for and click to buy or return (or achieve other design goals).
The classic serif font looks quite suitable for a publisher’s blog that was founded in 1925, but this font is easy to read, concise and approachable, bringing a modern feel and is more suitable for use on the web.
评论
发表评论