Typography - Task 3: Type Design and Communication

16/05/2023 - 27/06/2023 / Week 7 - Week 13
Joey Lok Wai San / 0350857 Typography / Bachelor of Design (Hons) in Creative Media Task 3: Type Design and Communication

TABLE OF CONTENTS
1. Lectures
2. Instructions Task 3: Type Design and Communication
3. Feedback
4. Reflection
5. Further Reading 6. References

LECTURES

All lectures completed in Task 1 - Exercises

WEEK 7

Mr. Vinod briefed us on Task 3: Type Design and Communication. We then proceeded to use the materials (writing tools, ink, and graph paper) we brought to write horizontal, vertical, diagonal and circular lines using 5 tools in 5 different ways for each tool. We then wrote the letters A, O, T, M, X. We selected one option from each tool to write "a e t k g r i y m p n" in the selected style. Mr. Vinod advised us to keep the same angle throughout because varying angles, pressures, etc., would result in different outcomes.

Fig. 1.1 Class Activity, Week 7 (16/05/2023)

WEEK 8

This week was ILW (Independent Learning Week), thus we did not have any lectures. Mr. Vinod asked us to upload our progress of the 5 different selected options onto Facebook. For next week's lesson, we have to take the selected writing style and tool and explore and practice writing in that style. We should write until the letterforms have a consistent look and feel. They must look like they are part of a family.

Fig. 1.2 “Typography Task 3A Typeface Construction” Video, Week 8 (22/05/2023)

Once the letterforms look consistent and homogeneous, we had to watch this video tutorial on digitisation and construction. We would then have to analyse a typeface from the 10 given typefaces provided in the previous tasks and a typeface from Fontshare or Google Fonts. It was suggested we choose lowercase letters with ascenders, descenders, and x-height.

WEEK 9

We were briefed on how to proceed with Task 3 during this week. We will be digitizing our chosen final version of our writing style. First, we were given a demonstration by Mr. Vinod, on how to digitize the letterforms in Adobe Illustrator. There are 3 different ways to do so: (1) using the brush tool, later combined with the pen tool for details. (2) using the pen tool and then the brush tool, (3) starting with basic shapes, then using the pen tool to adjust the letterform. From the video in Fig. 1.2, we created our artboards and started digitising our letterforms in class.

Fig. 1.3 Digitizing in Class, Week 9 (02/06/2023)

We also had a sharing session by Low Hsin Yin (a type and graphic designer from Malaysia) on Friday, 2nd June 2023. It was a very interesting sharing session and I learned a lot about the commercial vehicle labels in Malaysia.

Fig. 1.4 Sharing Session by Low Hsin Yin, Week 9 (02/06/2023)

Fig. 1.5 Notes From Sharing Session, Week 9 (02/06/2023)

WEEK 10

This week, Mr. Vinod gave us feedback and advice on how to improve the digitization of our typeface. We need to refine the letters to make it look more "font-like". Refining takes a lot of time and focuses on lots of small details.

WEEK 11

Mr. Vinod gave us feedback on our improved and refined letterforms, as well as punctuation. One of the most repeated comments was to analyse existing punctuations, especially hashtags and exclamation marks, before doing our own design. We were also tasked to check on our peer's e-portfolio and provide them with feedback. We are required to finalize this project by adjusting the individual kerning on FontLab and completing any legal notes for our font. Finally, we were tasked to create a poster to showcase our font, by creating a sentence using only the limited letterforms we designed.

WEEK 12

Mr. Vinod briefed us on how our final submission should be presented in our blog. We also had to create our final compilation blog, which includes links and final work from Task 1, 2 and 3. Mr. Vinod then gave us feedback on our poster and was given time to make amendments and complete it.

INSTRUCTIONS

https://drive.google.com/file/d/1Fa_8v8rFlQ2C5sBRt7drwWp8NZxm1CfD/preview

TASK 3: Type Design and Communication

For Task 3, we have to design a limited number of Western (Latin) alphabets. We have to choose an existing font design which adheres to the direction we want to head in. We then have to analyse its anatomical parts, do rough sketches on our typeface and digitize those sketches using Adobe Illustrator and FontLab.

1. Typeface Research

Anatomy of Typography

When designing a typeface, we have to be aware of these typographic guidelines such as the baseline, median, ascender, descender and the typography basics shown below in Fig. 3.1.

