Advanced Typography - Task 3 / Final Project

 

19/10/2022 - 23/11/2022 (Week 8-Week 13)

Yong Kai Yi (0352826)

Advanced Typography

Task 3 (Final Project) / Type Exploration and Application

---

INSTRUCTIONS

Task 3: Type Exploration

19/10/2022- 23/11/2022 (week 8 - week 13)

Idea proposal:

fig 01: idea proposal 1 (week 8/ 19/10/2022)

I was inspired by a few album and clothing brand typefaces, I think it's too bad that there's no existing typeface for these good-looking and interesting title designs. 

    The second idea is totally different from idea 1, idea 1 is meant to complete the typeface but idea 2 is like creating something to solve a problem. I watched TVB drama since I was little, I had observed that the DVD or poster design often focuses more on the Chinese title design, but the English title is just randomly made and placed, which doesn't seem to fit the whole visual design too. I was thinking to globalize TVB dramas, hence even without the Chinese title, the poster can be recognized and visually attractive to viewers who don't know to read Chinese. 

    After the pitching session, I chose idea 1 and was thinking to try out combining the 1.1 and 1.3 designs, while design 1.4 will be my backup plan.

Then I start to sketch, and I found out it was really challenging combing the 1.1 and 1.3 typefaces, after different attempts, I think it might not be a good idea to go for that. Hence, I chose the 1.4 design instead.

Progressions:

fig 02: using the shape tool to trace the overall (week 9/ 26/10/2022)

Mainly using the rectangle tool and the pen tool to create the strokes. I start with the letter 'E' because for the whole title, the letter 'E' has the strongest characters and the one I love the most.

fig 03: unite (week 9/ 26/10/2022)

Using unite tool from pathfinder to combine all the shapes together.

fig 04: experimenting with letter A (week 9/ 26/10/2022)

The experimenting with the letter 'A', I was trying different angles and how to place the stroke.

fig 05: shape tool (week 9/ 26/10/2022)

fig 06: reflect (week 9/ 26/10/2022)

After making the letter 'N', I duplicate it and reflect it vertically. Then I combine two 'N's and adjust it a little to make it look like an 'M'. 

fig 07: compare different variations (week 9/ 26/10/2022)

Because the Guns N' Roses font is using different serifs for different letters. Hence, I tried different variations for certain letters to make a comparison of which serif to go to. 

fig 08: lowercase (week 10/ 02/11/2022)

I start my lowercase with the shape tool also.

fig 09: lowercase (week 10/ 02/11/2022)

fig 10: maintain consistency (week 11/ 09/11/2022)

During the feedback session on Week 11, I realized that I have encountered a few mistakes and errors for the upper case letters. Then, I readjust all the letters, to maintain the consistency of the serifs and so on.

fig 11: experimenting with different sizes and degrees for the letter X (week 11/ 09/11/2022)

Personally, really struggles when doing the letter X Y, as I need to manage the degree of the strokes.

fig 12: referring to the pre-sketch (week 11/ 09/11/2022)

 

fig 13: different solution for letter X (week 11/ 09/11/2022)

Trying another solution to see if different variations of X can fit also.

fig 14: lower case (week 11/ 09/11/2022)

Using the same rectangle shape for all lowercase letters as a reference to maintain the width to determine how much the serif needs to stick out.

fig 15: upper case amendments for letter X Y (week 11/ 09/11/2022)

While doing the lowercase letters, I made a comparison and realized the uppercase Y need to make some adjustments.

fig 16: numbers (week 11/ 09/11/2022)

Using the shape builder tool to create the numbers and using the same stroke width and serifs as the uppercase letters.

fig 17: numbers (week 11/ 09/11/2022)

The typeface I was creating is more like a sharp, straight, strong style, hence I replace the typical rounded edges for numbers like 0, 9, 6, 8, and so on with straight and sharp diagonal edges. 

fig 18: punctuations (week 11/ 09/11/2022)

Same for the punctuations, I use the same square for the edges to maintain the degree of the slants. 

 

fig 19: punctuations (week 11/ 09/11/2022)

Analyzing the punctuations size of Bodoni Std, I found out that the period and comma are 1/4 of the x-height. While the brackets will exceed a bit of the descender. 

