Typography Task 3: Type Design and Communication

4/11/2024 - 24/11/2024 / Week 7 - Week 9
An Hongzheng / 0378415
Typography / Bachelor of Design (Honours) in Creative Media / Taylors University
Task 3 : Type Design and Communication

Lectures
2. Instructions
3. Task 3: Type Design and Communication
3.1 Research
3.2 Sketches
3.3 Identify and deconstruct references
3.4 Digitalized
3.5 FontLab
3.6 Final Outcome
4. Feedback
5. Reflection
6. Further Reading

LECTURES

Week 7 (Lecture 7):

Mr. Vinod briefly introduced us to the content of our Task 3. We use prepared markers and grid paper to draw sketches with uppercase and lowercase letters: "h, o, b, g". We need at least three different styles.

Fig.1.1.1 Deconstructed "r"

Fig.1.1.2 References

Fig.1.1.3 Additional reference of a writing tools

Tools:

1. The broad-edge pen (flat)

2. The flexible pointed pen (pointed / brush)

3. The pointed pen (ball point pen / rounded)

Adobe Illustrator settings:

Artboard: 1000pt x 1000pt

CMYK

Fig.1.1.4 Tutorial 1

Fig.1.1.5 Tutorial 2

Week 8 (Independent Learning Week):

Independent learning week

Week 9 (Lecture 9):