Fig. 2.1 Typography Basics, Week 7 (16/05/2023)

Type Classifications

Most typefaces are classified into four groups: serifs, sans-serif (without serifs), scripts and decorative styles (Strizver, 2015). 1. Serif - Old Style, Transitional, Modern (Neoclassical/Didone), Square Serif, Glyphic 2. Sans-serif - Grotesque, Geometric, Humanistic 3. Scripts - Formal, Casual, Calligraphic, Blackletter, Handwriting 4. Decorative

Typographic Optical Illusions Overshoot - The degree to which capital letters go below the baseline or above the cap height, or to which a lowercase letter goes below the baseline or above the x-height, to have an optically similar appearance in size. Overshoots are used in capitals, triangles and rounded letters. (Piotr Łukaszkiewicz, 2019).

Fig. 2.2 Overshoots, Week 7 (16/05/2023)

Curved/rounded characters appear shorter than square characters of the same height. This is because less of the character touches the tallest point on the line. It is essential to use overshoots and optical corrections for rounded letters to appear the same size. This makes them protrude slightly beyond the baseline and the cap-height line.

Fig. 2.3 Overshoots - Rounded Characters, Week 7 (16/05/2023)

Triangle-shaped glyphs also seem smaller than square-shaped characters with the same dimension. Overshoots are needed in the sharp tips.

Fig. 2.4 Overshoots - Triangle Shaped Characters, Week 7 (16/05/2023)

Angle of Stress The angle of stress determines the direction of thick and thin strokes and the contrast in type.

Fig. 2.5 Angle of Stress, Week 7 (16/05/2023)

2. Deconstruction of Letters We have to choose an existing typeface that comes close to our design and analyse/ deconstruction the letterforms (a typeface from the 10 typefaces provided and a typeface from Fontshare or Google Fonts). It was advised to choose lowercase letters with ascenders, descenders and x-height, and capitals with a cap height.

Fig. 3.1 Deconstruction of Letters, Week 7 16/05/2023)

First Attempt - Gill Sans Std Bold Condensed In my first attempt at deconstruction, I chose Gill Sans Std Bold Condensed. However, after deconstructing, I realized the typeface was not similar to my chosen writing style at all.

Fig. 3.2 First Attempt - Deconstructing Letters with Guidelines, Week 7 (16/05/2023)

Fig. 3.3 First Attempt - Deconstruction of Letters "n", "t", "p" and "M", Week 7 (16/05/2023)

10 Typefaces - ITC New Baskerville Std Roman After my failed attempt, I chose a different typeface. Out of the 10 provided typefaces, I chose ITC New Baskerville Std Roman as my reference. It looks similar to my writing style with thick and thin strokes, especially with the uppercase letter "A". I chose to deconstruct the letters "m", "p", "k", and "A". The lowercase letters have an x-height, ascender and descender, and the uppercase letter has a cap height.

Fig. 3.4 Deconstructing Letters with Guidelines - ITC New Baskerville Std Roman, Week 7 (16/05/2023)

    
Fig. 3.5 Deconstruction of Letters "m", "p", "k", "A" - ITC New Baskerville Std Roman, Week 7 (16/05/2023)

From deconstructing these letters, I noticed that the lines are not actually straight, but instead more curved. There are dents in the serif tails, which gives a unique look upon closer inspection of the typeface.

Google Fonts - Playfair Display I chose to deconstruct and analyse Playfair Display. The typeface looks similar to my chosen style, especially in the uppercase letters. I deconstructed the letters "A", "G", "P", and "h".

Fig. 3.6 Deconstructing Letters with Guidelines - Playfair Display, Week 7 (16/05/2023)

Fig. 3.7 Deconstruction of Uppercase "A", "G", "P", "h" - Playfair Display, Week 7 (16/05/2023)

3. Writing Activity Exploration

We started Task 3 with this writing activity. These are the instructions:

- Write diagonal, horizontal, vertical and circular lines for all 5 tools in 5 different ways for each tool - Write 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 k g r i y m p n" in the selected style.

Before starting to write and commit to graph paper, I did a few test rounds on recycled paper. This was a good way to test out all the writing tools I have and choose my five favourite tools to proceed with.

Fig. 4.1 Practise Rounds, Week 7 (16/05/2023)

