ADVANCED TYPOGRAPHY / Task 3 : Type Exploration and Application

23.05.2022 - 27.06.2022 (Week 10 - Week 14)
Esther Vanessa/0350751/Bachelors of Design (Hon.) in Creative Media
Advanced Typography
Task 3 : Type Exploration and Application

---

LECTURES

Lecture 5 - Perception and Organization

Perception -> is what we see and understand. In typography it deals with visual navigation via contrast, form and organisation of the content. 

Contrast

Figure 1.1 Different Types of Contrast

Carl Dair added 2 more principles -> texture and direction. Both in order to create the work and meaning pop out clearly and unambiguously. He previously mentioned 7 different types of contrast; Size, weight,  contrast of form, contrast of structure, contrast of texture, contrast of colour and contrast of direction.

1. Size 

It provides a point to which the reader’s attention is drawn. 

Figure 1.2 Big letters > Small letters

2. Weight

This describes how bold type can stand out in the middle of lighter type of the same style.

Figure 1.3 Emphasis on the bold before the thin letters

3. Form 

Contrast of form is the distinction between a capital letter and its lowercase equivalent, or a roman letter and its italic variant, condensed and expanded versions of typeface are also included under the contrast of form.

Figure 1.4 Different form of same fonts 

4. Structure

Structure means the different letterforms of different kinds of typefaces

Figure 1.5 Different type of fonts (sans serif and serifs, blackletters, so on and so forth)

5.  Texture

By putting together the contrasts of size, weight, form, and structure, and applying them to a block of text on a page, you come to the contrast of texture.

Figure 1.6 Contrast of texture

6. Direction

Opposition between vertical and horizontal, and all the angles in between. Gives dramatic effect. 

Figure 1.7 Collaborating different angles

7. Color

The use of color is suggested that a second color is often less emphatic in values than plain black on white. Important to give thought to which elements needs to be emphasized.

Figure 1.8 Incorporate different colours

On Form

Typography can be seen as having two functions: 

• to represent a concept
• to do so in a visual form

Displaying type as a form provides a sense of letterforms’ unique characteristics and abstract presentation.

Figure 1.9 Form leads eyes from point to point

The interplay of meaning and form brings a balanced harmony both in terms of function and expression.

Organization

Gestalt 

Gestalt means "put together". This law is an attempt to understand the laws behind the ability to acquire and maintain meaningful perceptions.

Figure 1.10 Gestalt Principles

1. Law of Similarity 

Elements that are similar to each other tend to be perceived as a unified group.

2. Law of Proximity

Elements that are close together tend to be perceived as a unified group. 

3. Law of Closure

Refers to the mind’s tendency to see complete figures or forms even if a picture is incomplete to complete the picture in our mind. 

Important in logotype design

Figure 1.11 Law of Closure

4. Law of (Good) Continuation 

Humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect. 

Figure 1.12 Law of Continuation

---

INSTRUCTIONS

---

TASK

TASK 3:

On our first part of the task, we were to explore problems that needs solution that can be fixed with fonts. 

First thing I came up with is creating a font based on something very familiar to me and my hometown, ANGKOT. Angkot is a carpool service that ran even before I was born and I found that every angkot has different kind of font they use, and I think it is very interesting to standardize so.

Figure 2.1 ANGKOT Explanation on my proposal (29.05.2022)

Second idea I had was to create a better font for the movie AVATAR instead of the font Papyrus they used.

Figure 2.2 AVATAR Explanation on my proposal (29.05.2022)

After consultation with Mr Vinod, he and I both agree to proceed with ANGKOT idea as it is more solid and I too liked it more. I did more digging about the fonts on angkot, I noticed that they had used stencils to spraypaint on the angkot itself.

Figure 2.3 ANGKOT Example (30.05.2022)

Figure 2.4 ANGKOT Example (30.05.2022)

Figure 2.5 ANGKOT Example (30.05.2022)

Feeling inspired, I immediately moved to AI for this to shorten the process and started crafting the font. Some are really challenging to do, and I had several ideas and was not sure on what to do with some.

Figure 2.6 Confusion on which J should I use (09.06.2022)

I also used outlines to craft it carefully. I tried to be as neat as possible so I won't have a hard time when I generate it. 

Figure 2.7 Outlines on the M (09.06.2022)

A couple letters are annoying and harder to create rather than the rest. One of them includes the S.

Figure 2.8 Crafting the S (10.06.2022)

