Labels

Advanced Typography : Task 3 / Type Exploration and Application

16/05/2022 - 20/06/2022 (Week 08 - Week 13)
ALICIA TENG YI LING / 0345159 / BDCM
Advanced Typography
Task 03 /  Type Exploration and Application


LECTURES



INSTRUCTIONS

 
 

Task 3 / Type Exploration and Application

 Proposal

In these Google Slides, are my three proposed ideas for this task. I will say that I am leaning towards idea 1 pretty heavily because it sounds interesting and I am biased.


Fig 1.1 Task 3 proposal (28/05/2022)

Chosen Idea

So, I ended up going with Idea 01. Basically, in my future specialisation, I am studying Game Design and Game Development and I plan to create a cute pixel-based game. Based off of this, I want to explore typefaces and develop a font that is matches the aesthetic and vibe of it and will be copyright free.

Game Context: The main character, "Lily", is a rabbit that wakes up in a forest one day with no memories except remembering that she needs to find something. But what? This is her adventure into finding her treasure.

Inspirations

After week 10's feedback, I went looking for some inspiration on Pinterest. I looked for round, fluffy looking types (such as Fig 1.2) but I admired the clean, simplicity of Fig 1.1. I may try to implement that clean, minimalism in my typeface. I would like to explore using less PPI(Pixels Per Inch) which would result in larger pixels for the letterforms.


Fig 2.1 Inspiration #1 (28/05/2022)


Fig 2.2 Inspiration #2 (28/05/2022)


Fig 2.3 Inspiration #3 (28/05/2022)

Links:
https://www.pinterest.com/pin/28006828922959720/
https://www.pinterest.com/pin/58195020177060330/
https://www.pinterest.com/pin/109141990961388797/

Developments

