Typography - Task 3: Type Design & Communication

In this task, we are required to design our own typeface using adobe illustrator and font lab. First, we need to gather idea and make 3-5 sketches on graph paper using some methods (draw or write) and we need to set the anatomy of it (X-height, baseline, ascender, descender, cap line, etc). After that, we choose one of the preferable sketch and digitize the given letters on adobe illustrator. There are some methods that Mr. Vinod showed us, using shapes, strokes, or brush (we could choose).

a. Analysing Fonts

Before starting out task, Mr. Vinod told us to analyze the preferred fonts from the 10 typefaces that are given to us to make sure that we are fully understand about the fonts' shape and anatomy. Since I had been using Futura typeface all the time, this time I decided to analyze it. I use the letter H, o, g, b with the font Futura Std Book and ITC Garamond Book (1 sans-serif and 1 serif).

Figure 1.1, Reference

1. Futura Std Book

Figure 1.2, My Font Analysis (Futura Sd Book)

Analysis result:

Futura had a quite longer ascender and descender, we could see that the ascent and descent height is almost the same as the X-Height
The crossbar in H did not really sit in the mean line, and it creates an asymmetrical height among the negative spaces (marked as the yellow area).
The reason for the asymmetrical height in the H is because of the optical reason, to make it look balanced with the other letter. (because it would look too low if they make it symmetrical).
The o is not a perfect shape of circle, but still symmetrical. It also had an overshoot to creates balance among the letters.
The g style in Futura Std Book is single storey, so it has one counter and one closed aperture. Same as the o, g and b also has an overshoot with the same reasoning.
The strokes for all the letter are all the same, creating a consistent looking font, making it look modern.

1. ITC Garamond Book

Figure 1.3, My Font Analysis (ITC Garamond Book)

Analysis result:

Overall, ITC Garamond have a bit smaller X-Height, Ascender, and Descender compared to Futura.
This font is visually balanced, even though it actually are asymmetrical.
Lots of smooth curves in the serif.
The space (yellow area) in H are asymmetrical, with optical reasoning. The crossbar are more far away from the mean line compared to Futura's. The serif are a bit curved.
The letter o has a thicker vertical stroke, and the horizontal stroke is thinner. The rounded shapes overshoot the x-height and baseline to look visually aligned.
The letter g is a double-story lowercase with a small upper counter and a larger lower bowl.
The letter b has smooth curves and the same thick–thin stroke as the o.
Overall, ITC Garamond Book uses many optical corrections for balance and readability.

b. Ideas & Sketches

First, I search through Pinterest to collect as many ideas as possible. These are the sketches and references:

Sketch #1 (Drawing Method)

This sketch is inspired by a heavy serif fonts. Since these days I'm also interested in broad-edge nib calligraphy fonts, so I thought of combining both fonts. I make it geometric to imitate the calligraphy fonts. But in the feedback session, Mr. Vinod said that the serif makes it too crowded, so I need to remove it (I also feel that way tbh) if I want to digitize this.

Figure 2.1, Sketch #1

Sketch#2 (Writing Method)

The reason why I choose writing method is basically because I want this font to look like a handwriting. This handwriting is inspired by a tall condensed fonts.

Figure 2.2, Sketch #2

Sketch #3 (Writing Method)

For this sketch, I want to try a romantic script fonts since I have a brush pen in my home. The inspiration is a flourishing script fonts. This turned out nice, but I think it might be hard to digitize it later.

Figure 2.3, Sketch #3

Sketch #4 (Drawing method)