fig 20: adjustments before import to FontLab (week 11/ 09/11/2022)

After completing the digitizing of the typeface, I assemble all the finalized uppercase, lowercase, numbers, and punctuations into another AI file to avoid over messy artboard. Due to some reasons, measurements of my x-height, ascenders, and such mostly have decimals, because FontLab doesn't allow me to key in the decimal hence I adjusted the heights into the whole number without decimals.

fig 21: settings (week 11/ 09/11/2022)

I start by setting the x-height as 500pts. 

fig 22: import to FontLab (week 11/ 09/11/2022)

fig 23: adjustments after import to FontLab (week 11/ 09/11/2022)

While importing into the FontLab, I realized some of the letters stand out and might need some minor changes, hence I back to AI and made some adjustments.

fig 24: FontLab trial version expired (week 11/ 09/11/2022)

After I imported all the finalized letters into FontLab, I just realized the trial had expired hence I can't save it. I need to install it again and reimport it.

fig 25: adjustments after import to FontLab (week 11/ 09/11/2022)

After installing FontLab8, I imported the letters again. This time I tried typing different words and finding out what does not look right, so I can immediately make adjustments in AI. For some reason, I can't copy and paste the letters from AI to FL8, hence I need to split the screen and drag the letters into FL8 and manually adjust it to make sure it sits on the baseline.

fig 26: uppercase kerning (week 11/ 09/11/2022)

fig 27: lowercase kerning (week 11/ 09/11/2022)

I'm using letters combination from the basic kerning text website to do the kerning, so I can see each letter combination, what it looks like and how much should I increase/ decrease the space.

fig 28: compare different variations (week 11/ 09/11/2022)

fig 29: compare different variations (letter g) (week 11/ 09/11/2022)

So, while I'm kerning the letters, I found out the letter g might need to try out another variation to see if is better. (maybe after staring at the letter for a long time, I might have an illusion? T.T) Hence, I use the same counter space and strokes like the letter p and put them together to see which one was better, but I can't make the decision hence I was planning to show Mr.Vinod during the next feedback session.

 

fig 30: compare different variations (letter y) (week 11/ 09/11/2022)

While I am kerning, I have a problem with the letter y, as it takes too much space, and it requires more space for both left and right sides than other letters, hence it may look a bit weird. I back to AI, and try to make it less wide and I think it looks better (the right one is the adjusted one). 

 

fig 31: compare different variations (letter x) (week 11/ 09/11/2022)

For the letter x, it had the same issue as the letter y I stated just now. Besides that, the serifs also look weird, hence I made 2 more variations to see the comparisons, 2nd one is a blockish serif for the top and a pointy serif for the bottom, while the 3rd one is using only blockish serif. 

fig 32: compare different variations (letter H) (week 11/ 09/11/2022)

The uppercase H had the same problem as the letter x, hence I made another variation which with only pointy serifs while the right one is combining two serifs (like what I did for all the other letters). 

Conclusion for W11 progress, done kerning and finalized the typeface, just need to ask for feedback for certain letters that I have variations for it. 

fig 33: adjust the width (letter W) (week 12/ 16/11/2022)

During the feedback session, Mr.Vinod pointed out the issues I have with the outcome, the letter W, and V strokes are way wider than the letter M (and other letters too), hence I immediately adjust in AI, and make sure the strokes are consistent. 

 

 

fig 34: serifs before and after (letter W, V, X, and Y) (week 12/ 16/11/2022)

The picture on the right shows the original design of W and V to make a comparison with the left which is showing the 'after'. I am using the same concept that I applied to other letters - combining two different serifs. I think it turns out better than the previous ones, as the previous ones didn't seem to fit in with the other letters.

 

fig 35: serifs before and after (letter w, v, x, y, and z) (week 12/ 16/11/2022)

The same goes for the lowercase too, because when I was creating these letters, I was using the same method. Hence, I made adjustments to their serifs too. 

fig 36: letter X stroke alignment (week 12/ 16/11/2022)

During the feedback, Mr.Vinod mentioned that the letter X's strokes actually are not aligned with each other, I was suggested to explore and analyze more the letter X. 

 

fig 37: letter X stroke alignment (week 12/ 16/11/2022)

