Typography - Task 3: Type Design and Communication
Typography - Task 3: Type Design and Communication
19.06.2025-19.7.2025 ( week8-week13)
Yuan Xiaoyue ,0367988
Typography
Task 3: Type Design and Communication
Table of Content:
1. Lecture
2. Instructions
3. Process Work
4. Feedback
5. Reflection
6. Further Reading
Lecture：
Typo Task 3A Font Construction (Shapes)
This lecture explains how to digitize handwritten font sketches in Adobe Illustrator. Mr. Vinod emphasizes the importance of canvas settings and x-height sizing accuracy. The lecturer then goes on to demonstrate how to use basic shapes in Illustrator to build letterforms.
1. Create an artboard in Adobe Illustrator that is 1000pt tall and 1000pt wide.
2. Draw a 500pt x 500pt square as a guide for measuring the x-height.
3. Select a font that matches the 500pt x-height and use the ruler to draw the basic guidelines for the font design: ascenders, caps, center, baseline, and descenders.
[Ctrl+Y] allows you to toggle between Preview mode and Outline mode.
Typo_Task 3A_Illustrator to Fontlab5 Demo (Watch this before watching the FontLab 7 video)
Mr. Vinod explains how to create fonts in FontLab 5. Although we were asked to use FontLab 7, this tutorial in the lecture video is still very important.
Typo_Task 3A FontLab7 Demo (Watch the FontLab 5 Demo first)
This video explains how to create a font in FontLab7 and how to adjust the side margins of each letter and export it for saving.
Typing Task 3A (optional) - Previewing and typing fonts on Blogger
This video shows how to embed the HTML of a font preview into your e-portfolio blog.
Instructions：
Process Work：
TASK 3：Type Design and Communication
Research：
I first selected one of the ten fonts provided by the professor and analyzed b and g in Adobe Illustration.
Font structure features:
- The main part at the x height is a closed, nearly elliptical shape, and the strokes in the connecting area are relatively narrow, which enhances the structural sense of the font.
- The vertical boundaries of the characters are aligned, and the top ellipse is slightly upward, creating a visual sense of uprightness.
- The lower structure is a slightly flattened elliptical bowl with a stable negative space inside, which enhances the transparency and readability of the font.
Font structure features:
- The left side is composed of a vertical straight line forming the main stroke (stem).
- The right side is a vertical oval bowl, which is connected to the upper and middle part of the stem, and the strokes are narrower at the connection.
- The overall shape is compact, the structure is symmetrical, and the strokes are balanced, showing a stable and orderly visual style.
Next, the professor asked us to design a font sketch：
After the direction was basically determined, I used Adobe Illustrator to design the font.
After Vinod sir’s video explanation and feedback, I tweaked some of the letters and chose the capital letters to start the work.
I started by creating these four letters：
Then start designing according to the letters given by the professor and add punctuation.
After adjusting according to the data given by the professor, this is my final AI creation:
Next, I followed the video tutorial to import my fonts into FontLab for digitization.
Once imported, I began adjusting the width of each letter to ensure a more harmonious and balanced look when the letters formed words.
Then import the created font into the computer to make a poster：
1. Font download link:
2. Initial sketch:
3. Screenshot of the FontLab process (side bearing):
4. Final type build for Ai JPEG:
6. Final JPEG A4 black and white poster:
7. Final PDF A4 black and white poster:
4. Feedback:
Week 8:
Overall feedback: This week the professor introduced us to the writing standards of English letters, including the five important lines that must be followed in font design (such as ascenders and x-height lines). At the same time, in the process of exploring fonts, we can consciously search for the writing style of the font on the Internet.
Special feedback: Mr. Max guided my sketches and made suggestions.
Week 9:
General feedback: In this lesson, Mr. Max first briefly introduced the requirements of the assignment, then commented on the font we designed, pointed out problems and made suggestions for revisions.
Specific feedback: In the font I designed, the uppercase letters performed better than the lowercase letters. Finally, the professor and I chose the uppercase letters to start the creation.
Week 10:
General feedback: Mr. Max told us that we need to keep the font design process because it is necessary to prove originality. We started to create in AI under the guidance of the professor.
Special feedback: Professor Max gave guidance on my AI font, and finally removed the lines and corners that should not have been there, and finally completed the AI font design.
Week 11：
General feedback: This week the professor mainly explains how to import letters designed in Illustrator into FontLab 7.
Specific feedback: I have completed the font design process in Illustrator and started designing in FontLab. Mr. Max instructed me to pay attention to adjusting the letter spacing.
Week 12：
General Feedback: This week we continued the font design project. After importing the designed letters into FontLab7, we adjusted the side margins of the letters as needed. After that, we exported the fonts we designed and installed them on the computer. Then, we went into Illustrator to start the poster design. Teacher Max showed an example of the final assignment and emphasized some specific requirements.
Specific Feedback: The font I designed didn't look perfect when I started designing the poster. So I went back to FontLab7 to readjust the glyphs. After I finished, I exported the font to FontLab and started making the poster.
Week 13：
Overall feedback: This week is the penultimate week of tutorials. Teacher Max continued to guide us to complete Task 3 and elaborated on the specific requirements for the final arrangement and reflection of the electronic portfolio.
Special feedback: My Task 3 is basically completed. The professor guided me to further download the fonts and put them in the electronic portfolio. After completion, I started writing the final blog as required.
Reflection:
Experience:
This assignment was both challenging and fun. I can honestly say that I enjoyed the entire process of designing fonts, especially those inspired by cursive script. Although this type of font is not suitable for long texts, the process gave me a deep understanding of the importance of font structure and style expression, and also gained valuable design experience. I think this is the most challenging and engaging assignment in the font course so far. We need to start from hand-drawn sketches and go through a complete digital process to complete the design of a font independently. This process requires not only a solid understanding of letter structure, but also a lot of time and effort to continuously polish the details.
Observation:
Through careful observation of different letters, I gradually realized the importance of style consistency in font design. Even a slight deviation in a stroke may cause the entire word to appear visually abrupt and uncoordinated. At the same time, the adjustment of the spacing between letters is also extremely important, which requires repeated observation and fine-tuning to achieve overall visual balance and harmony. Throughout the design process, I constantly enlarged and reduced the fonts, and compared the letters side by side to correct every detail, striving to create a refined and unified final font work. Through these observations and practices, I deeply realized that the visual balance in the letter composition is one of the indispensable qualities of an excellent font.
Discovery:
I gradually realized that designing a font is not an easy task. It requires a lot of time and patience, accompanied by continuous modification, adjustment and repeated observation. Throughout the process, multiple key factors must be considered comprehensively, such as legibility, readability, visual appeal, decorativeness, stroke thickness, spacing and structural proportion. These factors are interrelated, making font design both complex and challenging. These fonts not only help me understand the basic typographic specifications, but also let me understand what kind of design can bring good visual effects and what details may destroy the overall beauty. Through learning and reference, I gradually mastered the issues that should be paid attention to and the misunderstandings that need to be avoided in the design process.
Further Reading：
我读了David Creamer写的《Typography Basics》这本书，这本书主要讲解了计算机排版的基础知识
After reading Typography Basics, I have a deeper understanding of the basic concepts and practical applications of font design. This material not only systematically introduces the classification, structure and function of fonts, but also emphasizes the core role of fonts in visual communication.
This book first introduces the basic concept of fonts. The author points out that although most literature is accustomed to classifying fonts into two categories: serif fonts and sans serif fonts, this traditional classification method is no longer able to cover the diverse font types in today's computers. For this reason, the book further refines the font categories and introduces a variety of types including: serif fonts, sans serif fonts, display fonts, handwriting fonts, text fonts, monospaced fonts, and decorative fonts, to establish a more comprehensive font recognition framework for readers.
Display fonts may be unfamiliar to most people. These fonts emphasize decoration and are mainly used to attract visual attention. They are often used as eye-catching titles or logos. Due to their distinctive style and low readability, they are usually not suitable for use in body content.
Script fonts imitate the handwriting style, and the letters are usually connected to each other, showing a smooth and elegant visual effect. It is often used in formal occasions, such as invitations or greeting cards, and usually does not use all capital letters to maintain the natural continuity of the writing.
Dingbats are decorative graphics used to enhance the design of a page, often as a supplement to text content. Although Zapf Dingbats and Wingdings are the two most common dingbats, there are actually hundreds or even thousands of different designs available on the market.
评论
发表评论