We keep doing our task 3 work, digitise letters:(o l e d s n c h t i g , . ! #), and get feedback from Mr.Vinod.

Tools: Cut, width, shape builder, pen and brush
Windows: Pathfinder, Align, Stroke,

Actions:
1. Menu > Object > Path > Outline Stroke
2. Menu > Object > Compound Path > Make

Week 10 (Lecture 10):

Get feedbakcs from Mr.Vinod on our digital work and learned how to regular the desgin of punctuations such as comma and period.

We are assigned to watch a YouTube video about Fontlab for the next progress of task3.

Fontlab 5 Demo:

Fig.1.1.6 Tutorial

Fontlab 7 Demo:

Fig.1.1.7 Tutorial

Week 11 (Lecture 11):

We start to work on adjusting side bearings on Fontlab and try to generate our final outcome: the font we design ourselves.

We be given two charts about how to measure the side bearings while designing a font.

Fig.1.1.8 Measurement 1

Fig.1.1.9 Measurement 2

Week 12 (Lecture 12):

For the final submission, we need to desgin a poster with the font we just designed.

Mr.Vinod give us feedbacks on our final poster design and previous work such as fontlab, e-portfolio and so on.

TAP ME BACK TO TOP

INSTRUCTION

TAP ME BACK TO TOP

3. TASK 3: TYPE DESIGN & COMMUNICATION

3.1 Research

Fig.3.1.1 Research / (Week 7, 4/11/2024)

These are the reserch images before I start my work.
TAP ME BACK TO TOP

3.2 Sketches

Letter "HOGB/hogb"

Fig.3.2.1 Different writing styles for each of the 4 pens / (Week 7, 7/11/2024)

TAP ME BACK TO TOP

3.3 Identify and deconstruct references

My reserch is on the Univers LT Std.

Fig.3.3.1 Deconstructed "H" - Univers LT Std / (Week 7, 7/11/2024)

Fig.3.3.2 Deconstructed "o" - Univers LT Std / (Week 7, 7/11/2024)

Fig.3.3.3 Deconstructed "g" - Univers LT Std / (Week 7, 7/11/2024)

Fig.3.3.4 Deconstructed "b" - Univers LT Std / (Week 7, 7/11/2024)

I found that the curved parts of these letters usually extend beyond the straight parts, and these curves are often not large, so I speculate that the author should not have used elliptical tools during production, but chose curved tools.
The straight line on the right side of the letter 'g' actually has a certain curvature, which is different from the letters' h 'and'd'. These curvatures may have been caused when using an arc tool, but they are not obvious and difficult to notice with the naked eye.
The left and right sides of these letters are often thicker than the upper and lower lines, and this feature is more pronounced when there is a curvature.

TAP ME BACK TO TOP

3.4 Digitalized

Firstly, I decided a sktech I prefer as a base to digitise.

Fig.3.4.1 Sketch / (Week 7, 9/11/2024)

I was watching tutorial videos while completing my font design.
According to the tutorial, the first step should beto created guides using the letters "Tyd".

- Ascender Height
- Capital Height
- Mean/Median Line
- Baseline
- Descender Line

(My Ascender Height and Capital Height are kind of close.)

Fig.3.4.2 Guides / (Week 7, 9/11/2024)

Then, according to my sketch, I found rectangle tool might be best suitable for the font I plan to design. So I made a rough shape for all letters with rectangle tool as the beginning.

Fig.3.4.3 Initial strokes using Rectangle Tool / (Week 7, 9/11/2024)

I added some little rectangle at the end of some strokes as decorations.

Fig.3.4.4 Rough digitalized font design / (Week 7, 9/11/2024)

Later on, I used scissors to cut the middle of the letters (excluding letters l, t, and i) to create some gaps.

Fig.3.4.5 Rough design with decorations adding / (Week 7, 9/11/2024)

I use the free transformation tool to give all letters a certain slope. To ensure that all letters have the same slope, I need to select all letters at once and then perform the free transformation operation.

Fig.3.4.6 After using transform tool / (Week 7, 9/11/2024)

I used brush and eraser tools to process the previously added decorations, making them look more flexible and have a handwritten feel.

Fig.3.4.7 After applying brush and eraser tools / (Week 7, 9/11/2024)

After I recived feedback form Mr.Vinod, I improved the decorations by making them bigger, more obvious.
I also changed the size of comma and period following the rules provided in the instruction video.

Fig.3.4.8 Refined Font design / (Week 7, 10/11/2024)

Once I finished the general edits to my fonts, I calculate all guide lines to my work.

Fig.3.4.9 Guides and Deconstructed Font Design / (Week 7, 10/11/2024)
Measurements:
Ascender: 725pt

Capital Height: 720pt

Overshoot: no overshot

Median:500pt

Center: 250pt

Baseline: 0pt

Overshoot: no overshot

Descender: -190pt

At the end, I used the pathfinder to ensure all each of my letters is a individual shape.

Fig.3.4.10 Font design with outside stroke (Week 7, 10/11/2024)

During Week 10 Feedback:

When I first started designing punctuation marks, I didn't know the correct standards

Fig.3.4.11 Guides and Deconstructed of each letter / (Week 7, 10/11/2024)

After receiving feedback from Mr. Vinod and watching punctuation tutorial website，I got my final version of the whole design.
Fig.3.4.12 Final outcome / (Week 10, 25/11/2024)

TAP ME BACK TO TOP

3.5 Developing the final font in FontLab 7

I first watched all three tutorial videos, and then proceeded with my work while watching the videos to ensure that I did not miss any important details.

Fig.3.5.1 Chart provided

Fig.3.5.2 Font Info / (Week 11, 2/12/2024)

Fig.3.5.3 Copying and pasting the letters into FontLab 7 / (Week 11, 2/12/2024)

Transform all the letters from Adobe Illustrator to FontLab 7.

Fig.3.5.4 All letters in FontLab 7 / (Week 11, 2/12/2024)

After completing my work on Fontlab for the first time, I installed my font and conducted experiments, but I realized that I made a mistake because even though my spacing did not follow the standard table in the instructions. I am inquiring with Mr After Vinod followed the specifications in the table, I did it again, starting with the letters o and n, and ensured that all letters matched the provided chart.

Fig.3.5.5 Test and Measurement of letters in FontLab 7 / (Week 12, 9/12/2024)

TAP ME BACK TO TOP
3.6 TASK 3: TYPE DESIGN & COMMUNICATION / FINAL OUTCOME

Download font: Link

Fig.3.6.1 Final Task 3: Type Design & Communication "Trace Regular"-jpg / (Week 12, 9/12/2024)

Fig.3.6.2 Final Task 3: Type Design & Communication "Trace Regular"-pdf/ (Week 12, 9/12/2024)

Before I come up with my final poster design, I tried some other layouts.

Fig.3.6.3 Poster Design 1 (white) - jpeg / (Week 12, 9/12/2024)

Final Poster Design

Fig.3.6.4 Final Poster (white) - jpeg / (Week 12, 9/12/2024)

Fig.3.6.5 Final Poster (white) - pdf / (Week 12, 9/12/2024)

Fig.3.6.6 Final Poster (black) - jpeg / (Week 12, 9/12/2024)

Fig.3.6.7 Final Poster (black) - pdf / (Week 12, 9/12/2024)

TAP ME BACK TO TOP

4. FEEDBACK

Week 8 (Independent Learning Week)：

Week 9:
General Feedback:
In font design, the coherence and consistency of letters are very important and cannot be lost due to personalized design.
When designing fonts, the upper half of the letter is often smaller and narrower than the lower half, as this makes it visually more stable and comfortable.

Specific Feedback:
I overlooked the design specification requirements for punctuation, so I need to remake according to the instructions.

Week 10:
General Feedback:
According to Mr Under Vinod's guidance, I found that many of my details were not handled properly by others. The horizontal line of letters such as't 'needs to be shortened to form better spacing between letters.
Specific Feedback:
According to Mr Vinod's guidance, I found that many details of myself were not handled well by people
Punctuation still needs to be modified. According to the provided guidance, I have found that punctuation has many nuances. Like letters, circles are generally larger than squares.
The point below '!' needs to have a small difference from the point on the letter 'i'.

Week 11:
General Feedback:
When transferring fonts from Adobe Illustrator to FontLab, I mistakenly placed lowercase letters where uppercase letters should be, despite carefully watching the tutorial video to avoid errors.

Specific Feedback:
The measurement of the bearing side for "t" and "i" needs more adjustments, and I should compare it with Mr Vinod provided the table to complete this task.
Week 12:
General feedback:
After exporting and installing my designed font on my computer, I started using it to create posters. However, I found that the font still fell short of my expectations, so I returned to fontlab to make adjustments.
Specific Feedback:
I have readjusted the spacing of all letters again, and I found that the spacing of the letter "g" I designed was very difficult to grasp, which made me adjust it many times.

Week 13:
General Feedback:
Overall feedback: The design of the poster is not difficult, but attention needs to be paid to details and the font of the signature.
Specific Feedback:
After multiple attempts and different layout designs, I chose the best solution and ultimately completed this task.

TAP ME BACK TO TOP

5. REFLECTION

Experiences:

This assignment took a very long time, and I gradually drew the font sketch, digitized my font, edited the spacing and other specifications using fontlab7, and finally exported the font file to my own computer to design the poster. This was a very wonderful experience, and I also gained a great sense of achievement from it, and felt the true joy of font design.

Although I encountered many challenges in font production in Adobe Illustrator and transitioning to FontLab 7, such as how to make each letter in my font more consistent and coherent, how to ensure coordinated spacing, etc., this task was still a very interesting and summarizing assignment.

Observations:

Through this project, I gained an understanding and firsthand experience of how people design and create fonts that are used in our daily lives. I realized that designing fonts is much more complex than I imagined. Designers need to make fonts visually appealing while maintaining readability, and achieve different effects in different environments.

In font design, consistency in stroke width, character ratio (height and width), and x-height relative to uppercase height and rising/falling height is crucial. These factors play an important role in maintaining consistency between letters.

Findings:

My biggest gain was a more proficient mastery of font design techniques such as repairing paths and handling composite shapes, as well as an interest in typography. This project taught me many useful design knowledge in daily life and gave me a sense of achievement through my own design.

In addition, I also obtained my first system font designed by myself.

TAP ME BACK TO TOP

As designers increasingly work in on-screen environments, maintaining typographic integrity becomes essential, though it's challenging due to evolving technology like varying screen sizes, resolutions, and interactivity. While principles from printed typography apply to digital design, there are unique challenges specific to screens. Simply replicating print design on-screen is ineffective. The chapter explores how typography relates to digital environments, focusing on key issues such as legibility, visual hierarchy, and effectively structuring type in digital formats.

Week 9

- Typography in Time and Motion

Kinetic typography allows designers to use moving text to convey messages in a more expressive and dynamic way. While printed works can only suggest motion through techniques like repeated letters or creative layouts, kinetic typography brings text to life by adding movement and timing. Designers can control how the text moves, its speed, and its behavior, giving it a “voice” that can express tone and emotion. The pace of the motion, whether fast, slow, or with pauses, helps create a mood. When combined with sound and images, kinetic typography becomes a powerful tool for storytelling and creative communication.

Week 10

- Case Studies in Typography Design

The case studies in this chapter explore specific challenges in professional typographic design. They address tasks such as integrating text and images on posters, creating cohesive visual systems across various materials, experimenting with publication design, incorporating time and motion into typography, designing dimensional and environmental type, analyzing and visualizing data, and developing unique visual styles for everyday events. Each concept is carefully analyzed, and the reasoning behind its solution is explained, showcasing the complexity of practical problem-solving in typography.

Week 11

- Typography Design Education

The rapid growth of technology and the increasing importance of visual and media-based communication have introduced new challenges for typographic education. In a constantly evolving communications environment, designers must develop a sensitivity to typographic form and effective communication. This requires an appreciation of typographic heritage, the ability to meet modern design standards, and an innovative approach to future challenges.

The assignments presented in this chapter, ranging from basic theoretical exercises to complex applied projects, offer an overview of contemporary typographic education. A strong curriculum combines perceptual and conceptual development, technical skills, and strategies for solving complex design problems. These projects emphasize building the foundational skills necessary for effective and innovative typographic design.

Week 12

- Typography Design Progress

The creative process is an exploration of the unknown. Whether composing music, painting, or designing, every project presents unique challenges with no guaranteed method for success. Designers often grapple with how to start and how to finish, navigating between structured approaches and spontaneous discoveries. Most solutions emerge not as sudden flashes of brilliance but as the result of a thoughtful, sometimes uncertain journey that demands courage, patience, and trust in the process.

Design is a sequence that begins with taking on a problem and ends when either a deadline is met or the solution criteria are fulfilled. This process is rarely linear or predictable, more akin to following a road map with multiple routes to the destination. While taking side roads may extend the journey, they often lead to richer and more rewarding experiences than sticking to the main path.

Week 13

- Type Spicemens

The role of typographic specimens has evolved significantly with the advent of digital typography. In the past, designers relied on printed specimens to choose fonts and sizes for typesetting or to trace layouts. These specimens offered a limited selection of sizes and styles, showcasing only what was physically manufactured.

Today, digital tools provide designers with virtually unlimited size and style options. Fonts can be studied and purchased directly from digital type foundries, while printed specimens are now primarily used for study and comparison. The specimens in this chapter highlight key historical typeface classifications—Old Style, Transitional, Modern, Egyptian, and Sans Serif—with a focus on Old Style and Sans Serif, the most commonly used categories.

With the vast array of typefaces available, including those originally designed for hand, machine, or phototype composition and newer fonts tailored for digital media, designers must carefully evaluate the subtle details of form and spacing. The quality of fonts can vary greatly, making a deep understanding of these nuances essential.

TAP ME BACK TO TOP

Search This Blog

An Hongzheng