Typography- Task 3: Type Design & Communication
04/6/2024--22/7/2024 (Week9-14)
JING KEYAO/0370732/Bachelor of Design (Honours) in Creative Media
Typography
Task 3 (Type Design & Communication)
Table of Content:
-Week9
-Week10
-Week11
-Week12
-Week13
-Ex.2a_Dissection
-Ex.2b_Font Lab
Lectures:
Week 9: Task Briefing
We were briefed on our third task: type design and communication.
Week 10: Rough Design and Font Selection
In the video, Mr. Vinod suggested that after completing the first rough design, we should identify a similar font from the 10 typefaces provided as reference. We used guidelines to identify x-height, baseline, medium line, cap line, ascender height, and descender height, with the x-height set at 500 pt x 500 pt.
Week 11: Punctuation Design and Progress Check
we had to show our progress on our digitization process to get feedbacks and then we further worked on to refine it. We were also introduced to FontLab on this week.
Week 12: Refinement and FontLab Preparation
We continued refining our typeface in Illustrator, receiving feedback. We downloaded the demo version of FontLab 7 and adjusted settings before importing fonts. Key settings included combining shapes and ensuring anchor points were not too close.
Week 13: Finalization and Poster Creation
We imported our letterforms into FontLab 7, adjusted kerning and sidebearings, and ensured optical neatness. We created a A4 poster using our finalized font.
Module Brief:
<iframe src="https://drive.google.com/file/d/1i_nuyoPuk1Gi_BtQEAKMebMYHsiaJv4u/preview" width="640" height="480" allow="autoplay"></iframe>
EXERCISES:
For task 3, our first exercise was to analyse letters H, o, g, and b in Adobe Illustrator, choosing 2 typefaces out of the 10 we were provided. Afterward, we are required to write letters o, d, h, n, and g on graph paper (can be lowercase/uppercase) using 3 different markers with more than 3.0 weight. We have to do a different style for each marker. Then, we have to digitalize our letters and refine them.
- Ex.2a_Dissection
In this task, we were instructed to do a detailed dissection of the letters "H", "o", "b" and "g" by using Adobe Illustrator. We need to select a preferred font from teh 10 fonts provided. I choose Bodoni Std.
Fig.2a_Bodoni Std
After deconstructing the letters, I then began constructing my own. I first set my guidelines for the baseline, x-height, ascenders, descenders and cap height. Then, I started by constructing the letter 'a' using the shapes tool, which I used as the basis for creating the other letters as well.
-Ex.2b_Font Lab
- Research
The first thing I did before working on my sketches was looking at various fonts for inspiration. I did not have a specific idea in mind regarding what I wanted to create, so I looked at different styles.
Fig.2b_01&02
- Sketch
-The design of letters
To begin with this task, we were instructed to sketch out the letters o,d,h,n,g using different types of markers. The markers I selected have 3 different nibs, which are brush, chisel, and round type.
1. Artline Calligraphy Pen
2. Thin Brush Sign Pen
3. Thick Brush Sign Pen
Fig.2b_Sketch_01
Fig.2b_Sketch_02
Fig.2b_Sketch_03
After showing my sketch, Ms.Hsin suggested me to digitilize the second one in the second picture.
-The design of punctuation marks
Fig.2b_Sketch_04
Ms.Hsin thought the second one was better, but asked me to change it again because the punctuation didn't have to be changed too much.
- Digitization in illustrator
Then I started digitizing my sketches in illustrator.
I think the font I designed is the most similar to Bodoni Std, because it is also horizontal and bold.
Fig.2b_03
I tried to round out the font and make it look like it was flowing, because I thought it was interesting. But I'm still going to stick to the principle of being thin and rough, same as the Bodoni Std.
Fig.2b_04
Fig.2b_05
- Font lab
After finalising the design of my typeface on Illustrator, I began the process of developing and exporting my font using FontLab.
Fig.2b_05_Sidebearing reference
Fig.2b_06
After pasting all letters into FontLab7, I did the individual kerning for each glyph in the metrics tab, as demonstrated in the demo video. I also filled in the font information and measurements (ascender, descender height etc) in the 'font info' tab.
Fig.2b_07
Type Information:
Ascender: 750 pt
x-height: 675 pt
Median: 390 pt
Baseline: 0 pt
Descender: -250 pt
---
-Final
Download font here: FLOW
Type Design "FLOW" (JPG)
---
Type Design "FLOW" (PDF)
---
Final Poster Design (JPG)
---
Final Poster Design (PDF)
FEEDBACK
Week9:
General feedback
·Write all the letters (o l e d s n c h t i g , . ! #) in the approved style and digitise.
·Remember to write the letters, not draw the letters.
Week10:
General feedback
·Make sure all the letterforms have the same weight/ consistency
·Watch the tutorial video before digitising the word.
Specific feedback
·Change the cross of the pound sign to the up direction.
·Punctuation doesn't have to change much.
Week11:
General feedback
·Create guidelines (baseline median etc) below the letterforms so that the overall letterforms are placed consistently.
·Finalise all the desing before importing to FontLab.
Specific feedback
·The letter g can adjust the middle joint from the end of the circle to a sharp point, in line with the other letters
·The letter "d" can join "o" and "l" together to form "d".
Week12:
General feedback
·Make sure to unite the object from the pathfinder tool/ compound path to flatten the objects.
·In preference, click on AI to ensure the original vector shape is pasted.
Specific feedback
·My letter “g” is in the wrong place.
·I need to adjust the spacing between each letter, using the “o” as a reference.
Week13:
General feedback
·Use all letters in your font for the poster since the purpose is to promote your font.
Specific feedback
·I'm missing one letter, and I need to design every letter and every punctuation mark.
·Overall layout is okay, no need to change.
REFLECTION
Experience:
This typography course has been the most challenging and time-consuming project of the semester. Despite the difficulties, it was a rewarding experience to develop our own typefaces. While it was tricky to ensure consistency in curves, widths, and overall shapes, it was satisfying to see our designs come to life. It was particularly enjoyable to observe classmates' unique designs and learn from their work.
Observations:
Through this course, we learned that typeface design involves meticulous attention to detail. Observing various typefaces revealed nuances like the shorter height of the letter 't' and the importance of overshoots in rounded letters. These small details create visual harmony and readability in a typeface.
Findings:
Designing a typeface requires patience, technical skills, and a deep understanding of typographic principles. Consistency is crucial for a cohesive look, and even minor adjustments can significantly impact the overall design. This course helped us appreciate the complexity of type design and improved our observational and creative skills.
FURTHER READING
The Vignelli Canon
Author: Massimo Vignelli
Publication Year: 2009
Key Concepts:
1. Design Principles:
·Simplicity: Vignelli emphasizes the importance of simplicity in design, advocating for clean and straightforward solutions that communicate effectively.
·Clarity: Clear and concise design ensures that the message is easily understood by the audience.
·Functionality: Every design element should serve a purpose and contribute to the overall function of the piece.
·Timelessness: Good design should withstand the test of time, avoiding trends that may become outdated quickly.
2. Typography:
·Vignelli discusses the significance of typography in design, highlighting the need for appropriate font choices and consistent use of typefaces.
·He advocates for a limited selection of typefaces, focusing on those that are versatile and timeless.
3. Grid Systems:
·The book explores the use of grid systems to create structured and balanced layouts.
·Vignelli explains how grids can bring order and cohesion to design projects, from print to digital media.
4. Color:
·Vignelli's approach to color is based on simplicity and functionality.
·He encourages the use of a limited color palette to maintain harmony and avoid visual clutter.
5. Practical Applications:
·The book provides practical examples of Vignelli's work, illustrating how his principles are applied in real-world projects.
·Case studies include various design disciplines such as graphic design, industrial design, and environmental design.
Comments
Post a Comment