Typography - Task 3: Type Design and Communication

18.11.24 - 16.12.24 (Week 8-Week 13)

Celine Christabelle Patricia / 0374872

Typography / Bachelors of Design (Hons) in Creative Media / The Design School

Task 3: Type Design and Communication

Table Contents

Lectures

Class Sessions

Instructions

Lectures

Class sessions

Week 8 (Independent Learning)

No classes

Week 9

Mr Vinod explained on ways to digitalize our letterforms. A simpler way to delete anchor points is by using the smooth tool. However, that tool may change the shape of the letter.

He also explained about common knowledge about letters. Generally, letter "t" has a shorter crossbar in the left compare to the right. and the height of letter "t" is not as tall as the descender. Moreover, letter "S" has a larger curve underneath. It is because the human brain tend to see the top part larger if its made in a equal size, so a smaller curve on the top will make it balance.

Week 10

In class, Mr Vinod assisted us on fixing the digitalized typefaces.

Week 11

In class, Mr Vinod continued on assisting us on fixing the digitalized typefaces. After so, he wants us to move the typefaces from Illustrator to FontLab.

Week 12

Students fixing the side bearings and kerning during class. There were a little misunderstandings on how to fix the fonts. After that, we move on to make the poster in Illustrator, poster must me Black and White.

Week 13

Students finalize the poster during class, then compile everything to make the final reflection.

Instructions

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

Tasks

Week 8 (Independent Learning)

Letter Dissection

Fig 1.1 - H

All of the serifs has the same curve
The foot and the top is not fully straight, it is a little bit bent.
The crossbar is thinner than the stems.

Fig 1.2 - g

the head of the g is not fully a circle
different from letter o, this one has thicker weight
the ear of letter g is made out of several circles
the stroke does not connect with bowl

Fig 1.3 - o

Letter O is not fully a circle
The stress line is in the middle
They are symmetrical

Fig 1.4 - b

sharper than the other letters, the ascender is straight
the bowl is not a perfect circle

Letter Sketch Exploration (1)

Research

Fig 1.5 - Research

I used Pinterest and Canva fonts to find the existing fonts. According to my observation, handwritten typefaces are likely to be free, doesn't really follow baseline just like how handwriting are usually are, but I get inspired by the thickness of the of the fonts.

The Italic typeface seems elegant, and I tried doing several ways, from the reference also from some youtube videos I found.

The square monogram, It seemed very condensed and neat. Although the letter forms are really stiff, but the conciseness makes it clear and readable.

Sketch

Using the 3 markers that were bought, we must explore several writing styles on a graph paper. I have a very thick marker, also calligraphy pens, they are flat nibs.

Marker 1 - (2.0mm - 5.0mm) thickness, flat nib
Marker 2 - 3.0 thickness, chisel nib, calligraphy pen
Marker 3 - 4.0 thickness, flat nib, calligraphy pen

I explored several writing styles, how to write in italic, boxy typefaces, and also thick letterforms. Below are the attempts:

Fig 1.6 - Writing styles attempts

Fig 1.7 - Pen 1 (2mm - 5mm, thick flat)

Fig 1.8 - Pen 2 (3mm, thin chisel)

Fig 1.9 - Pen 3 (4mm, thin flat)

Letter Sketch Exploration (2)

Explore writing styles further. Identify a selected writing style that you like. Write the following letters and punctuations: o l e d s n c h t i g , . ! # in that style. The writing style I like most is the Italic Calligraph, which would be either Pen 2 number 1 or Pen 3 number 5. After some observation, I chose to pick Pen 3 Number 5

Below are the sketches:

Fig 2.1 - Final sketch

Week 9 - 10

Digitalise

I put the sketch I made to Adobe Illustrator and watch the tutorial Mr. Vinod had given. First, I adjusted the baseline, cap height, X height, ascender and descender.

Fig 3.1 - Inserting image and digitalizing

I used pen tool for the basic outlines, tracing it according to the letters I made. As I was tracing the letters, I do realize some mistakes I made and decided to change it directly.

Fig 3.2 - Converting outline to brush

Since I wrote in a 45 degree angle, so I adjusted the brush the same angle as I was writing.

I got feedbacks from Mr. Vinod. He mentioned that the letter O was too wide when compared to letter e. The comma should longer so its visible especially when zoomed out. Exclamation mark and symbol must be in the same angle of the marker like the rest of the words. Below are the results.

Fig 3.3 - Merging and adjustments

I got more feedbacks about the letters being not entirely in the same angle. They are similar but not the same. The letter O has different angle with the bowl in letter d and g. The letter h and n is in the same angle, but the letter t is different.

After fixing it, the letterforms do look better, but I have difficulty fixing the letter s because it still looks really awkward.

Fig 3.4 - Adjustments

The letters are already in the same angle, though the letter "s" is not edited in a right way, it's too thin. I also feel like the exclamation mark was too stiff because it looks like just a straight line, so I decided to adjust it by making the top part of it thicker.

Fig 3.5 - Final Adjustment

Week 11 - 12

Font Lab demo

