Labels

Advance Typography/Task 3 - Type Exploration & Application

19/10/2023 - 29/11/2023 / Week  8 - Week 14
Janice Marie Eng Chia Hui  / 0361521
Advance Typography / Bachelor of Design in Creative Media / Taylors University 
Task 3

Table of Content 

Lectures

All lectures can be viewed in Task 1/Exercises.

Instructions


Task 3

Proposal

First, Sir made us all write a proposal on the type of font we want to make. I went to Canva and made the proposal because Canve had nice templates. I made another proposal that focused on my chosen topic. 

I was going to expand on my Typography task 3 work, but this time I would make it influenced by the Y2K aesthetic. It would mainly focus on the cyber part of the aesthetic/style.
task 3 proposel by Janice Eng (1st one)
task 3 proposal by Janice Eng (2nd one)

Sketching/Idea Formation

Initially, I had wanted to make an octagonal font but after actually making one in Ai, I realised it looked bad so I scrapped that and decided to go for a square-shaped one.

Developing the font

Small Letters

I looked for some inspo from Pinterest and Google. My main inspo came from this page. I wanted the font to have that tech/futuristic vibe of Y2K but also that fun and imaginative feeling that was around then. 

As I was developing the font, I noticed some of the lines were really thin. It looked like the soldered part of the circuit board, with a round ball at the end. So I decided to make the thin lines look like the soldered part of the circuit board. I also made 2 corners of the font shaper than the other 2 by rounding the edges of the other 2 more. The shaper part was suppose to represent the tech stuff and the rounded parts were suppose to represent the fun bubly energy of the Y2K era. Not sure if it work or not though lol.

Figure 1.1 Tools used and visual steps of how I constructed the font

Figure 1.2 1st attempt at making the font (24/10/23)

I got some feedback from Sir about the first attempt. He said to make sure all the small gaps between the font were consistent. So I went back and made all of them the same. I ended up with a font with extremely thin white space in them. 

I had a hard time coming up with the letter 'v' a it had a curved stroke in it that was going diagonally down. I wanted to maintain the blocky box shape. So I started sketching some variations of v's out and finally settled on one v that looks half decent. 

Figure 1.3 v evolution (24/20/23)

I realised that the thin white space did not look good when the font was really small, so I went back and made all the white space slightly thicker. Why only slightly, because I got some feedback from my friends and they said 'make it medium'. So I did. 

Figure 1.4 Left (thin and thick) vs right (medium)

After making most of the small caps, I realised that my letter 'n' looked a bit too similar to an existing font, so I changed it to look different. I was also told by Sir that my y was a bit complicated. Since my y shared some similar characteristics with n, I changed the y too.

I also changed the tail of my g and y to make it look less complicated. 

Figure 1.4 Changes in 'n y g' (31/10/23)

Figure 1.5 After vs before for small caps (31/10/23)

Figure 1.6 Outline view of small letters(31/10/23)

Capital Letters

I then proceeded to the capital letters. They were fairly easier than the small caps. The capitals mainly had thick bold strokes, so they were very distinctive. As said before caps were pretty simple and straightforward to do, so this was done in a day. 

Figure 1.7 Evolution of capital letters (1/11/23)

However, I had a hard time with the letters Y, R and Q. I did not know how to incorporate some of the gaps into it. So I started sketching yet again. I ended up with a few variations before finally landing on one that I liked.

Figure 1.8 2 different variations of Y with the one on the left being chosen

For the letters R and Q, the problem I had with them was the curved parts and parts that jutted out. As my font was very blocky and I wanted to maintain that, I had to find a way to make it look curved but still fit into the blocky shape. In the end, I just decided to let those elements jut out a bit. 

Figure 1.9 Elements that I had a hard time translating into my font (1/11/23)

Other than that, assembling the font was similar to the small caps.

Numbers and punctuation 

For the numbers, the main problem I had was with the numbers 2 and 5. They both looked too similar to the lowercase s and z. So I started brainstorming ways to construct it. Eventually, I took the staggered elements of my letter v and put them into the numbers 2 and 5. Other than that, the construction of the number was quite simple. I particularly like how the number 4 came out.

Figure 1.10 Elements taken from the v (10/11/23)

Figure 1.11 Numbers Evolution(10/11/23)

The construction of punctuation was a bit hard for me. I initially did not know which punctuation to construct, so I went and stalked some of the senior's blogs. I finally decided to construct,./#<>?;'":@[]#~{}+-_)(*^%!. I had a hard time constructing (), {} and []. As my font is more block-shaped and squarish, I did not know how to make the brackets curved. The [] and () were also looking a bit too similar. Eventually, I came up with something passable. 

I also had 2 variations for the @. One looked more pixilated than the other and I initially came up with this first. However, it did not look similar to my font, so I changed it to more blocked-shaped ones.

Figure 1.12 Final {}[]() (11/11/23)

Figure 1.13 Initial @ vs final @ (11/11/23)

