Typography - Task 3: Type Design and Communication (Font Design)

16/5/2023-27/6/2023 Week 7 - Week 13
Ng Jia Ern 0363033
Bachelor of Design (Honours) in Creative Media
Task 3 / Type Design and Communication

CONTENT

1. Lectures

2. Instructions

Task 3

Final Submission

3. Feedback

4. Reflection

5. Further Reading

LECTURES

All lectures completed in task 1

Class summary:

Week 7
Mr. Vinod reviewed Task 2 and gave feedback. Then he introduced Task 3: font design. We were instructed to bring five writing tools with different nibs, including one experimental tool, along with ink and graph paper. We practised writing diagonal, horizontal, vertical, and circular lines in various ways using each tool to understand the differences in stencils. This exercise prepared us for the main assignment of type design and communication in Task 3.

Week 8
Week 8 is independent learning week, so were no classes this week. Therefore, for this week, we continue to proceed with our writing activity from week 7. We have to choose the one we preferred out of the 5 selected options from different tools and continue to practice and explore the particular writing style.

INSTRUCTIONS

We are to assign to design a limited number of Western alphabets, which are a, e, t, k, g, r, i, y, m, p, n, !, #, and ,. Upon completion of the font, we will create a basic A4 size poster displaying our font (further instructions in class).

To-do

1. Choose an existing font design that aligns with the desired direction.

2. Study the font carefully by analysing its anatomical parts.

3. Create rough sketches and explore various options.

4. Digitize the drawings using Adobe Illustrator and FontLab.

5. Print out the artwork for critique sessions and make refinements.

6. If time permits, generate the font for actual use.

Process:

1. Deconstruction

It was instructed to choose and study an existing font design that adheres to the design direction we are aiming for. I have chosen to analyze the anatomical structure of the font, Janson Text LT Std by deconstructing the letters 'K and G'.

Fig. 1.1 Deconstruction of K, Week 11 (11/6/2023)

Fig. 1.2 Deconstruction of G, Week 11 (11/6/2023)

Overshoot is the practice of extending the height of curved strokes slightly beyond the baseline and cap height to create a visually balanced appearance for curved letterforms.

I also did some further reading (refer to Fig 7.1) to help me as I develop my own typeface.

2. Sketch

In week 7, we did a simple exercise to write with 5 different writing tools. We are required to complete:

Writing diagonal, horizontal, vertical and circular lines for all 5 tools in 5 different ways for each tool.
Writing 'AOTMX' for all 5 tools in 5 different ways for each tool.
Select 1 option from the 5 different options from each tool and write "a e t l g r i y m p n" in the selected style. Choose either UPPERCASE or lowercase to write in.

Fig 2.1 Diagonal, horizontal, vertical and circular lines, Week 7 (16/5/2023)

I practised drawing diagonal, horizontal, vertical, and circular lines using a calligraphy pen, round tip pen, and a soft brush. As an experiment, I also tried using a bundle of spaghetti as a writing tool. The spaghetti created interesting brush strokes akin to Photoshop's texture brushes, but it proved too complicated and messy to transform into a font.

Fig 2.2 Writing AOTMX in different tools, Week 7 (16/5/2023)

I further experimented with a flat screwdriver as an alternative tool. I like the contrast achieved between vertical and horizontal strokes when writing at the same holding angle.

Besides exploring different tools, I also ventured into different writing styles, including Script and Gothic.

Fig. 2.3 Font design sketches, Week 7 (20/5/2021)

Personally, I like simple and minimalist style font more so I refer to Helvetica and conducted a brief study on its design. Besides that, I also like the screwdriver so much and have done many explorations on it.

Fig 2.4 Compilation of 5 different handwritings by each tool, Week 7 (20/5/2021)

I like the 5th design the most so I choose to practice this style more.

Final option:

Fig 2.5 Practices on "Screwdriver" Font, Week 8 (23/5/2021)

3. Digitisation

Before digitising my sketch, I have done some study on letter-forming tips (refer to Fig 6.1), which helps me a lot to build my letter correctly.

First, I established guidelines for the baseline, x-height, and cap height. Then, I utilized the letter O and H as reference points to construct the remaining letters and set the thick and thin strokes to a certain ratio.

Fig 3.1 letter O and H, Week 9 (30/5/2021)

Using rectangles and circles as building blocks, I created the letters based on my sketches. I have adjusted the width of the letters because I think they look too wide if referring to my handwriting.

Fig 3.2 Digitisation Process #1 Outline view, Week 9 (30/5/2021)

Fig 3.3, Digitisation Process #2, Week 9 (30/5/2021)

Fig 3.4 Comparison between sketch and first attempt, Week 9 (30/5/2021)

Fig 3.5 First attempt Week 9 (30/5/2021)

From the first attempt, I found a big problem with the letter G. It is very hard to build the smooth curve that I want.

Fig 3.6 Digitisation Process #3 Outline view, Week 10 (6/6/2021)