Fig. 4.2 Writing Tools, Week 7 (16/05/2023)

After getting over some nerves, I proceeded to write the lines and letters for all five tools in different methods e.g. holding tools at different angles, increasing and decreasing writing pressure, writing fast and writing slow, etc.

Fig. 4.3 Writing Diagonal, Horizontal, Vertical and Circular Lines, Week 7 (18/05/2023)

Fig. 4.4 Writing AOTMX, Week 7 (18/05/2023)

Fig. 4.5 Selected Options Attempt, Week 7 (18/05/2023)

I noticed a few mistakes with my first attempt and tried again. The letters are not written/sat on the baseline. The letter "t" is usually written slightly higher than the x-height.

Fig. 4.6 Final 5 Different Selected Options, Week 8 (23/05/2023)

Week 8 Instructions Once we had our 5 different selected options, we chose our favourite/best one. - Take the selected writing style and tool and explore and practice writing in that style.

- Write more lines. Use the selected letterforms: a e t k g r i y m p n. - Write until the letterforms have a consistent look and feel. They must look like they are part of a family.

- Analyse the letters, look for the letterforms that don’t seem consistent and resolve them. - When the letterforms look consistent, watch the tutorial on digitisation and construction (Fig. 1.2) Exploring the writing style When exploring the chosen writing style, I tried writing in uppercase and lowercase letters while retaining the same stroke and angle of the pen. I also explored writing the letterforms in italicized form (slightly slanted), compressed, expanded, etc.

Fig.4.7 Exploring Writing Style, Week 8 (23/05/2023)

Practising the writing style To get a hang of writing in this style, I practised writing each individual letter in the selected style. Upon practising the individual letters, I wrote them once again all at once. I tried to maintain a level of consistency, homogeneity in the style.

Fig. 4.8 Practising the Writing Style, Week 8 (23/05/2023)

Final Options After practising several more times and resolving and analysing letterforms, these are the final letterforms. In my opinion, the letterforms have a similar look and feel.

Fig. 4.9 Final Option Writing Style, Week 8 (23/05/2023)

4. Digitizing I first created the guidelines on a 1000pt x 1000pt artboard by following the tutorial video by Mr. Vinod (Fig. 1.2). Using the letters "Tyd" in Myriad Pro Regular, I created a 500pt x 500pt box to determine the x-height. The ascender line, descender line, cap line, median line, baseline, and x-height is subject to our design and can be bigger or smaller.

Fig. 5.1 Guidelines, Week 9 (30/05/2023)

Average Measurements (differs with design)

- Ascender: 750pt - Cap Height: 700pt - X-height Overshoot: 550pt - X-height: 500pt - Baseline: 0pt - Baseline Overshoot: -50pt - Descender: -200pt - Descender Overshoot: -250pt

Using our final chosen writing style, we have to digitize the letters: a e t k g r i y m p n / A E T K G R I Y M P N in Adobe Illustrator. This is my first attempt at digitizing the letter "K" in Week 9 class.

Fig. 5.2 First Attempt - Digitization in Class, Week 9 (30/05/2023)

Brush Tool Mr. Vinod said to complete all the letters first before going into the details. Thus, I went home and tried digitizing all the letterforms with the brush tool. However, the strokes were too asymmetrical and messy.

Fig. 5.3 Digitization with Brush Tool, Week 9 (30/05/2023)

Fig. 5.4 Digitization with Brush Tool, Week 9 (30/05/2023)

I then decided to use the most effective (but time-consuming) method to digitize my letterforms, using basic shapes. Shape Tool This was my first attempt at using the shape tool. Click the image to read the description of my progress.

Fig. 5.5 Digitization with Shape Tool - First Attempt, Week 9 (30/05/2023)

I realized my mistake on the first attempt. I did not start with simple shapes, which led to lots of disproportion in my letters. I also realized my guidelines are not accurate and did not follow the basic measurements - and when creating capital letters, don't use the entire artboard. I learned from this by outlining my sketch with blocks of shapes and developing the design from there. By doing so, I can use the anchor points to create the best shape. This was my next attempt at using the shape tool, improving and learning from my previous try. Click the image to read the description of my progress.

Fig. 5.6 Digitization with Shape Tool, Week 9 (30/06/2023)

Final Outcome with Shape Tool

Fig. 5.7 Final Digitization with Shape Tool, Week 9 (30/05/2023)