Figure 1.14 Evolution of numbers and punctuation (11/11/23)

Importing font to FontLab 7

I initially used fontforge to kern and export the font. However, fontforge sucks. I couldn't get anything to work. Following the tutorial that Sir gave did not help. The font did not stay on the baseline or was going out of the ascender. I had to transform them one by one in the glyph tab. After I manually transformed everything, I realised that Fontforge had messed up the font. They were melting now. I noticed this when I opened up the metric tab, and my font made me want to puke. So I lost my shit and took a day break.

I went back, downloaded FontLab 7 and tried my luck to see if I still could use the free trial period. Bless the lord(or whoever u believe in), I could use the free trial. I should have tried FontLab7 initially instead of FontForge. 

After downloading FontLab, I forgot how to import my font into font lab. So I went onto YT and found this video, which made it very easy for me to import the font into FontLab. After importing all the fonts, added the left and right bearings of 50 to each font. I then started kerning. 

Figure 2.1 Some kerning (12/11/23)

Font Presentation

Looking for inspiration 

I really did not know what to do for the font presentation. So I went to look at the examples that Sir gave. I also went to find some more font presentations that look close to the design direction I was heading into. 

Link to insp website:
After that, I decided to stop dwelling on it and get something down on the Ai board. I initially based it on the TVA from the show Loki. 

Figure 3.1 Initial font presentation (12/11/23)

I did not like how it looked, so I decided to redo it, but this time I would lean into the futuristic vibe more. I wanted to insert an image into the font presentation, so I took a sculpture by Hajime Sorayama, put it into Photoshop and edited it to my liking. 

Figure 3.2 Second try at font presentation (12/11/23)

In class during week 12, we were told that the font presentation would have to be a square. So I edited mine into a square artboard. Sir mentioned that the colours were very vibrant, so I went ahead and made it black and white to see what it would look like. 

I did not like it. I then decided to change it to blue and white, trying to limit the colour palate. I liked this one more, so I rolled with it.

Somewhere along the line, I stumbled upon the functions of Inner Glow and Outer Glow, which helped make the font have a glowy inside and glowy outline as seen in Fig 3.3. I genuinely do not know the functions of these effects but it works so I left it.


Figure 3.3 Front page of font presentation (19/11/23)

Figure 3.4 Process of new font presentation (19/11/23)

Font Application

Initially, for font application, I wanted to do a Y2K-inspired fashion show, or something related to this virtual musical artist called Hatsune Miku. However, before I could even start on the application, I was told by a friend that Sir said that a SIM card could be my application 0o0. He probably meant that as an example, but I decided to change my application to a robotics fest.

However, while creating some posters of the robotics fest, the end product all looked ugly lmao. I hated it, I wanted to burn it, I wanted to cry.

Figure 4.1 Failed attempts (19/11/23)

So I changed my application to the SIM card one lmao. I wanted to make it specifically about one brand and decided to pick Digi. Initially, I wanted to do Maxis, since they had a blue and green colour scheme, but their SIM card was Hotlink, which was red in colour. So I decided on Digi, which is the one I use lmao.

The 4 applications I decided to do are a SIM card, a banner, a keychain and a website.

1. SIM card

I based the SIM card design on a circuit board since my font was based on a circuit board. The wired would be all pointing towards the SIM card itself. I did a few adjustments to the font colour before deciding on on design.

Figure 4.2 SIM card design + References (20/11/23)

Figure 4.3 Font colour Before vs After (20/11/23)

Figure 4.4 Final SIM card font application (20/11/23)

2. Banner

I decided to do a banner for Digi because I vividly remember this one Digi banner I saw at a Digi store when I was out. So a banner it was. For the banner, I just took an existing banner information that Digi had, but I transformed it into a portrait banner. Image credit for the girl in banner (link).

Figure 4.5 References + plus design (21/11/23)

Figure 4.6 Reference 

I also decided to change the Jom 5G familiku logo?? into one with my font. 

Figure 4.7 Original logo(top) vs Logo with my font(bottom)

Figure 4.8 Final Design for Banner (22/11/23)

3. Keychain

I then decided to make a keychain for my next application. I decided to go with the circuit design again because I'm basic like that. I initially want to go with the design that the old keychain had which says Digi world widest coverage and always with you. But I decided to update it to Digi's current tagline which is 'Let's Inspire' (well DigiCelcome tagline since they merged).


Figure 4.10 Keychain Mockup (22/11/23)



Figure 4.11 Keychain with logo vs without logo (23/11/23)

I did not know if I liked the design with a logo more or the one with no logo. I decided to go for the one with no logo in the end.

4. Webpage

I decided to put my font in one of Digi's web page sections. The section of the webpage was about family plans. I discovered the use of drop shadow to make the column look more like a website. 

Figure 4.12 Final design(top) and reference (bottom) (22/11/23)

After designing and putting all the designs in the mock-up, I started thinking how to display them. I initially put them in front of a bright purple bg, which Sir hated (understandably). He recommended I use a grey background or go look on Pentagram for inspo. After scrolling through Pentagram, I came up with this.

