Typography Task 3 / Type Design and Communication

Week 8 - Week 12 / 26 May 2023 - 23 June 2023
Leem Sejin / 0362419
Typography / Bachelor of Design in Creative Media
Task 3 - Type Design and Communication

---

 LECTURE

Refer to Task 1

---

INSTRUCTION

<iframe src="https://drive.google.com/file/d/1K_4o4r8JzyDpKCZh__GU_lJ540Dpta6H/preview" width="640" height="480" allow="autoplay"></iframe>

TASK

Week 7

Before we start with the task, we have to explore different writing materials by drawing the strokes. During the exercise, I decided to use brush tip, fine tip,

Fig 1.1 Exercise (19/5/2023)

Fig 1.2 Exercise (19/5/2023)

When we are using calligraphy pen, we have to maintain same angle in order to look consistent.

Week 8

After the exercise, Mr Vinod tasked to do further exploration by writing selected alphabets ; a,e,t,k,g,r

,i,y,m,p,n.

These are the selected pens for exploration :

Fig 1.3 Tools (24/5/2023)

Fig 1.4 Exploration (24/5/2023)

I wrote the selected letters with different writing tools several time, trying different angles, to find out which letterforms will work the best.

After the exploration, this is the finalise of the letters.

Fig 1.5 Finalised experiment (26/5/2023)

Personally, I like the outcome of semi broad pen and brush tip, as I can control thickness of the stroke and tip stroke. However, Mr Vinod said I need to do more exploration, hence, I wrote with 2mm semi broad pen with different angle.

Fig 1.6 Further Exploration (26/5/2023)

After few variation, I can finalise the design that I want to work with, so I wrote them down several times to give consistency. 

Fig 1.7 Finalised letterform (26/5/2023)

Week 9

Research

Out of 10 typefaces, I choose Univers LT Std because the font is similar to my writing. I chose letter 'r', to study. I found that the width of the left stoke is not consistent ; lower part of the stroke is wider than upper part. Also, the curve strok of 'r' is slightly above the x-height.

Fig 1.8 deconstruct (31/5/2023)

I search in google font, to find similar fonts to my handwriting.

After comparing, I found 3 fonts, Amita, Kaushan Script, Sriracha are similar to my writing,

Fig 1.8 deconstruct (31/5/2023)

I selected the best alphabet and aligned them according to the base line.

Fig 1.9 Selected letterform (31/5/2023)

Next, I moved to Adobe Illustrator, and add the guide line to indicate the descent line, baseline, x-height, mean line and ascent line.

Fig 1.10 Selected letterform (31/5/2023)

I decided to write the letters with custom calligraphy brush, in order to control the thickness, especially for curve stroke.

Fig 1.11 Customised brush (31/5/2023)

Fig 1.12 Brush stroke (31/5/2023)

To make the changes I outline the stroke

Object>Path >Outline stroke

Fig 1.13 Brush Stroke (31/5/2023)

The main challenges of adjustment is curve line. For example letter "a", whenever I adjust the angle, the curve stroke does not look as smooth as the actual font. I refer to the fonts to compare how the 

Fig 1.14 Development of letter (31/5/2023)

Week 9 draft

Fig 1.15 Week 9 Draft (2/6/2023)

Week 10

After the lesson, I realised that overall look of my letterforms seems not consistent. Hence, I choose one specific stroke to focus on and copy it to other letters in order to make them same family.

I choose letter 'k' to digitalise the stroke, because I like how the letter 'k' look based on the reference. This time, I used pen tool to draw the stroke with customised pen.

Fig 1.16 Development of stroke (4/6/2023)

After finalising the main stroke, I copy and paste to the rest of the letters.

Comparison between previous and update version:

Fig 1.17 Week 10 draft ( 4/6/2023)

Week 11

I was not satisfied with letter e, because I feel that it is not similar to the rest of the letterforms. As Mr Vinod feedback, I used circle shape as a reference to the rounded area, which is a,e,g,p. 

Fig 1.18 Development of A,E (14/6/2023)

Fig 1.19 Development of m,n (14/6/2023)

Also, I make make the width of the letter 'm' slighter lesser than letter 'n'.

For the special cases: .,!#

Fig 1.20 special letters (14/6/2023)

I refer to the tutorial video that provided by Mr Vinod, and refer to the Univers LT Std.

https://www.instagram.com/p/CRjdPtSjz5K/?igshid=MzRlODBiNWFlZA==

Font lab

Fig 1.21 font lab erros (15/6/2023)

When I transfer the finalised letterforms into FontLab, I found that some of the area is broken, especially the rounded part. This is the one of the challenges that I faced and I had to work back and front several times make sure that all letters look smooth and clean. 

Fig 1.22 Development (15/6/2023)

I removed some paths especially for the rounded area, and refine the edge of the stroke into sharp angles instead of rounded. 

Fig 1.23 Refined version (15/6/2023)

This time, all transferred letterforms are clean.

Next, I adjust the kerning for each letters. This takes a lot of time because I need to compare every single letters to make sure that they have consistent letter spacing.

Fig 1.24 fontlab, kerning (14/6/2023)

Fig 1.25 fontlab, kerning (14/6/2023)

Week 12