5. Refinement (After Week 10 Feedback) After digitizing our letters from our writing, we went on to refine our letters in such a way that the letterforms become font-like. Mr. Vinod recommended sharpening the edges and neatening up the letters by using fewer anchor points, especially with curves. This is a demonstration with the letter "R".

Fig. 6.1 Feedback Demonstration - Letter R, Week 10 (06/06/2023)

When sharpening the corners of the letters, I created two different edges (the first shape is the original). Mr. Vinod said the details and decision were up to me. The last shape has more character but I decided to use the middle shape because I wanted a sharp design look. The thin strokes were also sharpened to match the other lines.

Fig. 6.2 Different Edges Process, Week 10 (06/06/2023)

Punctuation Construction After digitizing our letters, we were also tasked to design the punctuations: . , ! #. I watched and read about creating punctuations through this link https://www.instagram.com/p/CRjdPtSjz5K/?utm_source=ig_web_copy_link&igshid=MzRlODBiNWFlZA==.

Fig. 6.2 Different Edges Process, Week 10 (06/06/2023)

I used the shapes from my letters to make sure they were consistent. I used the vertical strokes from my letterforms for the exclamation point. For the "#", I tilted the vertical strokes a little. The horizontal lines on the punctuation come from the lines on the letter "I".

Fig. 6.3 Punctuation Process, Week 10 (06/06/2023)

Fig. 6.4 Final Punctuation - After Feedback, Week 10 (06/06/2023)

Final Letterforms

Fig. 6.5 Final Outcome of Letterforms and Punctuation, Week 10 (06/06/2023)

Measurements

- Ascender: 750pt -Cap Height Overshoot: 713pt

- Cap Height: 700pt - X-height: 500pt - Baseline: 0pt - Baseline Overshoot: -28pt - Descender: -149pt

Fig. 6.6 Final Guidelines, Week 10 (06/06/2023)

Fig. 6.7 Final Guidelines Closeup, Week 10 (06/06/2023)

6. FontLab
Once the digitization process was complete, I exported the letterforms and punctuation into FontLab, following the tutorial provided by Mr. Vinod.

Fig. 7.1 Adobe Illustrator to FontLab, Week 11 (12/06/2023)

The next step is the kerning of each letter to ensure the spacing between each letter looks consistent. I started with the letters "A" and "E", then continued to kern the other letters side by side in the metrics tab,. I noticed it was difficult to kern the letters that are curved, "G", or had an extended line such as "A", "E", "R".

Fig. 7.2 Kerning Progress, Week 11 (12/06/2023)

Fig. 7.3 Kerning Progress, Week 11 (12/06/2023)

Fig. 7.4 Kerning Progress, Week 11 (12/06/2023)

7. Poster Design We have to create a poster using our font. We are allowed to come up with our own text using only the letters created. The requirements of the poster are as followed:

- The poster must be impactful

- The poster dimension must be A4 size

- The text must contain only the letters provided - The words are not allowed to have different point sizes

I wanted to relate my phrase to typography and type. These are some of the phrases I have come up with: "Make art. Ignite my pen!" "Greet my type. Ignite my pen!" "Make art. Paint art. Keep art great." "Make art. Keep type great." "Pirate my type. Take my art!" "Take my pen. Make great type/art."

Fig. 7.5 Poster #1, Week 12 (19/06/2023)

Fig. 7.6 Poster #2, Week 12 (19/06/2023)

Fig. 7.7 Poster #3, Week 12 (19/06/2023)

After Week 12 Feedback I developed Poster #1. Mr. Vinod suggested the gap may not be necessary and can try to put all the lines together.

Fig. 7.8 After Feedback Development, Week 12 (20/06/2023)

After experimentation: putting all the lines together makes the composition boring, as there is not enough movement. Mr. Vinod agreed to leave the gap. I also realized two letters were missing, which I lightened and left at the end of the sentence.

Fig. 7.9 Experimentation with Information Text, Week 12 (20/06/2023)

Fig. 7.10 Adding Texture, Week 12 (20/06/2023)

8. Full Progress The name of my font is "Corsair Sabre", which also means "Pirate Sword" - corsair is another term for pirate and sabre for a sword. The features of the design remind me of a sword, with straight lines and curved sharp edges of a sword. Furthermore, the word pirate consists of the letters made - A E T K G R I Y M P N, which I used in my poster design.