Actually, this sketch is inspired by a WhatsApp bubble text shape (this idea pops up randomly when I'm chatting with my friend).

Figure 2.4, WhatsApp Bubble Chat

I tried to find out more about this shape, but there aren't some specific name for this. I came to conclusion where most people call this shape as a leaf shape.

Figure 2.5, Leaf Shape

I want it to be some kind of asymmetrical but still readable. I tried finding some fonts reference that fits the leaf shape, and I immediately sketch it out on graph paper. But the problem is, my marker is too thick that it makes the angle looks weird (But I had the vision in my head tho.. it's just the marker).

Figure 2.6, Sketch #4

c. Digitization

ADOBE ILLUSTRATOR

After finishing 4 sketches, I finally decided to digitize the #4 one. At first, I planned to digitalize only the Sketch#1 (lowercase), but I had a feeling that #4 (capital) would actually look more interesting once digitalized (it's just the sketch making it look bad, I'm sure I had the vision.. lol). So, I tried to digitize both designs and compared it, and it turns out I was right– I like #4 better.

Figure 3.1, Sketch #1 and #4 Comparison

With that, I started to digitize the sketch #4 into adobe illustrator. I've made the sketch in my graph paper before I do the whole digitization. I choose to digitize the capital version because I feel like this font is more appealing in the capital form. Also when designing the punctuations, I took reference from the link that mr. Vinod had provided to use.

Figure 3.2, Sketch #4 Letter

Figure 3.3, Comma Reference (https://www.instagram.com/p/CRjdPtSjz5K/?igshid=MzRlODBiNWFlZA==)

I first used the shape method, where I made my font based on shape. I used a lot of rounded rectangle shape, and I modified the corners to make it look asymmetrical. I used a lot of pen tools and pathfinder to modify the shape here.

Figure 3.4, Shape Method Digitization (First Attempt)

I struggled a lot when shaping the letter S and N. I first followed the sketch of my S and N, and make another alternatives. But at the end, I finally choose the first one that I've made. (yellow square).

Figure 3.5, Letter S and N drafts

But after receiving feedbacks, I tried the stroke method, which had a better consistency and cleaner shape. I found that this method is a lot easier, especially in shaping letter S and G. With this method, I use a rectangle shape or pen tool to make a line, remove the color fill, and set the stroke into 120 pt. I also toggled off the scale corners and strokes so that the strokes stayed the same even if I rescaled it. I first developed the main shape (without the rounded corner).

Figure 3.6, Main Shape (stroke method)

Figure 3.7, My font structures (Stroke method)

After that, I started to round the corners as I want it to look like a leaf shape. I also changed my letter G in this method while exploring because I find it better here.

Figure 3.8, G letter changes

Figure 3.9, Shape Method Digitization (Second Attempt)

After receiving some feedbacks from mr. Vinod, I edited the angle shape to make it look consistent. I changed the angle direction following letter G direction (I change almost all of it, especially S. I also edited the comma and hashtag to be a little bit slanted. The line in the exclamation mark also a little problematic, it has to be thin at the bottom and thick at the top.

Figure 3.10, Shape Method Digitization (Third Attempt)

As soon as I got the feedback session in the week 11, I changed the punctuation's shape to be sharp (not rounded). Also for the G, I make it a little bit shorter than the letter I to make it look more equal.

Figure 3.11 Shape Method Digitization (Fourth Attempt)

After that, I started create outlines and unite all of the letter.

Figure 3.12 The Final Structure

FONTLAB

I watched mr. Vinod's tutorial and downloaded fontlab (trial version). I copy pasted the letters from AI one by one to Fontlab as the tutorial.

Figure 3.13, Fontlab Process

Here, I test it out with some words to see if the side bearing and the kerning is fine. I use the guide that mr. Vinod gave to us to set the side bearing. I Started out with adjusting the right and left side bearing of the letter O & H, which I set the letter H both 60, and letter O 50 & 60. Then, I adjust the other letter according to that. For the letter L, I make the horizontal line shorter because the previous one looks like it's too long.

Figure 3.14, Before VS After

After feedback session in week 11, I found out that I've been kerning too much, so I had to adjust it from 0 all over again. This time, I change the side bearing of O both 60, and the rest of the letter follows the sidebearing rules that mr. Vinod had given to us. The result is far better than before, I don't even need to kern as much as the previous version.

Figure 3.15 Kerning Screen Grab Fontlab (1)

Figure 3.16 Kerning Screen Grab Fontlab (2)

POSTER

For the poster, I came out with some ideas. The first one is just a simple text in the middle (with negative space maintained). The second one is like a text with a spotlight. The third one is like a flashlight from the letter O, but I discontinue this idea because it did not really stand out in monochrome color.

Figure 3.17 Poster Drafts

I decided that the best is the one with simple arrangement. The sentence itself is already 'the light'. After feedback session, Mr. Vinod suggested me to move the byline to the center (with the text), and also I need to use all of the letters from OLEDSCHNTIG.

I decided to use the sentence "SHINE ON COLD NIGHT" because the spacing is better, also using all of the letters. For the byline, I followed Mr. Vinod's suggestion and make sure that all the text are aligned. for that, I kern the word Shine and Night a little. I also use grid to give more precise alignment. For the T in "NIGHT", I purposely make it slightly off the grid because of optical illusion (so that it will look in line with the shine).

Figure 3.18 Poster Process (Grid)

Figure 3.19 Revised Poster (15/12/2025)

d. Final Result (PNG & PDF)

<CLICK HERE TO DOWNLOAD FONT>

Figure 4.1 Initial Sketch

Figure 4.2 Fontlab Screen Grab

Figure 4.3 Final Construction of LUNARIS

Figure 4.4 Final Poster of LUNARIS

Top ↑

FEEDBACK

WEEK 8

Specific Feedback:

Sketch#1 is better without the serif because the shape it self is already geometrical (too messy if added the serif)
Sketch#4 the H could make it in the same size
Sketch#4 the O inside stroke should be the same (don't reflect it)

General Feedback:

Stroke consistency is important
We have other understand the fonts first before we make it
Basic structure of lowercase: n, o
Basic structure of capital: H, O

WEEK 9

Specific Feedback:

Mr. Vinod suggested me to try the stroke method to make a more consistent stroke for the font.

General Feedback:

⁠Double check the work, check it from private browser
Don’t copy paste the lecture
Do not embed process file

WEEK 10

Specific Feedback:

Be consistent with the angle (sharp and smooth).
The comma should be a little bit slanted.
The full stop in exclamation mark have to be in the same size with the full stop. Also, the line in exclamation mark have to be thinner at the bottom and thicker at the top.
The hashtag need to be a bit slanted.
The top part of letter S shape is a bit smaller than the bottom one (optical reason)

WEEK 11

Specific Feedback:

The punctuation is better with sharp angle (not rounded)
(Fontlab) The horizontal line in the letter L could be shorter
Pay attention to the kerning for letter N, I, H, T.

General Feedback:

(Fontlab) Make sure the settings in font info are all correct as instructed.

Set the ascender, descender, x-height, cap line according to our own font⁠
Do not round the coordinates

(Fontlab) Check the preferences: "Keep stroke and colors, place color elements", "Import original position", and "Keep position if available".
Watch the tutorial and take notes, don't repeat the same mistake.

WEEK 12

Specific Feedback:

The kerning are too distant, the side bearing had to be adjusted.
The posters are nice, but (optional) could add some repeated words to make a scrolling effect.

General Feedback:

Be careful with sidebearing. If the kerning is distant, there's something wrong with the sidebearing.
For the poster, can use a little bit of graphical shapes if it supports the design.

WEEK 13

Specific Feedback:

Must use all of letter (OLEDSCHNTIG) in the poster.
The byline could be moved into the center, aligned with the text

General Feedback:

Complete e-portofolio for the final submission.
Revise all of the poster if have any revisions.
Check the e-portofolio again, ensure all of it are complete.

Top ↑

REFLECTION

Experience

I enjoyed working on this project, even though it was stressful at some points. I felt confused when I started the digitalization process because I wasn’t sure which method to use. In the end, I tried the shape and stroke method. I was also confused when using FontLab at first, but after some time I understood how it worked. Overall, this project was fun, and I enjoyed being able to create my own font.

Observations

I realized that consistency was something I struggled with at the beginning. Some of my letters were not consistent, but I was able to fix them as I continued working. By looking at my own work and comparing it with others, I noticed that fonts that look symmetrical are often not actually symmetrical because of optical illusion. I also learned that planning and checking details earlier could have made the process smoother.

Findings

From this task, I learned how important consistency and visual balance are in typography. I also learned to be more patient and careful with my work. To improve, I need to review my letters before finalizing them. The skills I learned from this project will be useful for future design and typography work.

Top ↑

Search This Blog

Cherilynn Farrencia Faustine (0384745)

Typography - Task 3: Type Design & Communication

Comments

Post a Comment

Popular Posts

Typography - Task 1: Exercises