Advanced Typography - Final Project
28.10.19 - 18.11.19 (Week 10 - Week 13)
Abigail Bea Chong Ka Yee (0333966)
Advanced Typography
Final Project - Design, Exploration, and Application
INSTRUCTIONS
FINAL PROJECT
Idea Proposal | Week 10
For our final project, we had to develop a font that is intended to solve a larger problem or meant to be part of a solution in the area of your interest be it graphic design, animation, new media or entertainment design or any other related area not necessarily reflecting your specialization or explore the use of a typeface in your area of interest, understand its existing relationship, identify areas that could be improved upon, explore possible solutions or combinations that may add value to the existing typeface. I started laying out my ideas on the paper to see what I could come up with:
![]() |
| Fig 1.1.1 A mindmap of ideas |
My first chosen idea was to redesign a cat food company called 'Sheba' to have more cat-like elements.
![]() |
| 1.1.2 Idea #1 (Sheba's logo) |
My second chosen idea was to create a typeface that looks more masculine because men do get breast cancer too.
![]() |
| Fig 1.1.3 Idea #2 (Illustrations for breast cancer awareness |
The slides of the proposal.
![]() |
| Fig 1.1.4 Sketches for idea #2 |
At first, I thought about using just letters and the nipples but it looked weird and just didn't feel right so I combined the ribbon and the breast in the image below.
![]() |
| Fig 1.1.5 Sketches of different letters |
I then tried to draw it digitally using my iPad on Procreate. Mr Vinod told me that if I wanted to create cursive fonts I should write it properly which I then created in fig 1.2.2.
| Fig 1.2.1 Process in Procreate |
I then made 26 lowercase letters to try out my ribbon-like font because when I searched 'breast cancer awareness' it was mostly cursive lowercase with only the first letter as an uppercase.
![]() |
| Fig 1.2.2 First Attempt (ribbon-like font lowercase) |
Then I moved on to the nipples scientifically known as areolas. This was quite tricky since it looked like a hat or a pimple if I didn't add the colour pink.
![]() |
| Fig 1.2.3 First Attempt (nipples) |
Mr Vinod told me to not make the font so cursive as it brings the attention away from the breast and that the nipples shouldn't be so obvious as it would look awkward thus not too simple as it takes away the characteristics. And he also suggested I should make capital letters too. I proceeded to simplify the strokes making them into thick and thin strokes, I ended up liking the thicker ones more.
![]() |
| Fig 1.2.4 Second Attempt (simplified strokes - thicker) |
![]() |
| Fig 1.2.5 Second Attempt (simplified strokes - thinner) |
![]() |
| Fig 1.2.6 Second Attempt (uppercase) |
I chose to work with Fig 1.2.4 and Fig 1.2.6 for my letters. Here are the inspirations before drawing the nipples out.
![]() |
| Fig 1.2.7 Inspiration #1 |
![]() |
| Fig 1.2.8 Inspiration #2 |
![]() |
| Fig 1.2.9 Inspiration #3 |
![]() |
| Fig 1.2.10 Inspiration #4 |
I then tried to make different types of nipples and also included the ones I made before in fig 1.2.3.
![]() |
| Fig 1.2.11 Second Attempt (nipples) |
I decided to use the bottom three as I just found out we actually have three types of nipples from fig 1.2.10. I then added the nipples to the letters. I used pink so it would be more noticeable.
![]() |
| Fig 1.3.1 First Attempt (lowercase with nipples) |
![]() |
| Fig 1.3.2 First Attempt (uppercase with nipples) |
However, Mr Vinod told me I should stick with black as the colour for the nipples.
![]() |
| Fig 1.3.3 Second Attempt (lowercase with black nipples) |
![]() |
| Fig 1.3.4 Second Attempt (uppercase with black nipples) |
I didn't like the way it looked like weird bumps on the letters so I added white lines around the nipples.
![]() |
| Fig 1.3.5 Third Attempt (lowercase with white outline on the nipples) |
![]() |
| Fig 1.3.6 Third Attempt (uppercase with white outline on the nipples) |
After that, I moved on to putting my letters into FontLab for my application since it would be easier to type out my typeface instead of just adjusting it manually. This process took me a long time to do due to my FontLab being in the demo version so I could only save 20 glyphs. However, once I exported out my fonts it didn't export my outlines properly. My first attempt was to try it to export the fonts to a website called Calligraphr (https://www.calligraphr.com/en/) which I succeeded too but it didn't have the kerning or spacing option so I moved on to Fontlab. My second attempt was the first two rows when I exported it to FontLab which turned out okay except for the lowercase letters d,h,p.
![]() |
| Fig 1.3.7 After exporting the fonts from FontLab (in purple brackets) and Calligraphr (in pink brackets) |
A close-up on the issue for lowercase letters d,h,p.
![]() |
| Fig 1.3.8 Lowercase letters d,h,p |
After showing my fonts to Mr Vinod, he suggested that if I wanted the outline to be noticeable I need to make the line bigger so that when it's smaller you'll be able to see it without difficulties. I then proceeded to place my typeface into Fontlab as mentioned above since it was only the demo version I saved it into three different files but exported it as one. I named the font "Breast Stroke".
![]() |
| Fig 1.3.9 Moving it to Fontlab |
![]() |
| Fig 1.3.10 After generating the fonts. |
![]() |
| Fig 1.3.11 Final Attempt (lowercase) |
![]() |
| Fig 1.3.12 Final Attempt (uppercase) |
![]() |
| Fig 1.3.13 Final Typeface (Breast Strokes) |
Application
I chose two applications which were badges and a pamphlet for breast self-exam.
![]() |
| Fig 1.4.1 Fisrt Attempt at the badges #1 |
![]() |
| Fig 1.4.2 Second Attempt at the badges #2 |
![]() |
| Fig 1.4.3 First Attempt - Pamphlet |
After feedback from Mr Vinod, he suggested that I should make a headline too to properly display my font.
![]() |
| Fig 1.4.4 First Attempt - Headline #1 |
![]() |
| Fig 1.4.5 First Attempt - Headline #2 |
![]() |
| Fig 1.4.6 First Attempt - Headline #3 |
![]() |
| Fig 1.4.7 First Attempt - Headline #4 |
![]() |
| Fig 1.4.8 Final Badges |
Mr Vinod and Mr Shamsul told me to be consistent if it's uppercase and lowercase keep it the same for all and that the tagline should also make sense with the headline.
![]() |
| Fig 1.4.9 Final Headline #1 |
![]() |
| Fig 1.4.10 Final Headline #2 |
![]() |
| Fig 1.4.11 Final Headline #3 |
![]() |
| Fig 1.4.12 Final Headline #4 |
FEEDBACK
Week 10
No feedback
Week 11
General Feedback:
Mr Vinod told us that for our LECTURE NOTES section if we didn't have lectures we don't need to put 'no lectures' in the blog. Our progression and the final outcome should be labeled clearly in the pictures; make sure our pdf's are public to view; make sure our microsite is active and that it opens in a new window and have a screenshot of the site.
Specific Feedback:
1st Idea - Mr Vinod told me that if I wanted to make the logo/typeface more masculine for breast cancer awareness, I would have to look at the data to see if it's significant enough to actually alter it. For example, if the data for colon cancer is higher than breast cancer I can't change it. I might have to look at this approach from a different way maybe create a typeface out of the breast or the elements of it. Update after showing my first attempt at combining the pink ribbon and the breast: Mr Vinod said that my idea of the typeface is going good and that I should try more variations with the proper cursive fonts. Other than that, he doesn't mind if the nipples are inside or outside the letter
2nd Idea - This idea could work if I want to make it better but there might not be a significant point to it.
Week 12
Specific Feedback:
Mr Vinod told me that I should focus more on the features of the nipples to make sure that it isn't too detailed because it might look awkward and not too simple so it takes away the characteristics and that the font shouldn't be so cursive because the attention might be taken away from the breast. Thus, I should make capital letters too and don't care about the nipple colour. This week is also crucial so I need to focus more.
Online Feedback:
Abigail I thought we agreed that the option where the nipple is black was the way to go.
General Feedback:
Mr Vinod told us that our eportfolio's should be presented well and document clearly so when other people are reading it they can understand better. Moreover, we should compile everything by next week into the final compilation.
Specific Feedback:
Mr Vinod showed me how to make the outline for the nipples better so it's able to be visible from afar, he also told me to make a headline in a square box with three quarters in length; add the pink ribbon logo for breast cancer awareness and a tagline with a website (for example).
REFLECTION
Experiences
Week 10; No class. Week 11; When I told Mr Vinod my ideas for the final project I was a little nervous about whether if he would accept it or not, but after telling him and getting his feedback I felt grateful when he told me to take a different approach towards my breast cancer idea. Moreover, when I had to sketch out my ideas at first I was quite lost and didn't know what I wanted to do but eventually, I got a good idea to combine the pink ribbon and the breasts. Week 12; I tried making different variations of the cursives fonts and the nipples which were quite difficult at first because I don't know how to write cursively and wasn't sure if the nipples looked appropriate. I hope I can finish this by next week. Week 13; I did not have enough sleep the day before my eyes really hurt in the morning. The day started out bad since I did not generate my fonts in time for the e-portfolio assessment which meant I did not complete my application which made me really frustrated. But after generating the fonts I felt relieved that I managed to do that within 6 hours of class. After getting feedback from Mr Vinod, I was really glad he liked my fonts because I like them too.
Observations
Week 10; No class. Week 11; I noticed that my idea was quite out of the ordinary compared to some of my friends' but I am quite happy about it. Week 12; I could feel the tension of the room because most of us weren't fully completed yet and I've also noticed that I actually could write in cursive. Week 13; I noticed that when I am really focused on my work I won't eat or do anything else besides my work. Other than that, some of my friends had to refine their fonts more or create more variations which made me feel bad for them since the deadline is near.
Week 10; No class. Week 11; I noticed that when I tried to sketch my ideas for the typeface on paper it was really weird and awkward-looking but when I used my Ipad the ribbon became what I wanted to achieve because of the cursiveness of the brush I used. Week 11; I found that it is really difficult to transfer files to a website to convert PSD into AI because my cursive fonts application only allowed me to export as PSD. Week 13; I found out that I could work even with only a few hours of sleep and that I am open enough to create this kind of fonts that other people won't necessarily think about.
FURTHER READING
DESIGN ELEMENTS, TYPOGRAPHY FUNDAMENTALS by Kristin Cullen
21.10.19 - 28.10.19 (Week 9 - Week 10)
![]() |
| Fig 1.1 DESIGN ELEMENTS, TYPOGRAPHY FUNDAMENTALS |
In chapter 4 it talks about the typesetting factors. It is said that the highlight of typographic craft are attention to detail and intelligent treatments. Designers transform text with type that articulates well often rests with them. In the book Typography: A Manual of Design, typographer, and designer Emil Ruder writes: “The oriental philosophers hold that the essence of created form depends on empty space. Without its hollow interior a jug is merely a lump of clay, and it is only the empty space inside that makes it into a vessel.” This means that typesetting happens when there is space around it and in it. Thus, using space can change the way type looks and feels, it can either be noticeably improving or weakening it.
THE COMPLETE MANUAL OF TYPOGRAPHY by James Felici
4.11.19 - 11.11.19 (Week 11 - Week 12)
![]() |
| Fig 1.2 THE COMPLETE MANUAL OF TYPOGRAPHY |
In this book, a chapter that fascinated me is that there are two basic kinds of fonts outline and bitmapped. The digital devices like computer monitor screens, imagesetters, desktop printers create images out of dots. The easiest way to create a type for one of these devices is to draw a picture of each character as a dot array and store it in a font. Then a single device needs to copy certain points into the screen or page to create a picture of the sort. -point was defined by one bit of computer data when this technology was first identified— a simple yes / no choice whether to imagine a dot or not. Bitmaps are called images generated from these pre-drawn and prearranged dot arrays, which called bitmapped fonts.
![]() |
| Fig 1.3 A bitmapped font |
In fig 1.3 in a bitmapped font, every point in the character drawing is mapped to one pixel of the display unit. As the device's resolution increases, the bitmapped text dots get smaller and smaller, and the character follows suit. In this example, a bitmapped character appears on the left side of the screen. If this bitmap is shown on a laptop printer, it shrinks to the width of the core. At the standard resolution of the picture setter, it shrinks to the right size.














































Comments
Post a Comment