TYPOGRAPHY / Task 3 - Type Design and Communication

on

4/11/2024 - 29/12/2024 / Week 7 - Week 14

Aricia Man Yi Xuan / 0375026

Typography / Bachelor of Design (Hons) in Creative Media

Task 3: Type Design and Communication

TABLE OF CONTENTS


1. LECTURES

Week 7 (Lecture 7):
This week (4/11/2024), Mr. Vinod briefed us about our Task 3, then we draw sketches in class using our marker pens and graph papers. Here are some examples given that we can take a look before we start.

Fig.1.1.1 Deconstructed "r"

Fig.1.1.2 References

Fig.1.1.3 Characteristics of a writing 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):
This week is our independent learning week, there's no classes.

Week 9 (Lecture 9):
Today (18/11/2024), Mr. Vinod gave us feedback on our digitalized typeface design.

Week 10 (Lecture 10):
Today (25/11/2024), Mr. Vinod looked at our artwork and told us some advice to improve it. Then, we're assigned to watch a YouTube video about Fontlab 5 Demo and Fontlab 7 Demo.

  • Fontlab 5 Demo:
  • Fontlab 7 Demo:

Week 11 (Lecture 11):
Today (2/12/2024), Mr. Hafiz looked at our font design, and we moved on to FontLab 7. 

Week 12 (Lecture 12):
Today (9/12/2024), we're to continue our final outcome and make a poster for our font design.

2. INSTRUCTIONS

1. Prepare materials: A4 Graph Paper, 3 marker pen (3.0 above)
2. Select a preferred font from the 10 fonts provided. Using the following letters " H, o, g, b ", do a detail dissection of the letters in Adobe Illustrator (ar  tboard size: 1000pt x 1000pt). 
3. Sketch the following letters HOGB / hogb using the 3 different pens.
4. Explore at least 3 different writing styles for each of the pens. 
5. Write the following letters and punctuations: o l e d s n c h t i g , . ! # in that style, then digitizing it. (click here view tutorial 1) (click here view tutorial 2).

3. TASK 3: TYPE DESIGN & COMMUNICATION

3.1 Research

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

Before I started my sketches, I find some inspiration from Internet and also use Font generator for references.

3.2 Sketches

Letter "HOGB/hogb"

Fig.3.2.1 Three different writing styles for each of the 3 pens / (Week 7, 7/11/2024)

After research, I drew 3 sketches with each of the 3 different types of pencil which are the pointed pen, the flexible pointed pen, and the broad-edge pen on the graph paper to ensure my sketches are neat and precise. My favourites are #1, #3, #7, and #8. As for #1 and #2, it looks cute and playful; for #7 and #8, it looks more elegant and aesthetic.

3.3 Identify and deconstruct references

Fig.3.3.1 Chosen font design sketch and reference / (Week 7, 7/11/2024)

I chose the Bembo Std Regular from the 10 fonts provided for the reference as it looks similar to my sketch, especially the letter g. Then, I move on to deconstruct the letter H, o, g, b.

Fig.3.3.2 Deconstructed "H" - Bembo Std Regular reference / (Week 7, 7/11/2024)

Fig.3.3.3 Deconstructed "o" - Bembo Std Regular reference / (Week 7, 7/11/2024)

Fig.3.3.4 Deconstructed "g" - Bembo Std Regular reference / (Week 7, 7/11/2024)

Fig.3.3.5 Deconstructed "b" - Bembo Std Regular reference / (Week 7, 7/11/2024)

After deconstructing these letters, I observed that the letters are actually not equal; they have slight differences. For the letter "H", the length of the serif on the right stem is not the same. The left serif is longer than the right serif in the right stem. Plus, the counter of the "O" is not a circle; it more looks like an oval, and it has no vertical stems or horizontal crossbar. For the letter "g", it has a top loop that reaches the x-height and a larger bottom loop that extends below the baseline to the descender line. Lastly, for the letter "b", it has a straight vertical stem and a counter in its rounded bowl.

3.4 Digitalized

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