The solution for the letter G is, I change the method of building the letter to use pen tool to draw paths and then add brush strokes for the path. This method can create smooth curves for G but the stroke width is not the same as other letters, so, I redo all the other letters using this new method.

Fig 3.7 Second Attempt, Week 10 (10/6/2021)

After receiving feedback from Mr Vinod on week 11, I noticed that my letters' contrast is still not enough, the horizontal strokes need to be thinner, and the curves for letters P and R are not smooth.

Fig 3.8 Third Attempt, Week 11 (17/6/2021)

Guides on constructing punctuations:

https://www.instagram.com/p/CRjdPtSjz5K/

I study the construction of comma, its height should be two stacked periods. But I think this height is very weird in my font design so I shorten a bit the downstroke.

Fig 3.9 Punctuation design process, Week 11 (17/6/2021)

Fig 3.10 Comparing three attempts, Week 11 (17/6/2021)

4. Fontlab

After finalising the design of my typeface in Illustrator, I began the process of exporting my font to FontLab.

Fig 4.1 Copy and paste fonts to Fontlab 7, Week 11 (18/6/2021)

Fig 4.2 Adjusting kerning pairs, Week 11 (18/6/2021)

Fig 4.3 Kerning Process, Week 11 (18/6/2021)

I checked my kerning using Pairs&Phrase panel in Fontlab 7 by clicking all the pair presets. And also do not forget to kern punctuation too.

5. Poster

Instructions:

Create a sentence ourselves that contain all the letter we design and use the sentence to design an A4 poster.
The sentence only can use the same point size.
The sentence needs to be interesting and impactful.

I came out with "making a pretty kite in park" this sentence included all the letters and I came out with my first poster design.

Fig 5.1 Poster layout #1, Week 12 (20/6/2021)

Mr Vinod said my sentence was not interesting enough and the spaces on the top and bottom of the artboard didn't utilize well.

Therefore, I changed my sentence to "making pretty pretty pretty kite!". Though repeat the word "pretty" to emphasise it. Besides, because the small description is a little boring when just stacking up neatly, I also give the small description a design to make it looks not no boring.

Fig 5.2 Poster layout #2, Week 12 (20/6/2021)

Final Task 3: Type Design and Communication1:

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

Fig 6.1 Final Task 3 "Screwdriver" - JPEG, Week 12 (20/6/2021)

Fig 6.2 FontLab Screengrab, Week 12 (20/6/2021)

Fig. 6.3 Poster A4 - JPEG, Week 12 (20/6/2021)

Fig.6.4 Final Task 3 "Screwdriver" - PDF, Week 12 (20/6/2021)

Fig. 6.5 Poster A4 - PDF, Week 12 (20/6/2021)

FEEDBACK

Week 12

Specific Feedback: The contrast between the vertical line and the horizontal line is still not enough obvious.

Week 11

Specific Feedback: The vertical line needs to be thinner, and the curves need to be smoother.

Week 10

General Feedback: When digitalizing letters, need to adjust and maintain the consistency of the strokes, can't directly trace the letters that we have written out.

Specific Feedback: The horizontal strokes and vertical strokes contrast is not obvious.

Week 9

General Feedback: Try looking for little things that create characters in letters, such as thick and thin strokes, the angle of the nib, and minor breaks and identify letters that don't have too much character.

REFLECTION

Experience:

Designing a typeface was a challenging but rewarding experience. It required a combination of creativity, attention to detail, and technical skills. I enjoyed exploring different writing tools and experimenting with different styles and techniques to develop my own unique font.

One of the highlights of this task was the opportunity to analyze and deconstruct existing fonts. This exercise helped me understand the anatomical structure of letters and provided inspiration for my own designs. Additionally, receiving feedback from Mr. Vinod during critique sessions was important in guiding me to improve and refine my work.

Observations:

Throughout the process, I observed the significance of contrast in letterforms. It became apparent that the contrast between vertical and horizontal strokes plays a crucial role in enhancing legibility and visual appeal. I learned that finding the right balance between these elements is essential for creating a harmonious and aesthetically pleasing typeface.

I also noticed the importance of smooth curves in letter construction. Achieving smooth and flowing curves can be challenging, but it is crucial for creating visually pleasing letters. Additionally, maintaining consistency in stroke widths and adjusting proportions were key factors in producing a cohesive and balanced design.

Findings:

One of the significant findings from this task was the need for thorough digitization of sketches. Merely tracing the initial sketches without considering adjustments and maintaining stroke consistency can result in an inconsistent and unrefined final typeface. Taking the time to digitize and refine the letters in software like Adobe Illustrator and FontLab helped me achieve a more polished and professional outcome.

Furthermore, I discovered the value of exploring different tools, styles, and existing fonts. By experimenting with various writing tools and studying established typefaces like Helvetica, I gained a deeper understanding of letter construction and developed my own design preferences. This process of exploration and analysis allowed me to create a typeface that aligned with my desired aesthetic direction.