Fig. 8.1 Entire Ai Artboard, Week 12 (20/06/2023)

Fig. 8.2 Ai Construction Full Process, Week 12 (20/06/2023)

Final Task 3: Type Design and Communication
Font download: https://drive.google.com/file/d/1YseBXt2PPfvqxKdBoS5uOAmsc3FGKc7L/view?usp=sharing

Fig. 8.3 Final Type Design and Communication "Corsair Sabre" - JPEG, Week 13 (26/06/2023)

Fig. 8.4 Final Type Design and Communication "Corsair Sabre" - PDF, Week 13 (26/06/2023)

Fig. 8.5 Letter Construction in Ai, Week 13 (26/06/2023)

Fig. 8.6 Screengrab of "Corsair Sabre" from FontLab, Week 13 (26/06/2023)

Fig. 8.7 "Corsair Sabre" A4 Poster - JPEG, Week 13 (26/06/2023) Fig. 8.8 "Corsair Sabre" A4 Poster - PDF, Week 13 (26/06/2023)

Font Preview

Top of page ↑

FEEDBACK

WEEK 7

General feedback

Write the lines and letters in one direction. Keep the same angle throughout because varying angles, pressures, etc., would result in different outcomes.

Specific feedback

When writing circular lines and the letter "O", do not write it in just one stroke. You should write them with two strokes that connect in the middle.

WEEK 8

General feedback

ILW (Independent Learning Week): Practice writing in that style a few more times to identify the best letters to use for digitization later

Specific feedback

ILW (Independent Learning Week): Go with option 3 (calligraphy pen) writing style. The letter "G" needs work as the angle doesn't seem right.

WEEK 9

General feedback

Follow the writing procedure step-by-step, not directly skip to the 5 options without practising and exploring the tools and styles. Use fewer anchor points and make it more naturally written by curving the point and adding texture to the character. Use a brush tool, pen tool, or both.

Specific feedback

Draw the base for each letter first and insert the details later. By writing all the letters first, we can look at them side by side to see if they are similar.

WEEK 10

General feedback

Digitization should not be an exact replication of the writing. Refine the lines in such a way that the letterforms become font-like. Sometimes it is best to start over and not continue to refine what we already have

Specific feedback

The progress looks good. Mr. Vinod recommended sharpening the sides. Use fewer anchor points to make a smoother curve. The details are up to you; I can make the edges straight/sharp or have smaller edges.

WEEK 11

General feedback

Hashtags vary with fonts – some are straight and some slanted. Dissect the punctuation to better understand how to design them. Exclamation marks – the bottom section is slightly smaller than the top.

Specific feedback

Looks good, no issues to comment on. Sharp punctuation doesn’t really work in the process.

WEEK 12

General feedback

The information needs to be aligned with something, it can be used to link the sentence.

Specific feedback

Good sentence and typeface. Make the text part of the composition. The gap may not be necessary, can try to put all the lines together. After experimentation: putting all the lines together makes the composition boring, with not enough movement. Leave the gap be.

REFLECTION

Experience

This is my favourite typography task by far. It is really interesting to create and develop my own font, albeit just a few letters. At first, this task seemed incredibly daunting. However, the process went by surprisingly smoothly, it was a little rocky at the start with the experimentation of different pen strokes, but after, it went by like nothing. This may be because I had fun coming up with designs, playing with the details which led to completely different designs, and watching the font slowly come alive. The overall process of designing the font from start to finish was enjoyable and a memorable experience. I feel very satisfied with the results of the design of my first font, and very grateful for this project.

Observations

My observation from this task was the importance of details in a typeface. When deconstructing existing letterforms, I noticed that all font designs look the same, but upon closer inspection, they are incredibly different and unique from each other. For example, the vertical and horizontal strokes are not always straight but instead have a slight curve to them. These little details are important because they affect the way the letters look from afar. Designers must use illusions, such as overshoot, to ensure a constant size of the letters.

Findings

I found that creating and developing a typeface takes a lot of patience and observation. We have to understand the basics of designing a type before actually proceeding with it. Without observing, researching and learning, we will encounter lots of setbacks during the process. I am glad I noticed this early on, as it prevented me from repeatedly making amendments. It is not an easy process to simply create a typeface, and I have major respect for typeface designers.