Before digitalized my typeface, I followed the demo video by Mr. Vinod to created guides using the letters "Tyd".

- Ascender Height
- Capital Height
- Mean/Median Line
- Baseline
- Descender Line
Fig.3.4.2 Initial strokes using Pen Tool / (Week 7, 9/11/2024)

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

Fig.3.4.4 Progress of letter "o"

To begin, I used the pen tool in Illustrator to draw out the letters that I've sketched on the graph papers. Then, I create a brush to adjust the angle, roundness, and size of the letters. After that, I create the outline stroke of the letters following the tutorial video to adjust the letters and used the pathfinder tool to unite the shape.

Fig.3.4.5 Calligraphic Brush Options / (Week 7, 9/11/2024) 

Fig.3.4.6 Outside stroke / (Week 7, 9/11/2024)

Fig.3.4.7 Font design with outside stroke / (Week 7, 9/11/2024)

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

Later on, I refined the edge of each letter, making them to be tip.

Fig.3.4.9 Guides and Deconstructed Font Design / (Week 7, 10/11/2024)

Measurements

Ascender: 735pt
Capital Height: 620pt
Overshoot: 5pt
Median:500pt
Center: 250pt
Baseline: 0pt
Overshoot: 5pt
Descender: -227pt

Then, I adjust the letters into the guides following the demo video to ensure they looked even. I made some of the letters have a swash for my design to look more elegant.

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

Fig.3.4.11 Digitisation Process #1 / (Week 7, 10/11/2024)

Fig.3.4.12 Digitisation Process #2 / (Week 7, 10/11/2024)


Fig.3.4.13 First attempt / (Week 7, 10/11/2024)

I was satisfied with the design; it matched the original of my sketches and my ideal design from the beginning.

After Week 9 Feedback:

After receiving feedback from Mr. Vinod, I made some changes to my design.
  • Changes I made:
Fig.3.4.14 Revised of digitalized letters / (Week 9, 18/11/2024)

Letter "s" - I made the stroke thinner, so it would be more balanced.
Letter "c" - The center of the stoke is thinner same as the letter ”o".
Letter "h" - The entry and the exit changed to opposite directions.
Letter "t" - The exit of the stroke end before the ascender line.
Punctuations - the "."change to square shape; the "!' stroke is thick on top and thin at the bottom, and the dot change to square; the "#" is more thicker and straight a bit.


Fig.3.4.15 Second Attempt / (Week 9, 18/11/2024)

After Week 10 Feedback:

After receiving feedback from Mr. Vinod, here are my final digitalized letters, which I'd made changes to the ",".

Fig.3.4.16 Third Attempt - final outcome / (Week 10, 25/11/2024)


3.5 Developing the final font in FontLab 7

Fig.3.5.1 Chart provided


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

Once I finalized my font design, I moved on to FontLab 7 following the demo video provided. Later on, I filled in the font info and the measurements; I gave it a name, "Mystic Elegance".

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

Copy the letters from Adobe Illustrator to FontLab 7.

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

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


After receiving feedback (Week 12) from Mr. Vinod, I realized that I did it wrongly, as I didn't follow the chart provided even though my kerning is even. Hence, I redo it and make sure all the letters are following the chart provided, and finally come out with a better version.

Later on, I moved on to create the BW A4 poster for my font design.
Requires: ensure sentence/phrase/words are the same font size, use Univers LT Std (8pts)

3.6 TASK 3: TYPE DESIGN & COMMUNICATION / FINAL OUTCOME

Download font: Link

Fig.3.6.1 FontLab Screengrab / (Week 12, 9/12/2024)

Fig.3.6.2 Final Task 3: Type Design & Communication "Mystic Elegance-Ethereal Serif"-jpg / (Week 12, 9/12/2024)

Fig.3.6.3 Final Task 3: Type Design & Communication "Mystic Elegance-Ethereal Serif"-pdf/ (Week 12, 9/12/2024)


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


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


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



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

4. FEEDBACK

Week 9 (18/11/2024):