Afterwards I finished up my first draft before feedback session. 

Figure 2.9 First Draft Digitalized (13.06.2022)

After getting the okay and fixing some things, I started the generating process. This time I used Font Forge. 

Figure 2.10 Generating process (18.06.2022)

Figure 2.11 Fixing the fonts (18.06.2022)

Figure 2.12 Fixing the fonts (18.06.2022)

I tried kerning it but I failed terribly, this was done before feedback session. Sir Vinod was not a fan of it, and neither am I.

Figure 2.13 What is this kerning? (19.06.2022)

Unfortunately during this time too I tried my first application of it. It ended terribly (see later).

I had a couple of problems regarding this, so I had to watch a tutorial video. However I do not have a lot of time so I had only individually kerned some of the most important letters for my output. 

Figure 2.13 Kerning Video 

Figure 2.14 Before kerning the important letters (24.06.2022)

I fixed more of my fonts including the punctuations, bearings and the letter Q particularly. and afterwards, I generated my font and started the process of application.

APPLICATION

Previously (before feedback). I was kind of confused on what to do with my application. I was following suggestions from sir Vinod but unfortunately I could not find a good picture of side view van without it being a 3d object. My photoshop skills were not great either. I asked for feedback and again, sir Vinod was not a fan of it.

Figure 2.15 First trial of application (19.06.2022)

Sir Vinod said it is okay to use a 3d generated van, so I tried doing so again the following week. I tried color matching the van to the surroundings. Finding good HD picture of these landmarks are kind of challenging too. However, I tried my hands on several different landmark of the cities, Jakarta, Bogor (my hometown, the city of ANGKOT) and Yogyakarta. Final pictures posted down below. 

Figure 2.16 Process (25.06.2022)

Final Outcome

Figure 2.17 Final Outcome Type Exploration (25.06.2022)

Download the font here. 

Figure 2.18 Final Outcome Application (Bogor) (25.06.2022)

Figure 2.19 Final Outcome Application (Jakarta) (25.06.2022)

Figure 2.20 Final Outcome Application (Yogyakarta) (25.06.2022)

---

FEEDBACK

Week 10

General Feedback: Have sufficient progress because there is not much time left.

Specific Feedback: ANGKOT is interesting so proceed with that

Week 11

-No Class-

Week 12

General Feedback: Try using fontlab or fontforge. Use suitable mock-ups.

Specific Feedback: Make sure it fits for stencils. Fix the number 8, top should have a smaller circle to create the sense of it being the same size. For Mock-up try to use photoshop and white vans on different backgrounds. 

Week 13

General Feedback: Final Compilation and Task should be finished by next week. 

Specific Feedback: Remember the previous feedback and apply it to the mock-up.

---

REFLECTION

Experience

By far, this project took the longest working time out of all my assignments. Like I said last year, creating a font is fun. That is until you get to the part where you have to generate it. Font forge was not really user friendly and I did not pay attention to details so I keep redoing things again and again. I really want to say I nail it as I really really like my font now, so so much better than what I had last year, but if I could nitpick I could say my font is also one basic font, seriously nothing special (or am I too desensitized after looking at it so much?). I am however is a bit uneasy about the application outcome, I have tried my best on those so I hope it's acceptable. 

Observation

I observed that dots and commas has to be larger than the width of the stroke sometimes. 

Findings

I found out that you need a lot of patience creating letters that has a lot of curves. I also found out that it is easier to fix your font in fontforge/ font generating apps if you have less anchor points in the vector itself. 

---

FURTHER READING

Instead of reading, I did some digging and found a very interesting Netflix documentary.

Link Here

I watched this before starting the project, to make sure I have sufficient knowledge about creating a font. This documentary follows Jonathan Hoefler, a very important person in the community of typefaces. He is known in creating an outstanding amount of fonts. The documentary shows him fixing fonts, creating new fonts (and ended up scraping it, which he also mentions that it happens quite often, even to those he had developed for years). He also mentioned some basic rules in creating fonts, such as overshooting, maintaining form and attention to detail (in the documentary he is developing fonts for watches, meaning it has to be super small; what does he have to do to make it legible?)

He is also the one who owns Hoefler & co. , Typography.com ( a useful website to guide designers on what typefaces are suitable for which occassions) and are known for Hoefler Text font and Archer font. 

Figure 3.1 Hoefler Text (n.d)

Figure 3.2 Archer (n.d)