Typography - Task 3: Type Design & Communication
.png)
19/5/2025 - 2/6/2025 / Week 8 - Week 12
Ten Sze Ching / 0365326
Typography / Bachelor of Interactive Spatial Design / Taylors University
Task 3: Type Design & Communication
-----
Table of Content
- Instructions
- Exercise: Deconstruction
- Task 3: Type Design & Communication
- Feedback
- Reflection
- Further Reading
Instructions
Figure 1.1 Module Information
< back
-----
Exercise: Deconstruction
In this exercise, we were taught how to create font designs in Adobe Illustrator using basic tools such as shapes, lines, the Pen Tool, and more. We then used the Shape Builder Tool to merge these elements and form complete letterforms. Before jumping straight into designing our own fonts, we began with a deconstruction exercise. We selected three typefaces from a set of ten and analyzed their construction using simple shapes. This helped us gain deeper insight into how different fonts are designed and how shapes can be used creatively to build unique typefaces.
Setting up
To start off, we created a 1080×1080 pixel artboard. Then, we made a square with dimensions of 500×500 pixels and placed it in the center. We chose a letter from one of the 10 given typefaces and positioned it in the middle of the square. Mr. Max mentioned that it’s okay for the curves of the letter to slightly exceed the square, as long as the flat edges align with the sides of the square.
Figure 2.1 Template
Figure 2.2 Deconstruction with guideline
Figure 2.4 Deconstruction of lowercase "n" in ITC New Baskerville Std
Figure 2.5 Deconstruction of lowercase "g" in Univers LT Std
< back
-----
Task 3: Type Design & Communication
Inspiration
Before starting this task, we had a short lecture on the rules of font design. Universally, the x-height of every letter remains consistent. The ascenders and descenders have equal height, typically five units or more, and uppercase letters always exceed the x-height. I searched for inspiration on Pinterest to explore different alphabet styles I might want to approach. After browsing through various designs, I decided to go with a minimalist, Bauhaus-inspired style (which we’ve learned about before) that is also aesthetically pleasing. Below are some inspirations I found on Pinterest.
Figure 3.1 Inspiration 1
Figure 3.2 Inspiration 2
While browsing for inspiration, I started thinking about incorporating moon and star elements, combined with a touch of calligraphy and Bauhaus design, which reflects the design approach I’m aiming for. I then explored visuals related to moon and star themes and looked into minimalist art styles as well.
Figure 3.3 Moon and Star Font Design
Sketching
For sketching, I used Procreate to begin, incorporating elements like the moon, stars, circles, and Bauhaus-inspired shapes. We started with the letters "a", "t", "b", and "g" as they feature different characteristics such as ascenders and descenders. Each column represents a different style. My design approach mainly uses circles and curves to symbolize the crescent moon and stars.
.png)
Figure 4.1 Sketch 1
I showed my first sketch to Mr. Max, and he liked the overall design. He chose the third and sixth columns as his preferred styles. However, he pointed out that the letter "t" had a thinner stroke compared to the other letters, which is not inconsistent in design.
Therefore, among the third and sixth options, I chose the sixth font design. Interestingly, the star and crescent moon elements I initially intended ended up resembling butterfly wings or leaves, giving the design a more natural feel. From there, I continued developing the same font family for the other assigned letters. Below is the outcome.
.png)
Figure 4.2 Sketch 2
However, from the feedback that I received from Mr. Max, the font family was not consistent. He preferred to have the "butterfly wings" element incorporated into every alphabet, which I think also makes sense. Initially, the "butterfly wings" in my idea were meant to be added only to the bowl of letters, as I thought repeating the same element might cause boredom. That’s why I tried to play around with the negative and positive space in the font design. However, after getting his feedback, I totally agree with what he said, when separated, they don’t look like they belong to the same font family. So, based on his suggestions, I made amendments accordingly. Below is the suggestion that he gave in red colour pen.
- The "butterfly wings" design can incorporate in the crotch of letter "t"
- For the letter "e," perhaps the bowl can be made more rounded, and the bowls of other letters can be adjusted to be smaller for better consistency.
Figure 4.3 Suggestion for letter "t" and "e"
Figure 4.4 Suggestion for letter "y", "m", and "i"
During the amendment, I tried to revise the letter "e" based on Mr. Max's suggestion; however, it didn’t align well with my intended aesthetic direction. Nevertheless, for the other letters, I followed Mr. Max’s advice and incorporated the same element into each one. Below are the amendments I made. For the letter "e," I came up with three design variations. As for the symbol, based on my understanding, it shouldn’t stand out too much from the letters, so I kept the design simple.
Figure 4.5 Refinement
Figure 4.6 Three versions of letter "e"
Figure 4.7 Symbol design
I messaged Mr. Max on WhatsApp to get his feedback so that I could start digitalizing the font in Adobe Illustrator earlier. He approved me to proceed with the digitalization as the letters generally looked good. However, for the letter "e", he preferred the version with the horizontal line in the middle, as he was concerned that the version without it might be mistaken for a "c". Regarding the symbols, he suggested incorporating the butterfly design into them as well. Therefore, based on his feedback, I came out with a new design for "!" and "#".
Figure 4.8 Refined Symbol Design
Mr. Max approved my symbol designs. He selected either the first or second design for the "#" symbol, and chose the second design for the "!". I’m glad that most of my designs were approved, and I have now started digitalizing them.
Digitalization
During the digitalization process, I also made some minor adjustments to improve the overall appearance, as the hand-drawn sketches were not entirely consistent. Before proceeding to digitalize all the fonts, I first experimented with the letter "a" to test different variations and determine which one looks best visually. I mainly used circles and straight lines to construct the font, which I have learned from the deconstruction tutorial last week. Below are some variations from my trial and error process. After a few minor adjustments, such as the thickness of the stroke, curvature of the bowl, alignment of the butterfly design and etc, the fifth one is the best looking one that I think.
Figure 5.1 Trial and error
Then I copied and pasted the butterfly element from the chosen letter "a" onto the other letters to keep it consistent. Using that as a foundation, I adjusted the design for each individual letter. I started with the easier ones, "b", "d", "p" and "o".
Figure 5.2 Letter "b"
Figure 5.3 Letter "b", "d", "p"
For the letters “b,” “d,” and “p” their designs are quite similar, differing only in direction. So after finalizing the design for “b”, I used the Reflect and Rotate tools to create “d” and “p”. For letter "o", I also copied and pasted the same design from letter "a", and just remove the right stroke.
Figure 5.4 Letter "o"
Next, I proceeded with the letters “g” and “y”, which share a similar descender. The challenge in designing the descender was making it look visually smooth and well-curved, especially since my typography style is calligraphic. My idea was to shape the inner curve of the descender as a circle, which aligns better with the overall aesthetic of my typography design.
Figure 5.5 Construction of letter "g" and its descender
Figure 5.6 Letter "g"
Figure 5.7 Letter "y"
However, after designing it and comparing it with the letter “p,” which also has a descender, I noticed that the descenders of “y” and “g” appeared thicker, while the one on “p” was thinner and sharper. To maintain consistency, I adjusted the design by making the middle part of the descenders on “y” and “g” thinner, while also maintaining the inner circular curve.
Figure 5.8 Refinement on descender
I proceeded with the letters “t,” “i”, and “m” by using similar elements from the previous letters, with slight adjustments in arrangement and the addition of consistent shapes. Overall, I didn’t encounter any major issues with these letters.
Figure 5.9 Letter "t"
Figure 5.10 Letter "i"
Figure 5.11 Letter "m"
However, for the letter “e,” I encountered an issue. Personally, I preferred the version without the middle stroke, but there was a concern that it might be mistaken for a “c.” So, based on my sketches, I digitalized three different versions to see which would work best. While all three looked fine to me, I felt they were slightly inconsistent with the rest of the font design, as I hadn’t used thin horizontal lines in the other letters, make the decision a bit difficult. After consulting with Mr. Max, he approved the version without the horizontal stroke (the third design), and I’m happy with that choice.
Figure 5.12 Three version of letter "e"
I proceeded with the final part of the digitalization, which was the symbol design. Using the same design elements, I didn’t encounter any issues creating the symbols. However, I’m unsure about the appropriate sizing for the symbols, so I’ll need to clarify that with Mr. Max. Overall, I’m satisfied with the designs, but I’m slightly concerned that the hashtag symbol might appear too large, especially if I want to maintain a consistent scale for the butterfly element across all the letters.
Figure 5.13 "#" symbol
Figure 5.14 "!" symbol
Figure 5.15 "!", "#", ",", "."
Last but not least, before finalizing the design and presenting it to Mr. Max for final adjustments, I arranged all the letters horizontally to evaluate their consistency as a font family. Personally, I’m satisfied with the overall design.
Figure 5.16 My font family
Before turning it into a typable font using FontLab, I showed my final font family to Mr. Max. Although it looks visually consistent, some minor adjustments are needed to make the font even better.
- a, b, d, p: The stroke looks too straight, try making it more curved.
- t: Adjust the inner and outer curvature of the stroke to make them more balanced for better visual consistency.
- !: The butterfly design stroke extends slightly too far. Instead of using a round shape, try using the curved square style used in other letters.
- e: Move the butterfly design to the left side instead of the top and consider adding a middle stroke for better structure.
Figure 6.1 Refinement part
According to Mr. Max's advice, I made some minor amendments. However, it wasn't easy, as the construction of my font design is quite complex. A slight misalignment could make the font look off, especially since my font family is based on a vector style with consistent bold strokes. Below are the amendments I have made:
Instead of the previous design, where the curved shape faced the same direction, I changed it to the opposite direction to match the stroke design of my letters "m" and "i," ensuring visual consistency.
Figure 6.3 Letter "b", "d", "p" refinement
Meanwhile, for the letters "b", "d", and "p", I made the strokes more curved. The curved elements were also extracted from the design of the letter "m" to maintain consistency.
Figure 6.4 Symbol "!" refinement
For the exclamation mark "!", I shortened the stroke slightly and, instead of using a round shape for the dot, I used the curved form from the adjustments made to the letters "a", "b", "d", and "p", shaping it into a small droplet. I also applied this redesigned dot to the full stop "." and comma "," for consistency.
Figure 6.5 Symbol "." and "," refinement
Figure 6.6 Letter "t" refinement
For the letter "t", I adjusted the stroke thickness to be more uniform, ensuring a smoother and more visually balanced appearance. However, for the letter "e", I made multiple attempts as I had difficulty incorporating design elements from the other letters. Before finalizing the design which both Mr. Max and I were satisfied with, I went through several rounds of trial and error. Below are some of the variations I explored.
Figure 6.7 Letter "e" trial and error
Figure 6.8 Letter "e" refinement
Figure 6.9 Before and after refinement
Figure 6.10 Development Board in Adobe Illustrator
After I felt that all the fonts looked good, I began importing them from Adobe Illustrator into FontLab. Before importing, I made sure all the font outlines were clean and clear in Illustrator. Then, I imported them into FontLab and adjusted each font to fit properly into the grid.
Figure 7.1 Adjusting the font into the grid
After importing all the letters, I tested them by typing out some vocabulary. However, the result didn’t look very nice, especially for the letters "i" and "t". The top part of the letter "i" was too wide, which caused the letters to appear too far apart when typed. Meanwhile, the letter "t" had a stroke that was too thin and its proportions were unbalanced, making it look awkward when combined with other letters.
Figure 7.2 First Attempt
Therefore, I went back to the drawing board to redesign both letters, aiming to make them more cohesive with the rest of the font family when typed in a sentence. This process also reminded me that while each letter should look good on its own, it is equally important to consider how well it fits with the others.
For the letter "i", since I wanted it to remain thin, it was not practical to add the usual butterfly design. Instead, I used another element, which is the curved end stroke, to maintain visual interest.
Figure 7.3 Letter "i"
As for the letter "t", I faced more challenges in trying to include the butterfly design while keeping the overall style consistent and aesthetically pleasing. I created a few sketches of the letter "t" and tested them in FontLab by typing them out with other letters to compare and evaluate how they looked together.
Figure 7.4 Sketches for letter "t"
Figure 7.5 Comparison 1
Figure 7.6 Comparison 2
Figure 7.7 Comparison 3
Figure 7.8 Side Bearing Measurement
According to the list, I started with the letter "o", setting both the left and right side bearings to 30. Since we did not design the letter "n" for this task, I used the letter "m" as a reference instead, as "m" and "n" typically share the same side bearing. I also set the side bearing of "m" to 30. I determined this measurement by comparing the spacing between the letters "o" and "m". After I felt the spacing was appropriate, I continued adjusting the other letters according to the guideline list. For letters that required slightly wider spacing, I set the bearing to 33. For those that needed to be spaced visually by eye, I kept the bearing at 30, since my font has a fairly consistent width overall.
Figure 7.9 Side Bearing Measurement
After that, I began adjusting the kerning between letter pairs. I paid extra attention to the kerning of the letters "i" and "t", as their designs were more complex compared to the other fonts. I started by typing out vocabulary words that included the letters we had created. Aside from "i" and "t", I noticed a few common pairings among the letters, such as curved-to-curved, curved-to-vertical stroke, vertical stroke-to-curved, and stroke-to-stroke combinations. Based on these patterns, I came up with a basic formula for kerning values: -8, 8, 0, and 16, depending on the type of pairing. However, some letter combinations required visual adjustment to achieve better balance, so I relied on my eye to fine-tune the spacing. I spent quite a long time making sure everything looked right, and the final result was approved by Mr. Max.
Figure 7.10 Kerning 1
Figure 7.11 Kerning 2
After I was satisfied with everything, including the font design, side bearings, and kerning, I proceeded to export it as a downloadable and usable font. Then, in Adobe Illustrator, I created a poster featuring my font and used all the letters I had designed. The quote I used in the poster, which I generated with help from ChatGPT using only the available letters, is: "By time I go. #A pet dog, made a tip!". And this marks the end of my font design task. I am glad to have created my first font design, and I’m quite proud of it.
Figure 7.12 Poster
Figure 7.13 Poster 2
Figure 7.14 Poster 3
Submission
Link to Download Font - Google Drive Link
Initial Sketch
Screen Grab of FontLab process
JPEG format
PDF format
Final JPEG A4 black & white poster
PDF format
Week 8
General Feedback: Today's class, we were given a brief on our task 3, which is creating our own font design. We were given a short lecture on the rules of creating fonts, such as the x-height of each letter should be equal and also symmetrical, and the ascender and descender should have the same height.
Specific Feedback: I came up with 6 drafts on the letter "a", "b", "g", "h". My idea is to combine moon and stars, with Bauhaus design that I have learned from task 2, a combination of both aesthetic and minimalist. Mr. Max likes the design and chose two from my 6 sketches. However, the letter "t" is too thin in stroke compared with other letters, in which I need to improve on it.
Week 9
General Feedback: We were introduced with how to create a digitalized font in Adobe Illustrator. The method of creating this is mainly use shapes, lines, pen tool and etc., and use shape builder tool to merge them together to make a font design.
Specific Feedback: I have shown my sketches that I have made for the rest of the alphabets. Some are approved such as "a", "b", "d", "p", "g". However, the rest of the alphabets need more improvement as they lack consistency. Mr. Max wanted me to implement the signature "butterfly" design in every alphabet. For example: the "butterfly" can be added in the crotch of letter "t", bowl of letter "e", and the inner curve of letter "y" and "m".
Week 10
General Feedback: Today we mainly have a consultation on Task 3.
Specific Feedback: I have shown my digitalized typography designs for several letters, which have been approved by Mr. Max. He mentioned that all the fonts are generally acceptable. However, he advised me to either align the lower strokes of the letters "g" and "y" with the upper strokes or make the lower strokes thinner. I chose the latter approach. I also shared the symbol designs with him via WhatsApp, where I incorporated the butterfly element into the "#" and "!" symbols based on his feedback. He liked the designs and selected one from each symbol. Additionally, I digitalized three versions of the letter "e". After comparing them, we agreed that the original version without the middle stroke looked the best, so I have chosen that one as the final design.
Week 11
General Feedback: Today we mainly have a consultation on Task 3.
Specific Feedback: I have shown my completed digitalized font to Mr. Max. A few adjustments were needed. The strokes for the letters "a," "b," "d," and "p" could be more curved, as they appeared too straight. Instead of using just a round shape for the ".", I was advised to utilize the stroke from the letters "i" and "m," shorten it, and reshape it into a curved square. For the letter "t," the butterfly design needed to be slightly shorter and thinner, as it appeared too long. As for the letter "e," I added the butterfly on the left side and included a short stroke in the middle. After several rounds of revisions, Mr. Max approved all of my typography designs.
Week 12
General Feedback: We were given a lecture about the tutorial of how to use FontLab, such as importing our font from Adobe Illustrator, adjusting the sizing and kerning of the letters, and also export it into usable font.
Specific Feedback: After digitalizing the font, I imported it into FontLab to test how the letters look when typed in a sentence, focusing on the relationship between each letter. While the characters look good individually, the combination of the letters "i" and "t" didn’t look quite right. The letter "t" appears too wide, and its stroke is too thin, while the butterfly design on the letter "i" is too large and obstructs nearby letters. I’ve since simplified the letter "i" by removing the butterfly design, and Mr. Max has approved the update. However, the letter "t" is still in progress.
Week 13
General Feedback: Today was mainly focused on consultation for our Task 3.
Specific Feedback: I showed my refined letter "t" to the lecturer, and he approved it at the beginning of the consultation. After that, I continued working on the kerning and poster for my font during class. All of them were approved by him, so I started working on the e-portfolio.
Experience
Creating a font family is a challenging yet insightful task. However, I’m glad that the process wasn’t too grueling, as the initial sketches of the font style I proposed were approved by Mr. Max. This gave me both a clear direction and the motivation to continue refining my font family based on my creativity.
The hardest part of this task was figuring out how to incorporate consistent design elements into each letter, to maintain visual harmony and show that they belong to the same font family. I had no problem with letters that have bowls, such as "a", "b", "p", "d", and "o", as their designs are quite similar. Since I started the design with the letter "a", it helped set the tone for the rest. However, letters like "t", "m", and "e" were more challenging, as it was difficult to maintain consistency while also ensuring each letter remained aesthetically pleasing and visually balanced. After several rounds of amendments, I’m glad that the final results turned out well.
Aside from just designing the font, I also learned the technical aspects of constructing a font using Adobe Illustrator. Since my font is mostly bold and made up of vector shapes like circles, I didn’t use the Pen Tool to draw the letters directly. Instead, I used basic shapes and the Shape Builder Tool to merge them into letterforms. The process involved more than just placing shapes, it also required careful attention to alignment and spacing to maintain consistency throughout the font.
In addition, I learned how to use FontLab to publish my font, which gave me a great sense of satisfaction when I was finally able to type using my own creation. Overall, this task taught me the full process, from ideation, sketching, digitizing, and making amendments, to publishing, a complete journey of creating a personalized font.
Observation
Observation, in this context, refers to studying how other designers create their font families, specifically how they maintain consistency across all letters while ensuring each character remains visually aesthetic. Apart from that, during the process of designing and refining my own font, I carefully observed the alignment and spacing when digitizing the font in Adobe Illustrator. This was to ensure that all letters had consistent sizing, spacing, and overall visual harmony.
Findings
Findings refer to the self-research I conducted on how to create a well-designed font family. Before starting the design process, it is essential to understand and study the fundamental principles and conventions of type design. This includes aspects like stroke contrast, spacing, alignment, proportion, and how to maintain consistency across different letterforms. Without this foundational knowledge, we are likely to face many setbacks during the design process, such as inconsistent characters, awkward spacing, or unbalanced visual weight, which may lead to repeated amendments and unnecessary frustration. While these challenges can be part of a valuable learning experience, doing proper research beforehand helps reduce avoidable mistakes, keeps the workload manageable, and allows us to focus more on creativity and refinement.
How to Create Typefaces: From Sketch to Screen by Cristóbal Henestrosa, Laura Meseguer, and José Scaglione
I learned how to use Bézier curves to construct clean outlines. The book explained how to place points correctly: use extremes for curves, avoid unnecessary anchor points, and keep the handles aligned smoothly to ensure clean shapes. This was especially useful because I realized that messy vector outlines can cause technical problems and poor visual flow.
< back
.jpg)
.png)
Comments
Post a Comment