I started out with digitizing the letters and trying to maintain a consistent width (with one side being more heavy for an 'interesting' look and rounded edges. So far, the letters "B", "V" and "Y" have been giving me a hard time or more like, I don't really like the way they look and I feel that they aren't very easy to read when isolated from other letters.


Fig 3.1 Draft 1 (12/06/2022)

Following this, I increased the width of the letterforms to have a 'cuter' look and to see what they look like together in a word. I just picked "GAME" as that is what I am creating this font for. I would say I'm pretty happy with how it's turning out so far.


Fig 3.2 Word Test (12/06/2022)

The outlines of the construction show the multitude of shapes I used to construct the letterforms. I wanted to try creating a more varied look with texture and many 'nooks and crannies' you could say. 

Fig 3.3 Letterform Outlines (12/06/2022)

Finally, I tried adding some white pixels to create a bouncy look and it would make the font very eye catching in my opinion. Plus, it's pretty cute.


Fig 3.4 Glossy Test (12/06/2022)

But in the end, I decided the gloss would be overkill and wanted to move forward with a more clean looking font that would suit my future game. The name of the game is "Lily" which is titled after the main character, a bunny. 

Following this, I further developed my punctuation marks after Mr. Vinod's feedback and referred to the Instagram post he suggested I read. It was really helpful and I managed to fix them nicely.


Fig 3.5 Updated Punctuation Marks (18/06/2022)

Then, I arranged them in artboards like this to double check consistency of the letterforms and numbers and also make sure all the punctuation forms are correctly sized.


Fig 3.6 Ensuring Consistency Check (18/06/2022)

Finally, I made all the letterforms more consistent in widths and heights then arranged them neatly like so.


Fig 3.7 Updated Type (18/06/2022)
I named it "Hoshi", which means star in Japanese.

Generating the Font in FontForge

This was a process of pain and suffering. It took me a few hours to figure out how to use it and my very helpful classmate, Sasilvia <3, provided this video which helped a lot.


Fig 4.1 FontForge Tutorial (19/06/2022)

It was a bit tedious and lengthy, but she explained everything very well and I eventually got it.



Fig 4.2 Setting Heights (18/06/2022)

Fig 4.3 Preparing letterforms in Illustrator (18/06/2022)


Fig 4.4 Inserted Letterforms (18/06/2022)


Fig 4.5 Kerning in Width Metrics (18/06/2022)


Fig 4.6 Generated Font (18/06/2022)

For the first step, I separated all the forms into individual artboards then exported them as SVG files. Following this, I created a new document, selected the heights and then inserted each one into their slots and aligned them. Next, was to kern them to my preference and check for any flaws. Finally, I generated the font and tested it.

Application

I decided to go with creating:
  • Game Poster
  • Poster Mockup
  • 'Screenshot' of Gameplay
  • Stickers (Game Merchandise)
  • Keychain (Game Merchandise)
  • Nintendo Game Disk Cover
  • Mockup of gameplay on a Nintendo Switch
I think these would reflect my chosen topic well and it would be good to illustrate future gameplay. This was one of the most fun and entertaining sections for me to do for this task.


Fig 5.1 "Lily" Game Poster (19/06/2022)


Fig 5.2 "Lily" Poster Mockup (19/06/2022)


Fig 5.3 'Screenshot' of Gameplay (19/06/2022)


Fig 5.4 Nintendo Game Disk Cover (19/06/2022)


Fig 5.5 Mockup Gameplay on Nintendo Switch 1
 (19/06/2022)


Fig 5.6 Mockup Gameplay on Nintendo Switch 2
 (19/06/2022)

References for Mockups:

After week 13 feedback, I updated my applications and their design. Additionally, I created a second poster design and I added in some new game merchandise (keychains and stickers).
For the figure 5.7, I used the typeface "Pokémon Pixel font" for the loading bar.


Fig 5.7 New Poster (26/06/2022)


Fig 5.8 Updated Poster (26/06/2022)


Fig 5.9 Updated Poster Mockup (26/06/2022)


Fig 5.10 Updated Nintendo Game Case (26/06/2022)


Fig 5.11 Updated Gameplay Screenshot (26/06/2022)


Fig 5.12 Updated Mockup Gameplay on Nintendo Switch 1 (26/06/2022)


Fig 5.13 Updated Mockup Gameplay on  Nintendo Switch 2(26/06/2022)


Fig 5.14 Game Keychains Merchandise (26/06/2022)


Fig 5.15 Game Stickers Merchandise (26/06/2022)


Mockup references:

Final Task 3 Type Exploration and Application Submission


Fig 6.1 "Hoshi" Final Type Design (19/06/2022) - JPEG


Application #1 (MAIN): POSTER TITLE and GAME COVER- "LILY"


Fig 6.2 "Lily "Game Poster 1 (26/06/2022) - PNG


Fig 6.3 "Lily" Game Poster 2 (26/06/2022) - PNG


Fig 6.4 Game Posters Mockup (26/06/2022) - PNG


Fig 6.5 Nintendo Game Disk Cover (26/06/2022) - PNG

Application #2: Game Dialogue and Gameplay


Fig 6.6 'Screenshot' of dialogue in Gameplay (26/06/2022) - PNG


Fig 6.7 Mockup Gameplay on Nintendo Switch 1 (26/06/2022) - PNG


Fig 6.8 Mockup Gameplay on Nintendo Switch 2 (26/06/2022) - PNG

Application #3:  Game Merchandise (Keychains and Stickers)


Fig 6.9 Game Merchandise: Keychains (26/06/2022) - PNG


Fig 6.10 Game Merchandise: Stickers (26/06/2022) - PNG


Fig 6.11 Final Task 3 Compilation (26/06/2022)
 - PDF

Access my font and all other images here: 


FEEDBACK

Week 10
General Feedback:
  • Be certain of your purpose for this project, whether it is solving a problem with a typeface or creating a new font for another purpose
Specific Feedback:
  • What is the difference between the font I'm going to create and the ones that already exist? 
  • Go with the pixel idea
  • There are many pixel fonts available, make sure that my option is distinctive (and suits my cute aesthetic)
  • Read up on "Arcade Game Typography" - The Art of Pixel Type by Toshi Omagari and Kiyonori Muroga
Week 11
  • Holiday - no class
Week 12 
General Feedback:
  • The typeface will not truly come to life until it is used in its applications.
Specific Feedback:
  • Work on the punctuation marks more.
  • Do not spend too much time focusing on the application of the font, rather spend that time on the font.
Week 13

General Feedback:
  • Don't forget to include the flat-forms of your applications to better showcase the type.

Specific Feedback:
  • Poster feels empty/undone something is missing. Try adding shadow to the title. 
  • Maybe change colour to a matching, complementing one or contrasting
  • Don't have to use my font for all the poster info
  • Try one more poster layout, the type does not feel treated well
  • for Nintendo game disk cover, lower the title and add more
  • change dialogue box outline to orange because it stands out too much
  • For Nintendo skin 1, add shadow as well.

REFLECTION

Experience
This task was by far one of the most fun assignments I've had to do. I greatly enjoyed formulating ideas for my game and developing the font. Pixel fonts have the ability to be so unique in the way they convey certain letters and numbers. To top it off, I was given the chance to work on and display the game I want to create in the future.

Observation
The kerning greatly affects how the final outlook of the typeface is, much more than I initially thought. Due the fact that the impact of the silhouettes changes vastly based on their spacing.

Findings
I found that typography is a lot more freeform than I thought. The structures and constructions of letterforms can be very strange and weird as long as it conveys what you are trying to do with it. As long as there is a consistency between the forms, it will look interesting and well-made.
 

FURTHER READING

Punctuation by Grilli Type - Lesson 29
This was recommended by Mr. Vinod for improving my punctuation marks.

Source: 
https://www.instagram.com/p/CRjdPtSjz5K/?utm_medium=copy_link&fbclid=IwAR2NJCA3M_QP3vHLG1BzZjJpRW12A6SyAdliqN9KKEPlQOeUBVxWQFLjpx4



Fig 1.1 Guide Cover


Fig 1.2 Comma Construction

The Art of Pixel Type - Toshi Omagari and Kiyonori Muroga

I was only able to view the information from screenshots of the book as I cannot afford it but nonetheless it was a really interesting read!

Pixel art construction, typeface design and video game history.
It's a curated collection with around 200 examples primarily from the 80s and 90s.


Fig 2.1 8x8 Monospaced

'Mono' means one and 'spaced' means spaced. It is one 8x8 tile per letter which can be pretty restrictive. But he manges to show the creative ways different designers manage to pull it off with a huge range of typefaces. 


Fig 2.2 Examples of Different Pixel Type

I also received some more info from this Youtube video.


Fig 2.3 Arcade Game Typography: The Art of Pixel Type | Overview


Fig 2.4 Book Chapters of what is covered

10/10 would recommend if you have access to it. It has great examples, presentation and commentary.

Source: https://www.slanted.de/arcade-game-typography/


Labels:

Comments

Post a Comment

Popular Posts