Analysis of the letter X from Rotis Semi Sans. 

fig 38: letter X stroke alignment before and after (week 12/ 16/11/2022)

 

fig 39: letter x stroke alignment before and after (week 12/ 16/11/2022)

I use the shape builder tool to cut off the stroke and adjust it a bit higher until the space for both the top and bottom are kind of equal. 

fig 40: dollar sign (week 12/ 16/11/2022)

I added a few more punctuations including the dollar sign, which I think will be interesting while creating it.

Application progressions:

The merchandise I was planning to do is for the Guns N' Roses tour in Malaysia as they went for a world tour and been to some of the Asia countries, for example, Singapore, Thailand, and Japan, they have posters for each country, the posters will include the elements of Guns N' Roses and also the symbol of that specific country, hence I was inspired to create one for Malaysia's too

Posters for Singapore, Thailand, and Japan (found on Guns N' Roses official Twitter account):

fig 41: Singapore tour poster (week 12/ 16/11/2022)

fig 42: Thailand tour poster (week 12/ 16/11/2022)

fig 43: Japan tour poster (week 12/ 16/11/2022)

For the merchandise, I've been through some official merchandise from Guns N' Roses official website, I was planning to create something that they didn't release before. The merchandise I was planning to create was a scented candle, a handkerchief (like a scarf ), a skateboard, a guitar pick, scrunchies,  and a featuring wall art. Besides that, I found that the zippo lighter is quite interesting as well, it's a collectible item and something that can use for a candle also. Apparel such as socks, t-shirts, and caps will be my additional or backup ideas. 

fig 44: reference 1 from Pinterest (week 12/ 16/11/2022)

fig 45: reference 2 from Pinterest (week 12/ 16/11/2022)

I found some reference from Google and Pinterest, the reference shown above is the chosen style I will like to go to. I like how these posters use only 4-5 colors and still look very 3 dimensional, and dynamic.

fig 46: poster progression (week 12/ 16/11/2022)

I have been through Google and searched for a few Guns N' Roses band photos to put on the poster as one of the main subjects. Before importing it to AI, I removed the background using PS (quick selection tool). I am using 'image trace' to make the 'cartoony' effect and manually adjust the threshold, path, and noise. 

fig 47: color scheme (week 12/ 16/11/2022)

At first, I didn't really have an idea how to design the poster, so I was trying to experiment and find the color scheme I wanted to go for by referring to the two posters I found on Pinterest. 

fig 48: background progress (week 12/ 16/11/2022)

So, for this Malaysia tour poster, I was planning to place some of Malaysia's features in it, so I chose a batik pattern as the background. 

fig 49: poster progress (week 12/ 16/11/2022)

After adding the title and border, I thought was a bit too plain, so I tried to add a background color for it, referring to the poster reference 2. After drawing a rectangle, I drew a few straight lines, and divide them so that I can change the colors individually. 

fig 50: poster progress (week 12/ 16/11/2022)

I tried adding some shapes for the bottom part and comparing whether adding a batik pattern was better or just a rectangle. 

A variety of poster outcomes:

fig 51: poster 1 (week 12/ 16/11/2022)

fig 52: poster 2 (week 12/ 16/11/2022)

fig 53: poster 3 (week 12/ 16/11/2022)

fig 54: poster 4 (week 12/ 16/11/2022)

Color correction:

fig 55: color correction (week 13/ 23/11/2022)

After I did the poster, and I exported it to my mobile phone and desktop, I realized the colors are different, to clarify, I sent it to my friends and see what colors they saw on their screens respectively. I think my laptop's color looks dimmer and less vibrant, when I exported it to another device it may look extra vibrant and bright. Hence, I changed the color of my laptop (might look a way dimmer yellow and red) so it will have the color scheme I wanted (from the other devices' looks). 

fig 56: skateboard mock-up (week 13/ 23/11/2022)

fig 57: tote bag mock-up (week 13/ 23/11/2022)

Before I did the color correction, I started a few merchandise mock-ups, but due to the color issue, I need to change everything again. The picture shown above is the mock-up progressions before color correcting.

Progressions after color correction: 

fig 58: pillow case mock-up progression (week 13/ 23/11/2022)

