Typography // Task 3A // Type Design & Communication

October 19, 2021

Typography // Task 3A // Type Design & Communication

13/9/21- 27/10/21 Week 8-10

Chan Siew Ni #0352518 #BDCM

Typography: Task 3A // Type Design & Communication

LECTURES

All lecture notes are completed and can be found in the link given.

Lectures 1-5 : Link

Lectures 6 : Link

Week 7(6/10/21): Mr Vinod introduced us about the task 3A which is our new task. He asked us to watch the video(Typeface constructions) before starting the task. Firstly, we have to create artboard in 1000 x 1000 points. We then make a square (500 x 500 points)and this is the point size of x-height. Then we can make the guide line.

Figure 1: Making guide line as the lecture video , 6/10/21

Figure 1.1: week 7 class , 6/10/21

Figure 1.2: Week 9 class, 20/10/21

INSTRUCTIONS

In task 3A we will be designing these letters: a i m e p y t g d o b ! , .

We should start with doing some research on existing typefaces. Then , we can sketch a few alphabets based on the 10 typefaces given earlier.

1. Research

Figure 2: Typeface design sources from Pinterest , 7/10/21

Figure 2.1: Different between sans serif and serif sources from Google , 8/10

Figure 2.2: Typeface design by Darek sources from Pinterest , 8/10

Figure 2.3: Typeface design sources from Pinterest , 8/10

2. Sketches

I did few sketches on grid notebook. I prefer serif #1 but I feel like it is a bit to sharp. The serif #2 I draw is putting the same round arch shapes. Then, the san serif #1 I tried to make is like only the upper left corner is more curves and the rest is sharper. I feel like the san serif #2 is a bit too simple and not very unique.

Figure 3: Pencil sketches , 10/10

Figure 3.1: Pencil sketches san serif, 11/10

3. Type Deconstruction

I decided to deconstructed the typefaces called Janson text because It inspired me to draw out the sketch and in the process of deconstructing the letter, I can clearly see all the element that in a letter that makes it become letter. It is so fantastic that we all using letterforms and words everyday but we don't really look very details on the letter before.

Figure 3.2: Deconstruction 'b' , Reference: Janson Text 55 Roman

Figure 3.3: Deconstruction 'e' , Reference: Janson Text 55 Roman

Figure 3.4: Deconstruction 'p' , Reference: Janson Text 55 Roman

4. Digitalize

At the end, I picked the serif#1 and digitalize it because I feel like it looks good. Before I start, I first making the guidelines so that It will be more easier when I work on digitalizing the typeface.

Figure 4: Setting the guidelines

The digitalize version is a bit different from what I did in the sketch version because I think it is too sharp so I change it all to a bit round arch and I feel like this is much better and It is more comfortable to look at.

Figure 4.1: Work progress on digitalizing the alphabets

To ensure all the strokes have the same thickness, I also added guidelines to make sure that they were in the same size.

Figure 4.2: Work progress on digitalizing the alphabets

Figure 4.3 : First attempt on typeface design, 19/10

Figure 4.4: Second attempt on typeface design after changes, 20/10

After listening to the feedback, I resize the letter so that they look in same size and I feel that it is way more better than the previous one because it looks neat and more consisting. But there are still some problems that I didn't maintain well.

Figure 4.5: Final digitalized letter, 22/10/21

5. Generating the font in Fontlab 7

Before start to paste the letter into Fontlab 7, we have to measure the point size of all of the guidelines. We have to use baseline as 0pt as the reference point.

Ascender line-721pt

Capital line-686pt

Median-500pt

Baseline-0pt

Descender line- (-232pt)

x-height-500pt

After this, we can put these data into Fontlab 7 so that it is accurate with what we done using illustrator. Then we can now copy our letter designs and paste it into Fontlab 7. I called my type design 'Sims' because for the first ideas I was to make a shape looks like a sim card but I feel like the edges are too sharp so I curve it. After pasting all letter into it, we also have to make sure to open tab for each letter to check the details of every letter so that they were same with what we done using Illustrator.

Figure 5: Pasting letter from Illustrator to Fontlab 7, 22/10/21

Figure 5.1: work progress on adjust details of every letters in Fontlab7 ,22/10/21

Then, we have to open a new metrics tab to adjust letter kerning and spacing. This is very important because it will affects the readability and overview. We can set a fixed number of kerning for each letter and do some adjustment if the gap of two letter is too big or too small.

Figure 5.2: work progress on adjusting letter spacing and kerning in Fontlab7, 23/10/21

Final Submission of Task 3A: Type design and communication

Download Fonts from here : Sims-Regular

Figure 6: Final Task 3A- Sims Regular jpeg, 23/10/21

Figure 6.1: Final task 3A- black and white poster jpeg, 25/10/21

Figure 6.2: Final Task 3A-Sims Regular-pdf, 23/10/21

Figure 6.3: Final task 3A- black and white poster pdf, 25/10/21

FEEDBACK

Week 9(20/10/21)

General Feedback: Mr Vinod ask us to analyze the details of typefaces and also punctuation.

Specific Feedback: Mr Vinod said that It is not consisting very well. Every letter has different width and He ask me to maintain it all same width and also make sure all the strokes are all same thickness. He also mentioned that the serif that appear in word 'b' and 'd' can be removed. The second round of consultation, Mr Vinod said that the letter 'm' should be slightly bigger than other letter. Punctuation still need improvements.

REFLECTIONS

Experience
This task is quite fun because it can train me working on details part. I never used to look so detail in every letter and also never deconstructed any letter before. This task let us learn about how to create a typeface that belongs to ourselves and I think it is a very good experience.

Observation
I observed that I always make some mistakes when digitalizing the letter. I didn't manage to keep the strokes in same width and all the size of letter weren't same. Maintain all the letter in same width and size are very important because it will affected the visual hierarchy and the viewers will be able to read it well if the letter is neat and clear.

Findings
I found that generating a typeface is not a easy process, It takes a lot of times and also many changes until the typeface done. I also found that managing the strokes of each letter is very important or else the typeface is not a good typeface. I found that we should observed many typefaces to improve our skills.

FUTHER READING

Website Link: https://99designs.com/blog/tips/typography-design/

Website link: https://www.flux-academy.com/blog/why-is-typography-important-in-graphic-design

Typefaces vs Fonts

A typeface is a family of fonts. Some familiar examples include Times New Roman, Arial, and Brush Script. A font is a variation of a typeface, typically bold, italic, or a combination of the two. Examples of fonts include Times New Roman Italic and Arial Bold.

A typeface (a font family): the visual design of the letterforms and it consists of multiple font formats.

A font : containing every existing letter, numeral and punctuation mark as a separate element. In the digital world, the font is the software we install and use.

Figure 7: Typeface vs Fonts (sources from link )

Figure 7.1: The anatomy of letters

Figure 7.2: Some punctuations with name and usage

The rules of typography design: (we should take good care every time when we are designing)

Alignment
Tracking
Kerning
Leading
Hierarchy
Grids

Search This Blog

Chan Siew Ni//0352518

Typography // Task 3A // Type Design & Communication

Comments

Post a Comment

Popular Posts

Illustration and Visual Narrative// Task 2// Decisive Movement

Minor Project // Task 1 // Proposal