I imported the finalised font into adobe illustrator, to work with poster, to promote my typeface.

I research through chat gpt, and make a sentence according to word suggestion.

Things to note : use same font size for poster design, use helvetica or univers LT for name.

Before I begin, I research the typography poster design in pinterest because I was unsure how to make my poster impactful

Fig 1.26 Research (20/6/2023)

After the research, I wrote down the sentences with different layout. 

Fig 1.27 Layout (20/6/2023)

I decided to use first layout, however, there is many white spaces. Hence, I increase the font size to fit the canvas. Also, I used the rectangular shape to maintain same spaces for upper and lower part of the canvas.

Fig 1.28 poster exploration (20/6/2023)

I did further exploration for the layout, to find out which design has the most impactful to the reader.

Fig 1.29 exploration (20/6/2023)

I also added the cracking texture into the word ' anger ' and shadow to letter 'r' , however, I think it attracts the attention due to the white crack, thus, I removed the texture.

Fig 1.30 alignment changes (20/6/2023)

I place the name and title, aligned to the exclamation mark.

Final Task 3: Type Design and Communication :

Final Kerning

Fig 1.31 fontlab, kerning (25/6/2023)

Final Font Design

Download Font : https://drive.google.com/file/d/1ds8TgkqBiZQ3Z9MbVAsZQo8BQ6VqHacu/view?usp=sharing

Fig 1.32 Final Font Design, SlightTilt SJ-Regular, jpeg (25/6/2023)

Fig 1.33 Final Font Design, SlightTilt SJ-Regular, pdf (25/6/2023)

Final Poster Design

Fig 1.34 Final Poster Design, jpeg (25/6/2023)

Fig 1.35 Final Poster Design, pdf (25/6/2023)

---

FEEDBACK

Week 8 

General Feedback : Independent learning week
Specific Feedback : Stick with semi-broad pen, but need to do a lot more exploration.

Week 9

General Feedback : When we digitise, don't resize one another, reduce the size together.

Specific Feedback : Align the letters to the base line.

Week 10

General Feedback :font is finished, polished and consistent in stroke. Angle of the stroke must be same, in order to look consistent.

Specific Feedback : -

Week 11
General Feedback : Need to watch the tutorial video posted for special letters.
Specific Feedback : almost there, but I need to use circle to maintain constancy in letter 'a' and 'e'. For letter 'm', must be same or slightly lesser width as 'n'.

Week 12

General Feedback : all letters must be featured, make the poster impactful, could not have too many white spaces between two sentences.

Specific Feedback : align the name to the exclamation mark.

---

REFLECTION

Experience : This is the most challenging task throughout the typography lesson. I had to explore the tools several times, to finalise the letterforms. Also, it is really hard to maintain consistency to the letterforms, in order to look like same family. I also had faced technical issues in font lab, so I need to make a lot changes during the process. 

Observation :
 I refer to the various fonts that looks similar to my writing, and use many guide lines to compare.When I study existing letterforms, I realise that some of the letters are not in same width. For example, letter 'r', the width of the stroke gets wider as it goes down.

Findings :
I really appreciate the font designers who create from scratch. I did not know that there are many things to concern while designing such as readability and maintain consistent. Although I only create selected letters, I really had hard times to make necessary changes. 

---

FURTHER READING

Fig 2.1 Title of the book (23/6/2023)

This book shared about how to create good graphic design ; form and space, colour fundamentals, choosing and using type, the world of image, putting it all together

I am interest in third and last chapter, as it help me to find out what is good type and how to make them into graphic design.

Fig 2.2 (23/6/2023)

This chapter covers structure of the font and learnt different word expression used in typo.For example, I never heard of Mathematical spacing, and it refers to the exact same space between each letter. It gives different examples of what are the good and bad kerning, and writer used rectangular shape to provide easier identification of bad kerning. Next time, when I am unsure with my kerning, I can use the same methods for better observation.

Fig 2.3 (23/6/2023)

Fig 2.4  (23/6/2023)

I also gain knowledge about stroke formation, where I realised during the letter deconstruction. It says uniform stroke weight produce consistent, but less energetic, rhythm across the line. In order to put contrast to the letters, usually a flaring in thickness from the midpoint of the stem outward to the terminals, and it calls 'Modulation'

Fig 2.4  (23/6/2023)

It also contains what should avoid when handling large amount of text. For example, I did not know that italic type needs spacing also as sometimes it appears smaller and tighter than roman counterpart.

 

This book is really interesting as it covers basic composition , methods of choosing right fonts and design process. At the last page, it also shows the examples done by the professional. 

Twenty rules for making good design

1. Have a Concept
2. Communicate, don't decorate
3. Be universal
4. Speak with one visual voice
5. If you can do it with less, then do it
6. Create Space; don't fill it
7. Give 'em the one-two punch
8. Beware of symmetry
9. Fight the flatness
10. pick colours on purpose
11. Less colour is more
12. Master the dark and the light
13. Type is only type when it's friendly
14. Use two typeface families, maximum
15. Treat type as you would image
16. Avoid Redundant Redundancies
17. Create images-don't scavenge
18. Look to history, but don't repeat it
19. Ignore fashion.
20. Be decisive