General Feedback:
Mr. Vinod said that we should show our progress of the letter for us to refer back to if we want to make changes, and also delete additional anchor points after creating outlines. We should know that the top of the letter "s" is always smaller than the bottom.

Specific Feedback: 
There's a little bit more consistency here; the "o" is the basic of the letters "c,e,d". It's very consistent here. Your letter "h" is not the same; this is a mistake You should have the going left to right to draw the stroke; make sure your entry and exit strokes are always opposite. For the "c" is not the same as the letter "o"; the exit is vertical; it should be thin in the center. The letter "s" is interesting and possibly acceptable. I would suggest making sure that your end points look similar. The problem is you would have a thin cross stroke when the letter is thick, but it's acceptable. The letter "t" always ends before the ascender line, and the left side of the stroke is generally shorter than the right side; the letter cannot be too wide, as it would be a lot of counterspace. For the punctuation, don't be too flamboyant; the "!" should be thicker on top, thinner at the bottom. The full stop looks like a comma, change it.

Week 10 (25/11/2024):

General Feedback:
Mr. Vinod  gave us suggestions on how we can improve our artwork.

Specific Feedback:
The design is much better than before. The punctuation "!" is too thin, should be the same size with others. The comma is wrong, please refer to the demo in Team.

Week 11 (2/12/2024):

General Feedback: 
Mr. Hafiz helped me with the issue I've met in FontLab 7.

Specific Feedback:
The letters are consistent, make sure all the strokes are the same. Then, you can develop to FontLab.


Week 12 (9/12/2024):

General feedback:
I made a mistake in which I didn't follow the instruction to follow the chart of the measurement.

Specific Feedback:
The kerning looks even, but you should make sure your letters are following the chart provided in Teams.


Week 13 (16/12/2024):

General Feedback: 
Mr. Vinod helped to look at our final artwork and briefed us on the final compilation.

Specific Feedback:
Your poster is too empty, you have to put more words on it.

5. REFLECTION

Experiences:
This is my first experience of creating my own font design using FontLab7. Starting in Illustrator for the sketching process, I create an elegant font, which I was very satisfied with, and it gave me a sense of achievement. The progress requires precise measurement, ensuring the consistency of style and balance. I carefully crafted all of the letters and modified them many times until the final outcome. Moving to FontLab7, I faced a challenge during this process. When I copied the letters "o" and "d", and pasted them into FontLab7, the middle of their circular shape unexpectedly filled in, creating a solid appearance instead of the intended hollow design. Mr. Vinod helped me through this issue, and it removed the filled areas successfully. However, the problem appeared whenever I saved and reopened the project in FontLab7. Despite my corrections, the inner portions of the letters would fill in again, forcing me to copy and paste repeatedly as a workaround, which makes me a little manic. So, I have to continue to do the process until I export it so the issue is gone. Overall, it's a challenging but interesting project.

Observations:
Through this project, I realized that designing a font is not as easy as I thought' it's not just about making it look good; we need to ensure the measurement is precise and functions properly in different contexts. When creating a font, we have to ensure the design is cohesive, like focusing on stroke consistency, such as the thickness; the character proportions, like height and width, are important as well. Always set a clear x-height relative to the cap height and ascenders/descenders; it would maintain the consistency of the letters. 

Findings:
One of my biggest takeaways was how valuable feedback given by Mr. Vinod was. His advice helped me understand some of the technical hurdles, like fixing the paths and working with compound shapes. I've learned a lot from doing this project.

6. FURTHER READING

Week 7 (4/11/2024)

Fig.6.1.1 Typography Essentials Revised and Updated: 100 Design Principles for Working with Type (2019)
Written by: Ina Saltz
Link
This week, I continued with this book that I've read in week 6.

Chapter 3: Letterform details / page 12-13
- Specialized detailing can communicate
In this chapter talks about how small typographic elements can enhance a design's visual impact and the meaning of the text. It said that OpenType fonts allow easy access to alternate glyphs and customization, but altering a typeface without an understanding of typographic design principles can make the design look unprofessional. This chapter taught me that it's important to balance elements with readability.