I used two of the main colors I used in the poster: gold and red. As I chose the letter G for the tote bag and made a repetitive pattern, hence I was thinking to use the letter R for the pillowcase to represent Roses. 

fig 59: guitar pick mock-up progression in PS (week 13/ 23/11/2022)

I was trying to make a similar effect with the other merchandise for the guitar pick, but because photoshop is a bit laggy, hence I decided to make the visuals in AI and turned it into a smart object. 

fig 60: guitar pick mock-up progression in AI (week 13/ 23/11/2022)

I found out that AI is more easier and effective to make this kind of effect than PS.

fig 61: guitar pick mock-up progression in PS (week 13/ 23/11/2022)

Then, I copy it to PS and adjust the position and size to fit the pick. 

fig 62: skateboard mock-up (week 13/ 23/11/2022)

fig 63: skateboard mock-up (week 13/ 23/11/2022)

When I was working on the skateboard mock-up, I realized the color looks different again when it was applied on the skateboard, I think because the PSD file layers included an adjustment layer that increased the contrast and vibrance, but I was unable to remove it. Therefore, I found another PSD file for the skateboard. 

fig 64: skateboard mock-up (week 13/ 23/11/2022)

fig 65: skateboard mock-up (week 13/ 23/11/2022)

Finally, the color looks the same as the other merchandise. 

fig 66: scrunchies 1 mock-up (week 13/ 23/11/2022)

fig 67: scrunchies 2 mock-up (week 13/ 23/11/2022)

fig 68: scrunchies mock-up (week 13/ 23/11/2022)

For the scrunchies, I decided to make two different designs, instead of using the same base color (black) as the other merch, I changed to dark purple and dark green (which were extracted from the poster color palette). I made two designs by using a different letter from 'GUNS N ROSES'. 

Typeface Final outcome:

guns roses font download link

fig 69: FontLab

Application final outcomes:

fig 70: poster application (week 13/ 23/11/2022)

I wanted to make a poster that includes some of Malaysia's features in it, hence I added some batik patterns for the background as well as the front part. The reason I chose this color palette is I thought that red color represents the rock band, while yellow also is one of the colors in Jalur Gemilang. Furthermore, I wanted to make it more vintage and retro-like, so I toned down the red and yellow. 

fig 71: G tote bag application (week 13/ 23/11/2022)

So for the merchandise, I was planning to make something that the official band hasn't released yet. Tote bag is a really typical merch for concerts, so I chose it as my 1st merch. 

fig 72: U guitar pick application (week 13/ 23/11/2022)

I chose the guitar pick as I think it's collectible and represent the rock band too, it is suitable for people who love Guns N' Roses as well as music too.

fig 73: N & S scrunchies application (week 13/ 23/11/2022)

Scrunchies can use to tie hair and also as a bracelet, as nowadays people love to use scrunchies as part of their accessories, hence I was thinking the audience can wear them in the concert to match the vibes.

 

fig 74: R pillow application (week 13/ 23/11/2022)

Pillow is something that can use as a decoration for a bedroom or anywhere else, as most of the merchandise I created is wearable and can bring outside, so I decided to add one that can use at home.

fig 75: O skateboard application (week 13/ 23/11/2022)

Skateboard is something quite trending now, and it is a collectible item too. Skateboard is representing freedom, so I thought that quite matches the vibe of the music genre. 

fig 76: E zippo lighter application (week 13/ 23/11/2022)

Zippo lighter is something looks really exclusive, a collectible vintage item for the fans. As Guns N Roses is an 80s rock band, I decided to add one merch related to the 80s too. 

In total, I made 6 merch but using different letters to form the pattern, and all the merch are in following the sequence of GUNS N ROSES. I used the letter G for the tote bag, the letter U for the guitar pick holder, the letter N, and S for the scrunchies, the letter R for the pillow, the letter O for the skateboard, and the letter E for the zippo lighter. 

PDF files:

---

FEEDBACKS

Week 12 (16/11/2022)

General feedback (for everyone): Find a unique median to showcase your typeface when doing the application. Research is important.

