Advanced Typography // Task 3

19.10.2022 - 23.11.22  Week 8 - Week 13 

Lim Yi Xvan 0354552
Bachelor of Design in Creative Media
Task 3 : Type Exploration & Application

---

Lectures

All completed in task 1 blog.

---

Instructions

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

Task 3 // Type Exploration & Application

With the knowledge and experience gained in the exercises and tasks, with the accumulated knowledge from the lectures and our own reading (library books and online sources), with the experience gained in the different software covered in the programme thus far, synthesise and apply the learning in the tasks to be mentioned. 

In this task we were asked to create a font. Well, there're requirements in creating or designing the fonts. We have options as below, which we can choose to go with our final task. 

Create a font that is intended to solve a larger problem or meant to be part of a solution in the area of our interest be it graphic design, animation, new media or entertainment design or any other related area not necessarily reflecting your specialisation.

or

Explore the use of 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. 

or

Experiment. For your idea to qualify as an experiment it must be novel and unique — working with material that might be 3- dimensional, digitally augmented, edible, unusual, typographic music video or fine art. 

In the final stage which is the end outcome could be a designed font and its application in the form or format that it is intending to provide a solution for, or an designed font that adds value to an existing use, or an experimentative output that results in something novel and unique. The work can manifest into any kind of format related to the issue being solved or explored or experimented: animation, 3d, print, ambient, projection, movie title or game title, music video, use of different material etc.

1. Research, ideation and proposal

On the first stage, we were asked to create a ppt proposal on min 3 ideas that we are interested in. Here's my proposal for my ideas.

fig 1.1 - proposal of ideas (26/10/22)

After getting feedbacks from Mr.Vinods, I decided to work with idea #3 as I want to try creating something fresh and new instead of doing idea #4. Eventho, he told me that he see no possibility in creating fonts like this but who knows so why not we try and see?

2. Explorations of ideas

I started playing with the cloud fonts at first. So here're 3 attempts I made for the cloud fonts and honestly I think they look shitty. Well I guess Mr.Vinods was right cause I see no possibility in this font too *cries*.

fig 1.1.2 - attempts made for idea #3 (29/10/22)

Then I asked my friends out for help from the morning class, they said I could work with the Licky Chan's font idea but maybe complete the font instead of redesigning it. So I try completing instead.

