Typography - Task 3: Type Design and Communication

on
Name: Liong Xenyi (0383125)
Module: Typography (GCD60104)
Date: 1/6/2025 - 15/7/2025 (Week 7- Week 13)
Degree: Bachelor of Design (Honors) in Creative Media 
University: Taylor's University

Task 3: Type Design and Communication

Table of Contents
Module Information Booklet

Task 3: Type Design and Communication
Description:
You will be tasked to design a limited number of western alphabets. To begin, choose an existing font design that adheres to the direction that you would like to head in. Study the font carefully by analysing its anatomical parts. Start with rough sketches, explore a variety of options and upon approval begin digitization of the drawings—software for digitization Adobe Illustrator and later FontLab. Artworks shall be printed out for critique sessions followed by refinements. If time permits we shall generate the font for actual use.

You will endeavour to create a typeface that has the hallmarks of a good typeface; subtlety or character, presence, legibility and readability. Below are the letters you will design: a - z, . ! # Upon completion of the font, you will create a basic A4 size poster displaying your font.

Before starting, I need to choose a font from the 10 given typefaces that I prefer and do a dissection of the letter (H, O, G, or B) in Adobe Illustrator (artboard size: 1000pt x 1000pt). I chose the font, Bembo Std, Extra Bold Italic, and picked the letter 'B' to dissect. This is to get a better understanding of the shapes used in the letter that make it a distinct font.
Fig 1.1

I added measurements of the ascender line, the cap line, the median line, the baseline and the descender line, to get an idea of how much the space should be like.
Fig 1.2


I observed that a simple letter has many shapes and strokes planned and placed, as the curves do not only have one single circular shape, but multiple ones, that gives it a complex curve. The top part of the capital letter 'B' is smaller and more compressed than the bottom part, though it is not exactly half the size. The top serif is has a more complex curve than the bottom serif.

This is the complete dissection of the letter 'B' along with the measurements:
Ascender line: 305pt
Cap line: 278pt
Median line: 185pt
Baseline: 0pt
Descender line: -106pt

Fig 1.3

Later, I first gathered materials to start task 3: A4 Graph paper and 3 markers pens (3.0 points and above). I need to write the whole alphabet in both uppercase and lowercase in 3 different styles with each of the 3 types of marker pens. I tried giving each style its own personality and distinct feature. I am not well equipped with calligraphy pens, so it is a little messy.
Fig 1.4

Fig 1.5

Fig 1.6

Fig 1.7

Miss Vitiyaa asked us to put our papers down to observe each of our differences and which areas we could improve on. After some observation, I realised some styles have more distinction and visible features that differs them apart from the rest. I noticed they were sketched first then drawn, but I was told to write and not draw. Upon asking miss Vitiyaa, I can sketch but not make it look too sketchy like a drawing, but I can draw the features out first and then use the marker to write over it. 

I continued creating different styles until I achieved something that I like.
Fig 1.8

Fig 1.9

Fig 1.10

I like the first and second designs from Fig 1.10 the most. After asking Miss Vitiyaa for feedback, she said the first design from Fig 1.9 and the last design from Fig 1.10 stands out the most as unique and stylish. I prefer the style from Fig 1.10 more, and even though it's harder to create on Adobe Illustrator, I still decided to go through with this challenge of digitising my alphabets.

I only need to digitise either lowercase or uppercase letters along with the punctuations . , ! # on Adobe Illustrator. I first measured the ascender line, the cap line, the median line, the baseline and the descender line. Later, I first used the pen tool to make a single stroke and use the width tool to manipulate the size and shape. However, it was difficult for me to achieve the shape I want and proceed to making the shape myself from scratch using the pen tool.
Fig 2.1

Fig 2.2

Fig 2.3

In the picture above, my first attempt for each letter is on the first row of the artboard, and I left an empty row of the artboard. After finishing each letter, I then attempted to touch-up my alphabets: reshaping them to a more desired shape and adding the highlights to make them pop up and be more appealing. I used the circle tool to make the white highlights, with the warp tool to make it more bendy.
Fig 2.4

Fig 2.5

Fig 2.6

Fig 2.7

Fig 2.8

Fig 2.9

After digitising all my alphabets, I need to use FontLab to create my own stylised alphabets. I begin to copy and paste my alphabets into each respective category.
Fig 3.1

Next, I need to kern each letter by adjusting the side bearings. It is suggested I follow the chart provided - Fig 3.2 - as a base as a standard.
Fig 3.2