I used a grey bg for the SIM card and drew on some shadows and added gausian blur effect to them to make them look like shadows. For the banner, I used a grey bg too, but added some white to make it look like a spotlight was shining on the banner. For the keychain, I duplicated it twice and made them line up side-by-side. Finally, the webpage replication, I used a yellow gradient bg because I felt that using grey for this particular application would make it dull.

Figure 4.13 Adding bg plus shadows (23/11/23)

Final Design

Download the font here: Circuit Teaser
Accompanying font used in font presentation: Nova Square
Accompanying font used in font application: Futura 

Figure 5.1 Font Presentation 1 (Title page)(23/11/23)

Figure 5.2 Font Presentation 2 (uppercase & lowercases)(23/11/23)

Figure 5.3 Font presentation 3(numbers and punctuation) (23/11/23)

Figure 5.4 Font presentation 4 (Different font size) (23/11/23)

Figure 5.5 Font presentation 5/circuit board(23/11/23)

Figure 5.6 Font Presentation 6/Hajime Sorayama (23/11/23)

Figure 5.7 Font Presentation 7 /Y2K bug error (23/11/23)

Figure 5.8 Font Application 1/SIM card (23/11/23)

Figure 5.9 Font Application 2/Banner (23/11/23)

Figure 5.10 Font Application 3/Keychain (23/11/23)

Figure 5.11 Font Application 4/Webpage replication (23/11/23)

Figure 5.12 Compilation of task 3 (pdf) (29/11/23)

Font Tester


Top↑

Feedback

Week 8
General Feedback: Try not to generalize your topic/be very specific with your topic 
Specific Feedback: Idea 2 seems like the best idea

Week 9
General Feedback: Know your x-height, baseline, ascender, and descender / use an artboard of 1000pt in height
Specific Feedback: Try to make sure that the gap in your font design is consistent/use a grid/letter y is a bit too complicated

Week 10
General Feedback: Develop your uppercase and lowercase letters side by side for now
Specific Feedback: Go and ask for opinions from your classmates to see which variant is nicer/develop the uppercase and lowercase side-by-side

Week 11
General Feedback: Print out your font to see if it works
Specific Feedback: Put the font in the font lab

Week 12
General Feedback: Use the files provided in teams to kern your letters
Specific Feedback: Colours used in the font presentation may be a bit too bright

Week 13
General Feedback: Use 1024 px x 1024 px in your presentation and make sure your artboard for the application does not exceed 1024 px in width and height
Specific Feedback: When you use other fonts in your application, if your font is already a display font avoid using other display fonts so that your font is not overshadowed/work on the background colour for your font application, look at Pentagram for inspo

Reflection 

Experience 
Due to the fact that my font is quite simple, constructing the font was a fairly simple process. Whether I am satisfied with my work or not is another story. The part I struggled with the most was the font application. I initially had no direction or goal with it so I was quite lost on what to do, but after finding out the direction I wanted to dive into, the application was a simple process. What I would like to have done was to incorporate some more of that Y2K vibe into my application.

Observation 
From this task, I was taught again to be mindful of the consistency in my font, such as the small spaces in my font that make up the circuit design. Ensuring that it was all the same width allowed the font to look more cohesive. I also observed that you can form interesting shapes with the negative space of your type, creating some interesting presentations. When kerning, I observed that because of the way my J, y, g and L are built, they required more time and dedication due to the large spaces between them and the neighbouring font.

Findings
A lot of work has gone into the creation of a font. I found out that when designing anything, not just a font, it is important to have a topic or subject in mind that you wish to portray or represent with your designs. This helped guide the design process and make life a tad bit easier for the designer. On the other hand, due to the time limit and other assignments, I found that I was not able to really do what I wanted with the font and the application. I also discovered that FontForge is hard to use and has a very limited amount of YouTube tutorials that all give the same information. 

Further Reading

1. Vignelli Cannon on Design 

Figure 6.1 Vignelli Cannon 

Visual Power
This section talks about how the use of scale, bold typeface and manipulating texture can help provide a more powerful expression in graphic design. It also emphasizes the importance of having a purpose in achieving a unique presence. Mentioned also is how visual strength should not be confused with visual impact, which mainly consists of large or eye-catching elements that might not always be visually appealing. It ends this section by saying that good visual power is needed for an effective design.

Timelessness
This section talks about how having a design that withstands the movement of time is what a designer should strive to achieve. The author mentions that the use of primary shapes and colours is well-liked due to their formal values which are timeless. The author also mentions not to follow trends. This section ends by saying that people like designs that are clear and simple, which makes them simple.


This article talks about the evolution of Y2K in their fashion field and mentions notable figures, both from the fashion and design fields. One notable mention is Hajime Saroyama, which I referenced in my presentation. The paper also goes on to talk about the different branches of Y2K fashion.

Comments

Post a Comment