Fig.6.1.2 Examples design (Manhattan restaurant)


Week 8 (11/11/2024)

Fig.6.1.3 The Typographic Imagination: Reading and Writing in Japan's Age of Modern Print Media (2020)
Written by: Nathan Shockey
Link

This week, I found a book about typographic on Taylor's e-book resources website.

Part 1: The Making of a Modern Media Ecology
Chapter 1: Pictures and Voices From A Paper Empire / page 25-29
In this chapter, it basically talks about the transformative role of print media in Japan during the Meiji and Taisho periods. The writer analyzed how newspapers, magazines, and other printed materials combined visual elements like illustrations and photographs with textual content to create a dynamic "paper empire", which influenced the communication and culture in Japan. This chapter also highlights the interplay between modernization and media, showing how print culture is reflected in changing society.

Fig.6.1.4 Cover of Nisshin Senso Jikki (Record of the Sino-Japanese War), no.30 (July 17,1895)


Week 9 (18/11/2024)

Fig.6.1.5 Typographic Design: Form and Communication (2012)
Written by: Rob Carter, Ben Day, Philip B. Meggs
Link

The Typographic Font / page 35-37
This chapter explained the principles of typographic fonts and explored their anatomy, classification, and functional uses in design. It explores elements such as serifs, ascenders, descenders, and x-height, illustrating how these features impact readability and visual expression. The chapter taught me about the importance of understanding font classifications and how each type letter carries its own identity.

Fig.6.1.6 Classifications of typefaces


Week 10 (27/11/2024)

Fig.6.1.7 Practical Responsive Typography (2016)
Written by: Dario Calonaci
Link

Chapter 3: Web Fonts and Service / page 51-58
I skipped chapters 1 & 2, as I've read a lot of typography e-books, and they all are basically the same in the beginning chapter. This chapter talks about web fonts and services and provides a practical overview of web fonts and their role in responsive design. Besides, it introduces how font selection influences readability and user experience while introducing font services such as Google Fonts and Adobe Fonts. It's such a valuable resource for us looking to enhance typography in modern web design.


Week 11 (2/12/2024)

Fig.6.1.7 Practical Responsive Typography (2016)
Written by: Dario Calonaci
Link

Chapter 4: Modern Scale / page 81-83
" What is a Font Scale? "
I continued with this book I read last week. This part of the chapter talks about font scale, which means a sequence of predetermined font sizes that follow a consistent mathematical progression. Font scale is used to create a balanced typographic hierarchy, ensuring the text elements are proportionally sized. This chapter mentioned that font scales are based on mathematical ratios such as the Golden Ratio, perfect fourth, and so on.


Week 12 (9/12/2024)

Fig.6.1.7 Practical Responsive Typography (2016)
Written by: Dario Calonaci
Link

Chapter 5: Viewport and Size / page 95-103
After I read this chapter, it's a bit confusing and hard to understand, but based on what I know, this chapter is talking about making typography adapt beautifully to different screen sizes using viewport-relative units such as "vw" and "vh". They mention mixing these units with other measurements using tools like callc() and clamp(), which seem to help keep things balanced. There's a part about testing on different devices and tweaking things like spacing to make sure it all looks good, but I feel like I'd need to try it out to really get it.


Week 13 (16/12/2024)

Fig.6.1.8 Design: History, Theory and Practice of Product Design (2015)
Written by: Fernhard E.Burdek
Link

Design and Theory: The Information Aesthetic Approach / page 129
This week, I found a new e-book which talks about product design. This chapter discusses about the application of information theory to design practice, particularly at the Ulm school of Design. This theory was inspired by Max Bense and Abraham A. Moles. In the passage, people believed believed that beauty and design could be analyzed with mathematical precision. For example, Rolf Garnich's work proposed a way to mathematical describe the aesthetic of objects. This approach also influenced adchitecture and led to works like Siegfried Maser's Numerical Asthetics.


















Comments

Post a Comment