After following the kerning for each letter's side bearings, however, it is hard to apply these guidelines as mine is more freeform in style rather than following a more symmetrical order for each alphabet. I adjusted each side bearing by visually kerning each letter that has appropriate space. 
Fig 3.3 First attempt at kerning

Fig 3.4 Kerning after I adjust it manually (A-U)

Fig 3.5 Kerning after I adjust it manually (V-#)

I tested the font with several words and kern the letters when needed, trying to make the space between the letters comfortable and pleasing to see. However, some letters next to certain letters are too far apart, but I cannot kern the letter's side bearings anymore as it is the minimum, so I can only kern it manually once I download the font. These are some testing I did with some words.
Fig 3.6

Fig 3.7

Fig 3.8

These are the final side bearings for each letter and punctuation.
Fig 3.9


Fig 3.10

Finally ready to be exported as a font from FontLab, I filled in the font info. These are the information:
Family name: Bluby
Style name: Bold
Full name: Bluby Bold
PostScript: Blubry-Bold
Style group: Bold
Fig 3.11

Ascender: 736 PT
Cap Line: 699
Median Line: 509 PT
Baseline: 0 PT
Descender: -229 PT
Fig 3.12

Fig 3.13

For some reason, my white bubbles on the letters couldn't be exported through FontLab. My original intent with it was to make the letters seem more roundish and alive, adding more life to it. However, looking at it on my poster, it wouldn't have been so noticeable as it is a small, simple detail. Nevertheless, I am still satisfied with how my font came out, so I decided to stick with this. 

With my own font, I need to have a quote related to typography and make a simple black and white poster with it. I came up with two different quotes. I know they're really cheesy, terrible, pick-up puns, but I somehow like this sort of humor and think it suits my personality more than to have a more motivational quote on my poster. It also suits the fun, wiggly style of my font.
My quotes:
1. My type, you ask... why, it is typography, of course!
2. You are not a typo, sans you are #my type!

I tried to make do with the punctuations I have (.,!#), so the first sentence might sound weird without a question mark. Keeping the same font size, and only using a black and white colour scheme,  I started designing the poster, playing around with some elements and arrangement of each word.
Fig 4.1

Even though I meant for the font to be black, I don't like the black text on a plain white background, as I feel it is too empty and plain. I decided to change it to a black background with a white text.
Fig 4.2

Fig 4.3

Fig 4.4

I ask Miss Vitiyaa for some feedback; she commented that I don't need a complicated layout, arrangement or too much elements, that I should make the poster simple as I just need to show the quote with the font I made. After some reflection, I think the bottom words in posters from Fig 4.2 and 4.3 make the bottom area seem heavy, and that I should balance the top more. Additionally, looking from afar, the posters don't seem to stand or pop out, along with the quote itself. The posters from Fig 4.4 has too much of a complicated arrangement, and it is hard to read the quote.

Miss Vitiyaa gave some ideas of how a simple poster should be like, where limited elements and arrangements are used, but effective enough to make it pop out and appeal to others. I decided to work on my other quote with a simpler design.
Fig 4.5

I like the black speech bubble on a white background most, as it pops up most and is nice in its simplicity. It also emphasises on the quote easily in a stylish way. Designing several speech bubbles, I like the first one as it shows the most resemblance to my font style. As I like the black and white background too, I tried merging that into the speech bubble.
Fig 4.6

However, I think a speech bubble kept simple is best, as it is attractive and not too complicated or plain. I'm sticking to the first speech bubble I made and added my font name, name and date unto the poster. I refined the speech bubble to make it  smaller and not so close to the margin, giving it space to breathe. I also kerned each line, for the short lines to go inwards (the left) more to keep a flowy motion that fits the font style. I duplicated and made one that leans on the left instead, with a left alignment of text to compare which looks better.
Fig 4.7

I don't like the kerning for the right poster so much, as I don't think the zig-zag motion I did with the right alignment does not work so well with a left-aligned text. I kerned the short sentences until they lined up with each other. Additionally, the font info and my name text looks better when it is the middle, as the size doesn't balance out nicely if it is too much to the side.
Fig 4.8

Looking from afar, I prefer the left poster, with the right-aligned text. I rearranged the font name text box to the bottom so that it gives the speech bubble some space to breathe, as I realised it does not balance the elements if it's too close.


This is my Final Submission:

Download the Bluby font here:
 https://drive.google.com/drive/folders/1VE5xhRn2pAdDPI5w3KsEZCUIQXaJPoQz?usp=sharing

These is the FontLab process including the side-bearings.
Fig 5.1 FontLab Screen Grab 1

Fig 5.2 FontLab Screen Grab 2

This is the final type construction of my font, Bluby.
Fig 5.3 Final Type Construction



Measurements:
Ascender: 736 PT
Cap Line: 699
Median Line: 509 PT
Baseline: 0 PT
Descender: -229 PT

This is the final A4 black and white poster with my font.
Fig 5.4 Final A4 Black and White Poster




Feedback
Week 8: 
General Feedback: We were told to look at our peers' work to take inspiration from and to compare what level we stand on, whether we should improve our own work or continue to work on our alphabets. 
Specific Feedback: Pencils can be used to sketch the alphabets, but once you outline it, don't make it seem like a drawing or a sketch. I wanted to do a further exploration on my work.

Week 9:
Specific Feedback: My alphabet design with the curves and bubble-like look, and the one with a thick stroke on the left with a thinner stroke on the right got approved. However, the bubble typography might be hard to replicate on illustrator, but I can try nevertheless. The bubble typography is more stylised and unique.

Week 10:
General Feedback: Continued working on digitising my font on Adobe Illustrator. Try out FontLab Trial to get an understanding.

Week 11: 
General Feedback: After digitising our font, we could go to the Design computer lab and use the FontLab Demo version to make our font. We should download the Fontlab Trial version so that we can get a hang of it before starting on the demo version.

Week 12: 
General Feedback: Continued making and editing my font. Think of a quote related to typography to make a simple poster of with my font. Finalise everything, including the poster by next week.

Week 13: 
General Feedback: Today's class it the dateline for this task. Finish making this blog, including everything for submission.
Specific Feedback: My poster does not need too many elements, as it should be simple to show the font I made with the quote. It should be easy to read, while eye-catching too. My previous layout was not balanced properly, as the weight at the bottom was too heavy.


Reflection:
Experience: 
I like writing in different font styles on paper, but never made my own font before. Trying to be consistent and making the whole alphabets with some punctuations is new for me. At first it was difficult for me to come up with a font style, as I usually write according to the context or however I liked. Nevertheless, I explored with elements I like, and from normal looking ones, I tried to expand those styles. The most I struggled in, however, was making the font in Adobe Illustrator. Since I chose a harder style, I had to use the pen tool and create the individual shapes for each letter. Sometimes, I couldn't get the certain shape I want, and had to keep trying until I got it right. In my opinion, creating the font on Illustrator was the most frustrating and mundane part of this project. But afterwards, I felt a huge relief and a sense of accomplishment, and that I could move on to the final part of making my font. Using FontLab was easier than I thought, grateful that it isn't too complicated. On the other hand, I struggled making the right side bearing for each letter, as some are designed inconsistently (which was part of the style) and had to be kerned manually once the font is ready. Even though I don't think my font was nearly as good as other fonts, I felt that I have learned a lot throughout this journey, and will improve from my mistakes in the future. I had fun making my own font, and would do it again in the future.

Observations: 
I realised it is difficult for me to keep at consistency when making a new type family. When making the first few letters (A-E), I had a vision, with no problem designing each letter. However, my designs start to get messier and less creative as I continued making more (like not knowing how to individually design V and W), and might also lack quality, as I rush to finish that style. I observed that if I sketch them out first with a pencil, while jotting down personality or certain elements I want to include in the font, it is easier for me to stick to that idea and have a more distinctive style, albeit it would take me longer to finish and I could only finish one set of letters (either uppercase or lowercase). But in my opinion, I think it is better to write and design lesser characters for more quality designs, as trying to write a lot of letters is difficult in a short timespan. I also observed that I struggle more compared to others is because I lack being consistent when making my font, as I wanted a more freeform style, but that meant I had to create each letter individually, opposed to using the same elements that could be used throughout the letters. 


Findings:
To conclude, I have learned how to plan and sketch an idea out before making the actual thing, as I could brainstorm the idea first before finalising with a consistent design, and only later make that design. With making a font, it is important that I draw inspiration from already made fonts, and study them first to see how I could do the same, but in my own style and interpretation while keeping the original meaning. I learned that I tend to value quality over quantity, and that designing too many letters at once was very draining for me, and would take frequent breaks before continuing. To strengthen my weaker areas, I need to learn how to keep consistency, and think of ways that could make things simpler and faster, instead of going about the long, hard way. I also should study and take inspiration more from others, as it helps give me an idea of how to create something different, rather than a generic, normal design. Throughout this task, it was difficult here and there, and I felt stuck, but if I keep pushing through, I could make it. That even though I might not fully like my outcome, it is a step forward to the next thing that I could further improve my skills on, learning and carrying forward.


Comments

Post a Comment