Specific feedback: (Q1: the letter g variations) There's no need to maintain the similarity between the p and g as they are different, so it's fine that they are DIFFERENT. (Q2: the letter x variations) It's not possible to always maintain absolute consistency, in some letters require some nuance differences. It's fine that the crossbar does not cross at the top same as the others. Don't confuse yourself, just maintain the original design (the top is blockish serif and the bottom is pointy serif). (Q3:letter H) The core element and core part of the typeface are the top is a blockish serif and the bottom is a pointy serif, hence just maintain it for the letters. For letter W it looks different in size from the letter M, the serifs are different (the width). (Plan for applications) That's fine, but no need to do all the illustrations can just find any online, and use existing things to do it. 

(after making necessary adjustments) One suggestion for the letter X (x), is not all the time that letter X has a straight line (the crossbar), the problem is the bottom space is too small, so one way to solve it is to make the crossbar not align (a little), go study the letter X. (for the merchandise idea) For the scarf/handkerchief: whatever you do, must use your typeface as the main design. Can type a row of your letters (tightly kern) to create a pattern. Even if you create a cap, you can place huge lettering in front of the cap, big is good. Add a tote bag or bag also. 

Week 11 (09/11/2022)

Specific feedback: The bumps you have on the side there are not needed, they don't do anything to the typeface, and the ones in between are not necessary. If you want to add the bumps at the top (that is fine), just make sure they protrude a little bit more. As yours is not the conventional serif font right, no need to have a classic-looking 'g'. 

Week 10 (02/11/2022)

General feedback: When designing punctuations generally would make a lot of mistakes, especially with something as insignificant as a full stop, and a comma is perennial among students when designing a typeface for the 1st time. 

Specific feedback: Interesting but a little problematic as well. The 'Q' has issues, and the 'A' (on the right) is more correct because of the vast amount you have there (for the 'A' on the left). I think the 'D' and 'B' shouldn't be curved on both ends. The counter space of 'B' is too wide. Same as the letter 'P' the counter space should be smaller. 'B' is too circular, I think needs to be more squarish, suggest the same thing as well for 'D'. The 'N' is cool but I think needs to mimic a bit like the bottom, they need to be equal. The 'Q' looks too cute, need to straighten it, you need to fix it, and maybe try it for another angle.  