Here's a set of uppercase completed before David's (The Licky Chan's font creator) talk :D

fig 1.1.3 - parts of uppercase done  (1/11/22)

Then until the next day, David had his talk and I was very shook as before starting constructing this font, I've checked deep down from the internet and couldn't find the complete set of this font but then David showed us the font he had actually completed. As showed below:

fig 1.1.4 - David's version  (2/11/22)

Anyways because of this, I was afraid that my Licky Chan's font will be rejected as I was already half way done for the uppercase and I don't have much time to re-explore a new idea and start creating all over again. So I be like rushing in one hour before the class starts and start surveying from the internet and create another new fonts with the elements of diamond and stars which will be used for NASA or some other space or astrology use. So that I will not get nagged by Mr.Vinods for not done anything or showing any progress before classes.

fig 1.1.5 - Astrology font attempt  (2/11/22)

After classes ended, I asked for feedbacks luckily is a ok for the Licky Chan's font but Mr.Vinods just want to see my lowercases since David completed the uppercase (but not all completed just most of them, referred from fig 1.1.4). 

3. Digitisation

By then, I continue working with the font and completed my uppercases. However, in the process of creating the types, for some I've created some different options or attempts to choose.

The first row of each is the final I chosen, below rows are attempts and options I did before deciding.

fig 1.1.6 - "E","F","G","J","S" attempts  (3/11/22)

fig 1.1.7 - "T","M","W","X","Z" attempts  (3/11/22)

To decide with the letters, I also did putting them into words and see which works or suits better. Here's how I decide letter "J".

fig 1.1.7.1 - diff "J" options  (3/11/22)

I also used below elements to make sure the consistency of each letters I made such as using line as angles and the width of the thin and thick strokes.

fig 1.1.8 - elements used to make sure consistency  (1/11/22)

Well, here's how my 1st attempt of uppercase looks like.

fig 1.1.9 - 1st attempt of final uppercase  (4/11/22)

After done with the uppercase, I start doing the lowercases. To be honest, doing the lowercases is actually more struggling then the uppercase as they're more complicated. Besides, I need to manage the stroke to be the same within the X-height. Licky Chan's stroke is more to the thick one so to make it within the x-height was kinda tough at first. Luckily, I managed to make it.

fig 1.2 - "a","e","d","f","g","m" attempts  (6/11/22)

fig 1.2.2 - "r","s","t","w","x" attempts  (10/11/22)

This were the set of lowercase and uppercase showed in class for feedbacks.

fig 1.2.3 - 1st draft for lower and uppercase  (9/11/22)

Afterwards, I made some changes for the letter "x" and "w" compared to the previous one which I think it's better. Like what David said in his talk, the consistency are sometimes using the same elements and remove some strokes or just adding some strokes to create similarity and consistency, like reuse, recycle. 

In serif fonts, like lowercase "b" when you reflect it, it becomes "d", "M" when you reflect it upside down, it becomes "W".

Here's my complete set of lowercase looks like.

fig 1.2.4 - 2nd attempt of lowercase  (11/11/22)

Besides, I also did some changes with my uppercase. I lessen the thickness of the middle stroke in the "E" and remove the lowest part so it become a "F". For the letter "T", I increase the negative space between the head so it don't look awkward. Then is the "W" and "X", I change it same as the lowercase.

Here's my complete set of uppercase looks like.

fig 1.2.5 - 2nd attempt of uppercase  (11/11/22)

Then, I start doing the numbers and punctuations. Here're some options and drafts I made, the first row is the finalize one.

fig 1.2.6 - attempts for numbers  (13/11/22)

Complete set for numbers.

fig 1.2.7 - complete set of numbers  (14/11/22)

4. Import fonts into FontLab

Then, I import all these into FontLab8 and then while in FontLab8, I did some changes again like straighten the strokes and adjust the angles and those. Here're some progress of me adjusting the letters in Fontlab. As in AI, if the strokes are a bit narrow, it's actually quite hard to notice. But different in FontLab, angles of paths will be shown.

fig 1.2.8 - adjusting all the letters in FontLab8  (15/11/22)

Anyways for my punctuation, I actually did inside FontLab because I found it easier to make using FontLab hehe. After done importing them, I start doing the kernings of the letters.

fig 1.3.1 - complete sets imported into FontLab8  (16/11/22)

fig 1.3.2 - kerning process of punctuations in FontLab8  (17/11/22)

fig 1.3.3 - kerning process of lowercase in FontLab8  (17/11/22)

fig 1.3.4 - kerning process of uppercase in FontLab8  (17/11/22)

Then, after all the above steps done I exported into ttf. Here's a complete view of my typeface. I named it Bad Bad S as it gives me a bad vibes and S is my initials which I want it to be credited by me.

fig 1.3.5 - complete set exported  (18/11/22)

Measurements:

Median line/504pt

Cap line/700pt

Ascender line/770pt

Descender line/-190pt

Then, I did a comparison of my version of Licky Chan's typeface and David's one. Here's the comparison pic.

fig 1.3.6 - comparison versions of mine and David's  (20/11/22)

Which can see as above, my "T", "B","W","X","J","M","D" are different from his. Other uppercase which are not shown in the pic is all originally designed by myself.

5. Application

While this font is originally to be completed for Licky Chan. So of course I'm going to apply on things related about it. My idea is to use the fonts and design their brand's merchandise. What in my mind were ice cream's cooler bag, ice cream's cups, pints, aprons, mugs, and posters etc.

The Licky Chan's have a colour scheme which well known is their bling gradient colour. Here's some surveys I did about their designs. The combination of colours will always be rainbow metallic silver and black for their stuffs.

fig 1.4.1 - ice cream's cone packaging 

fig 1.4.2 - ice cream's box packaging 

fig 1.4.3 - ice cream's cooler bags 

fig 1.4.4 - ice cream's cooler bags and boxes

So I downloaded a rainbow metallic gradient background which to be used as my colour scheme for my applications. I used it in PSD as clipping mask to create gradient in text.

fig 1.4.5 - bg used for applications

First of all, I started with making the cooler bag. I went up to the internet to find sources for mock up. Then, I started design the cooler bag with my fonts in Photoshop.

fig 1.5.1 - 1st attempts for application in cooler bag  (20/11/22)

I think this design might look abit too boring and the alignments are a nah, then I tried a different compositions and also exchange the colour scheme and see which looks better. 

fig 1.5.2 - 2nd attempts for application in cooler bag  (20/11/22)

Well obviously, the one with more coloured is better. By then, I made a new version of it with the colour options on the right, the design will still remain as fig1.5.2 ones.

Next, I designed the ice cream's pints packagings. Here's my 1st attempt for it.

fig 1.5.3 - 1st attempts for application in pints  (20/11/22)

Then, I think the text in small sizes would be abit too boring and not too eye-catching which my intention is to strengthen the characteristics for the type. So I increased the title which is the flavour's name on the pint and here's how it looks like after the size being increased.

fig 1.5.4 - 2nd attempts for application in pints  (20/11/22)

By then, contrast was applied by the text sizes which makes it special. The ingredients of the ice cream flavours are in the same font too. Here's a closeup view for the ingredients.

fig 1.5.5 - close up for application in pints  (20/11/22)

Then, I made posters about their branches and some with their slogans. Besides, I've redesigned the ice cream's cup by adding some sparkles elements. 

fig 1.5.6 - application for posters  (21/11/22)

fig 1.5.7 - application for ice cream's box  (21/11/22)

For the menu, their original version of menu looks like this and I redesigned it make it more interesting and colourful.

fig 1.5.8 - application for menu  (21/11/22)

Then, I also designed few versions for the aprons which can be wore by the staffs. Well, they can also consider to give away them:D

fig 1.5.9 - two designs of application for aprons  (21/11/22)

I also designed mugs for them. Which they can make it like when their members hit the purchase limit they will be rewarded with a mug. While since Christmas is in the corner, so I created few designs of mugs for the festival~ Remember I was listening to "All I want for Christmas is you" while designing the Christmas edition's mugs haha.

fig 1.6.1 - two designs of application for mugs (1st attempt)  (21/11/22)

This is my 1st attempt in designing the mugs. Then I thought that the handler being in white was a bit too weird and not smooth. So ya I fill in the handler with colours and try out some other designs.

fig 1.6.2 - two designs of application for mugs (2nd attempt) (21/11/22)

Well I tried doing another design which is the left hand one. But obviously the previous one was better. So I decided to stick with the previous design. For the right hand side design is for Christmas's edition hehe.

fig 1.6.3 - two designs of application for mugs (final) (21/11/22)

Then I used the design on the right hand side in fig1.6.2, and added another design for the Christmas's edition mugs. I personally like the right side one really much!!

fig 1.6.4 - two designs of application for Christmas's edition mugs (final) (21/11/22)

Final Submission Task 3

1. Type Exploration

fig 1.7.1 - Completed type "Bad Bad S" in jpeg (18/11/22)

fig 1.7.2 - Completed type "Bad Bad S" in pdf (18/11/22)

Link to download font:

https://drive.google.com/file/d/1fxoWRE0fxZGoZyf_122RnnommTkIaKys/view

2. Application

fig 1.8.1 - Application for apron in jpeg (22/11/22)

fig 1.8.2 - Application for cooler bag in jpeg (22/11/22)

fig 1.8.3 - Application for pints packaging in jpeg (22/11/22)

fig 1.8.4 - Application for menu in jpeg (22/11/22)

fig 1.8.5 - Application for mugs in jpeg (22/11/22)

fig 1.8.6 - Application for Christmas edition's mugs in jpeg(22/11/22)

fig 1.8.7 - Application for ice cream's box in jpeg(22/11/22)

fig 1.8.8 - Application for posters in jpeg(22/11/22)

fig 1.9.1 - Application for apron in pdf(23/11/22)

fig 1.9.2 - Application for cooler bag in pdf (23/11/22)

fig 1.9.3 - Application for pints packaging in pdf (23/11/22)

fig 1.9.4 - Application for menu in pdf (23/11/22)

fig 1.9.5 - Application for mugs in pdf (23/11/22)

fig 1.9.6 - Application for Christmas edition's mugs in pdf (23/11/22)

fig 1.9.7 - Application for ice cream's box in pdf (23/11/22)

fig 1.9.8 - Application for posters in pdf (23/11/22)

---

Feedbacks

Week 9:

General Feedback: We can't modify existing fonts. Fonts we chose to design must be unique. Specific Feedback: Don't change the fonts which are already very perfect itself. Try to think of the progress of how you create the type instead of jumping to think about the final stage on adding texture, application these or that.

Week 10:

General Feedback: When designing on the type we must think about the application afterwards. Specific Feedback: Mr.Vinod will just be looking on the lower case letters.

Week 11:

General Feedback: Make sure the strokes of the letterforms are consistent. Think about the application for the letterforms. Specific Feedback: The space between the letter "T" is awkward try fixing it. Make sure the gap between the letter "K" and "X" are the same.

Week 12:

General Feedback: Choose wisely for the applications for the letterforms.
Specific Feedback: Make sure the kerning isn't too far, and the strokes for the punctuations are the same as the letters. Choose carefully for your applications and what merchandise you're choosing. Make sure it's related.

---

Reflections

Experience: Throughout the whole progress for task 3, at first I was kinda stress out because the creator of this font did a completed set for this type but I don't know. The process of creating some of the letters are quite difficult. Although this might seems to look like an easy typeface but what I can say is there'll surely be their difficulties in creating different typefaces. The letters like "X", "a", "W", "E", "G" and some punctuations like "?" and more are quite hard for me to construct as I need to maintain the thin and thick of the stroke which is quite frustrating. Anyways, it's fun when I see the outcome and bring it into the progress for my applications. I enjoy the progress of doing the applications. I'm satisfied with my work so far but I think there might be some spaces to be improved too!

Observations: With the task given, I found that the X-height for each letter to be the same is the key to create a good typeface as it's super vital to make them have the equal size so that it'll look neat. Besides, the kerning of each letter must be adjust well so that when building a sentence with the typeface, they won't look too tide or too loose but just right on the spot. This is important for us to present our typeface infront to the reader. When constructing the letters using width tool, I find that the lesser point used the more even the strokes will be as well for the pen tool. I also get to study on different characteristics on each letters. Last but not least, I get to realize that all strokes and letters are reused and recycle to form another letterforms which David mentioned in his talk.

Findings: In task 3, I've learn on how to construct typeface on Illustrator with just using fixed shapes, paths and strokes etc. I've also get to learn on how to construct a thick stroke typefaces. Besides, I had the chance to learn each letter's characteristics and learn the speciality and unique of different typefaces.

---

Further Readings

Typographic Design: Form And Communication

Fig 2.1 Book Cover

PAGE 45

Italics are used to emphasize something such as a headline, or sub-headline.

Fig 2.1.2 Pg 45 (29/11/22)

PAGE 47

Univers 55's relationships & proportions are ideal for text settings. The first digit written after the name of the typeface indicates the stroke weight whereas the second digit represents the expansion & contraction of the spaces within the letters such as expanded & condensed styles. 

All 21 typefaces in the Univers type family possess the exact x-height, capital height as well as ascender/ descender height. They can be used without any restrictions.

Fig 2.1.3 Pg 47 (29/10/22)