Fig 3.6 - Measurements

I measure the x height, cap height, ascender, descender of the typeface to put it in Font Lab

Ascender = 734 pt
Descender = -234 pt
X height = 500 pt

Fig 3.7 - Trial 1

I made a mistake because I did too much kerning. Only do kerning for problematic letters, don't overdo it. Make sure that the side bearings of each letters are within their range, unless if they need special measurements. To start on, I need to start from letter n and o.

Fig 3.8 - Trial 2

For my case, my letter "d" and "l" is quite problematic because its quite long, and the characteristic of my font is thin and narrow, so each letters must be narrow, or stick to each other.

Fig 3.9 - Adjustments with kerning

After adjusting, I tried testing on several words to see if the letters clash to one another or not, if they do, I will add kerning or adjust the adjustments.

I decided to name the font "Cursive Night Letter" because it is italic font and visually looks quite cursive. I also feel like it looks elegant because of its thin weight, which would look better in a darker color, which I assume it as Night.

back to top

Week 13

Poster Making

Fig 4.0 - Poster 1

Fig 4.1 - Poster 2

Final Result:

Download Font

https://drive.google.com/file/d/1-0thIRcoeR5bxbemhrWrhawgamOUjF_1/view?usp=drive_link

Fig 5.0 - Screengrab bearings

Final Work:

Fig 5.1 - Final Task 3: Type Design and Communication "Cursive Night Letter" JPG (11/12/24)

Fig 5.2 - Final Task 3: Type Design and Communication "Cursive Night Letter" PDF (11/12/24)

Fig 5.3 - Final Task 3: POSTER "Cursive Night Letter" JPG (11/12/24)

Fig 5.4 - Final Task 3: POSTER "Cursive Night Letter" PDF (16/12/24)

Font Tester:

try out words with o l e d s n c h t i g , . ! #

e.g : golden, see, told, doll, ginch, ghost

Feedback

Week 8 (Independent Learning)

Week 9

General Feedback: We were taught on how to digitize, explanation about the letter s, that the bottom should be larger than the top, also to document the process of digitalization

Specific Feedback: The letter O was too wide, and make the comma longer so its visible especially when zoomed out. Exclamation mark and symbol must be in the same angle of the marker like the rest of the words.

Week 10

General Feedback: Mr Vinod helped us on fixing the typefaces we make, making sure we are on the right track.

Specific Feedback: The letters are not entirely in the same angle. They are similar but not the same. The letter O has different angle with the bowl in letter d and g. The letter h and n is in the same angle, but the letter t is different.

Week 11

General Feedback: Mr Vinod helped us on fixing the typefaces that we have finalized. He also engaged us to move on to FontLab.

Specific Feedback: The letters are already in the same angle, though the letter "s" is not edited in a right way, it's too thin and it looks odd among the other letters.

Week 12

General Feedback: For this session, we make poster. make the text impactful. If small, make more, balance space and the text, mind the composition for the poster.

Specific Feedback: Only do kerning for problematic letters, don't overdo it. Make sure that the side bearings of each letters are within their range, unless if they need special measurements. Remember to start from letter n and o if its lowercase, to make it as the standard measurement for the rest of the letters.

Week 13

General Feedback: We finalize the poster and continue to the last task compiling all the task we made and make the final reflection.

Specific Feedback: For design wise and composition its already good, but the only problem is that I haven't include the entire letters I made. Hence, I change the word "light" into "clothing"

Reflection

Experience

I experienced learning calligraphy within a week. Although not perfect, but it was a thrilling experience. I get to use a calligraphy pen and write letters in several styles I could thought of. When digitalizing the letters in Adobe Illustrator, I experienced using a lot of tools. Writing in an italic font was very challenging as I need to focus on every angle and wideness of each letter and making sure that they should look the same, so that the letters don't look like dancing.

When finish fixing each letters in Illustrator, I export it to Font Lab. Different from Illustrator, here I must fix the spacing within letters by adjusting the side bearings. At first, I misunderstand the video given by Mr.Vinod, but then after getting re-explained I understand. Kerning is only used for fixing problematic letters. However, we must adjust the side bearings first. Since my letters are slightly italic, they are quite hard to adjust, especially the letter g. Moreover, they also have a narrow spacing between letters.

Observations

After some observations, I realize that there are a lot of pen nibs. All this time I only know the blunt nib and the brush nib. After exploring other types of pens, I am also able to explore a lot of writing styles. When digitalizing the letters in Adobe Illustrator, I realize there were a lot of mistakes when writing with the pen, some weren't in the same angle.

When moving to font lab, I notice some mistakes when adjusting letters in Illustrator. I made the letter i too tall, and the letter t too short. Fortunately, I was able to make some adjustments in Font Lab.

Findings

I found this task to be very interesting because we create more relationship towards letters, by learning every stroke of them. After some observations during the process, I found that there would be always a human error in this task. From making the strokes in paper, then digitalizing it fixing each letter, then to Font Lab so that every letter is spaced evenly.

Celine Christabelle Patricia (0374872)

Search This Blog