Specific feedback (after class): (as the original Guns n' roses album typeface is using different serifs for the upper part and lower part, the inconsistent of serifs is the character of the typeface, so was trying to ask Mr.Vinod whether should I change it to consistent serifs or remain the originality) The different serifs works as well, maybe need to try it out with both inconsistent ones and consistent ones to make the comparison because different serifs may work for certain letters but not for some of the letters too, the decisions need to make by yourself. 

Week 9 (26/10/2022)

Specific feedback: For idea 2, there have been many students who have gone about doing that, some have been successful, some have been very stereotypical, and others are not particularly very good. It's not easy to translate a vernacular script and take that influence to influence your typeface, need to start very early if wanted to go for this idea. If focus on one film, the premise of the idea is obviously shaky. Application of it might not be great and exciting to embark on. The album (idea 1) can expand on the selected title, which can be used for the merchandise for that particular album or advertisement, but it ends there. Digitizing idea 1.9 is not challenging as it was designed and is too rudimentary, hence idea 1.8 Flash Gordon would be a better option which is a little bit challenging but also worthwhile in terms of its lettering quality. Idea 1.3 is using an existing typeface, and in totality, it's not great looking. you can actually propose to redesign it and introduce a new typeface for that particular album, taking inspiration from some of the letters from it. I'm okay with redesigning the Jack In The Box album and completing the Guns n' Roses typeface.

---

REFLECTIONS

Experience

Before starting the final project, I was actually quite scared and worried, as my own experience in previous semester creating the typeface for some letter is already very overwhelmed for me, I feared that this time I might 'passed out' as we need to complete the whole set of the typeface. But when I was doing the idea proposal, I was actually quite excited to start it, the idea keep coming in and I have a lot of things wanted to do, also when I was brainstorming and doing research for the ideas, my father approach to me and wondering what I'm doing for this assignment, so I told him, and he keeps giving me some bands from 70s 80s albums he likes, he also shared to me some band/ musicians vibe and design is really interesting to explore too. Therefore, during the idea brainstorming is quite fun yet time consuming, I spent quite a lot of time to think and research all the ideas. Personally I wanted to create typeface which was related to j-hope's latest album, as it is quite meaningful for me, but maybe due to the time limitations, I might not have the time to think about it, although I did tried to sketch a bit but it's quite unachievable and too challenging for me. Instead of choosing the album meant a lot for me, I chose the one that my father loves the most, which is Guns N Roses ones, to be honest throughout the process, I slowly gained interest and in love with the original typeface, which drives me to complete the whole thing. During the process of sketching and digitizing, I have been really indecisive on which version to choose, as there are lots of possibilities and varieties for it. It's time consuming to make comparisons but it's actually quite fun to see the evolution of the typeface. For me, I think compared to previous semester I have been improved a little in terms of the AI skills and maintaining the consistency, although it's still not that good yet but I think better than previous semester which I don't even know I can use shape tool, shape builder tool, using the same strokes to create other letters. Well, for the progression of application, the thing I'm struggling is to find a mock-up PSD file for cap, which I can have a larger space to edit my design in it, as most of the PSD out there only have limited space for users to edit. The another big challenge I faced is the color !!!! Because I just realized my laptop have poor color accuracy and color gamut, causes the color difference between what I see in my laptop screen and my other devices, and that's really frustrating, after I chosen the color palette and done the poster ,sent it to my friend to see their reviews, then I just realized the color became more yellowish, vibrant in other devices. The final color might not 100% same as what color I have in mind at first but overall I'm quite satisfies with the outcome, there's so many unexpected factors. 

Observation

Throughout this assignment, I found out why the lecturer always let us make the decision on what we wanted to do, as you can see, we need to spend weeks just to do the same thing, if we don't choose the idea we like, we might not able to make it to the end, as it might be frustrating. For this theme (rock band theme) is actually really really new to me, although the poster didn't come out really well, I am still happy that I tried something new and it's definitely out of my comfort zone, at least I learned something from that, like when I do researches for the band, the 80s poster design, the rock band style design and so on. 

Findings

It's important to love what you do, as it's what drives us moving forward to the end. 

---

FURTHER READING

Week 8 - 13 (19/10/2022 - 23/11/2022): <The Elements of Typographic Style - Robert Bringhurst>

fig 77: book cover

Typography that has anything to say strives towards a type of statuesque transparency. Another traditional aim of durability is to be clearly superior to fashion rather than to be immune to change. Typography is a visual language that connects timeless and temporal concepts when done well. Legibility is usually one of the guiding principles of long-lasting typography, but other criteria go beyond legibility, such as some earned or unearned interest that gives the page life. Serenity, liveliness, laughter, grace, and joy are just a few of the many names and shapes it takes. Typographic style, in this broad and intelligent sense of the word, does not refer to any particular style, whether it be Neoclassical or Baroque, mine or yours, or any other. Instead, it refers to the ability to move freely through the entire field of typography and to perform at every turn in a way that is graceful and vital rather than banal. The interpretation and communication of the text is the sole responsibility of the typographer. Its tempo, logical organization, tone, and physical size all affect the typographic forms that can be used to express it. The typographer serves the text in a similar capacity to a theatrical director or musician serves a score. Overall, the author describes 'typography' in a really magical and beautiful way in the front part, which it's what impressed me. 

The typesetting tool works like a loom, whether it's a computer or a composition stick. Like a scribe, the typeface designer strives to weave the words as evenly as possible. A dynamic, even texture is intended to be created by good letterforms, yet this fabric can be torn apart by carelessly spaced letters, lines, and sentences. The horizontal spacing is measured in ems, which is a sliding unit, as opposed to the usual picas and points used to measure type. The distance corresponding to the font size is one em. An em is 6 points in 6-point type, 12 points in 12-point type, and 60 points in 60-point type. A one-em space is therefore proportionally the same regardless of size. Typesetting machines generally divide the em into units, Ems of i8, 36 or 54 units, for example, are commonly found in the older machines. In newer devices, the em is generally a thousand units. Typographers are more likely to divide the em into simple fractions: half an em, a third of an em, and so on, knowing that the unit value of these fractions will vary from one machine to the next. Half an em is called an en.