Advanced Typography - Task 3: Type Exploration and Application

18/10/2021 - 15/11/2021 / Week 9 - Week 13

Lui Hsiao Hui (Tressa) / 0342003
Advanced Typography / Bachelor of Design (Hons) in Creative Media

Task 3: Type Exploration and Application

LECTURES

All lectures 1 to 5 completed in Task 1 - Exercise 1 & 2

INSTRUCTIONS

Task 3: Type Exploration and Application

For Task 3, we get to dictate our own project. We are to either design a typeface to solve a problem in the area of our interest (Graphic Design, UI/UX, Animation, Entertainment Design or any other) or explore the use of typeface in our area of interest. The end outcome would be the designed typeface in its application - any kind of format related to the issue being solved or explored: animation, 3D, print, ambient, projection, movie title or game title, use of different material etc.

1. Research, ideation and sketches

Proposal of 3 ideas

Fig. 1.1 Proposal, Week 10 (24/10/2021)

We were instructed to come up with 3 ideas for our project based on our interests. My interests are Entertainment Design, Animation, Fashion Design and Photography.

Explanation of chosen idea

Fig. 1.2 Chosen idea, Week 10 (24/10/2021)

Fig. 1.3 "Nightmare" draft animatic, Week 9 (23/10/2021)

“Nightmare” is an animatic I’m working on and plan to have it completed in my upcoming semester break. The artwork was created with Photoshop and animated/edited in After Effects.

The animatic follows the character “Dream” trapped in his nightmare where he is hunted by his opposite self called “Nightmare” (the opposite of Dream is Nightmare obviously). This story was inspired by Dream SMP - a Minecraft server (“SMP” stands for survival multiplayer), where content creators do roleplays with their characters. It got popular and people started making their own animatics (own adaptations) of the story, and I was inspired by those creations aside from the story.

I’ve had this idea of developing a typeface specifically for this since the start of the semester because during my last semester break I created an animatic of a character’s storyline from Dream SMP (https://www.youtube.com/watch?v=1ykF01th1-g). I had planned on making more in my upcoming break so I thought why not make it a part of my university project. I needed a title design anyway and I never made one for my first animatic.

Fig. 1.4 Typography in Minecraft

Minecraft (video game): https://www.minecraft.net/en-us. Fig. 1.4 shows the font designs in the game and they’re following the theme of pixel fonts to suit the block game element. Because the character is a Minecraft character, I thought it’d be cool to mash serifs and pixel fonts together as seen in my sketches.

Movie title research

I observed a few title designs of my favourite films/tv series. They are Fantastic Beasts: The Crimes of Grindelwald, Maleficent and Loki. *Major spoilers for the show Loki*

Fig. 1.5 Fantastic Beasts: The Crimes of Grindelwald movie title

Additional input: It makes sense to have Credence's obscurial form integrated into the movie title because Grindelwald is after Credence in the film, and he's been highlighted as an important character since the first Fantastic Beasts film. Here is the link to a video on Credence's obscurial form because the still doesn't show the texture and visual effect well. https://www.youtube.com/watch?v=KzLnF4pXYF4

Fig. 1.6 Maleficent movie title

Similar to the title of the Crimes of Grindelwald, there are elements of the main character stylised into the type.

Fig. 1.7 Loki logo representing the Loki variants in the Void

From left to right: Boastful Loki, Classic Loki, Kid Loki, Alligator Loki

While searching for the Loki title image I found this Reddit post about the four different fonts representing the four Loki variants stuck in the Void.

https://www.reddit.com/r/marvelstudios/comments/od0w16/something_i_noticed_in_the_loki_logo/

In the comments section of the Reddit post, some people don't agree with the theory/observation. But I think it's a possibility and it seems to match. The nature of the fonts portrays the look and age of the variants (with the exception of the alligator). The L is bold, futuristic with a rough texture and it matches Boastful Loki, especially his masculine build. The blackletter O matches very well with Classic Loki. Blackletter gives off a vintage, classic and dramatic look, it was also used throughout the 12th-17th century which could allude to the word 'classic'. Whereas the K looks modern and has that element of funkiness which could point towards Kid Loki. Lastly, the blackletter I is the only green font, which only makes sense to match it to the alligator. This type expression is similar to Maleficent's movie title, with elements of the character stylised into the type.

Fig. 1.8 Loki title sequence

The constant changing of mismatched fonts represents:

- Trickster, mischief

- Shapeshifting, illusion

- Loki variants from other timelines

- Travelling to different time periods (like how some fonts dictate a time period and are popular during a specific time period)

The fact that the letters are misaligned and have different brightness also adds to portraying Loki's mischief and unpredictability.

After observing these movie titles, another thing I noticed is that the colour of the title matches the colour palette of the movie or the character. Texture plays a role as well in representing characters or the setting or vibe of the story. Furthermore, there are always symbols or elements from the story/movie incorporated into the title design, be it colour, similar silhouettes/shapes or literal representations of the significant objects in the film. An example would be the Elder Wand in the Crimes of Grindelwald title design.

Sketches

Fig. 1.9 Type design sketches for "Nightmare", Week 10 (24-30/10/2021)

#1 - #4: Serif x pixel

#5: Blackletter x pixel (with a little influence of serif)

For this task, I will be focusing on capital letters, numbers and basic punctuations.

The idea I had for the typeface is for the serifs to represent the danger of the character “Nightmare”. The most important thing when designing a typeface for this animatic is type expression. As observed from the movie title designs above, type design for titles must have significant elements from the story or characters. I originally sketched out serif x pixel font designs (#1 - #4), but then I also tried out blackletter-inspired designs (#5) and really liked it. I thought of blackletter because the character "Nightmare" is considered a 'god' in the story, and I think blackletter has this dramatic and expensive look that suits the representation of a god. The nature of blackletter is more of a bolder font, but I didn't really want that for my design because thinner widths suited the character better, so I only incorporated the slanted ends into my sketches. My intention of using mixed font types is to symbolise both alter egos in this animatic - “Dream” (pixel) and “Nightmare” (serif/blackletter).

Fig. 1.10 Type references - "Minecraftia" and "Old English Text MT"

Fig. 1.11 Symbols in the type design representing the character

Besides that, there is a pixel smile hidden in the design of H. It represents the smile mask of the character “Dream”. Within the storyline of Dream SMP, the smile is a significant symbol so it would be important to have it in the title design.

Fig. 1.12 Rough idea of display title, Week 9 (23/10/2021)

Substitute/placeholder font: Laterlocks Demo Regular

Fig. 1.12 is my rough idea of how I want the title to be displayed. I also did find a few movie title examples with similar placements.

2. Digitisation and exploration

Fig. 2.1 First digitisations, Week 10 (31/10/2021)

From my sketches, I chose the 2 designs I liked and digitised the letters in the word "Nightmare" first. I purposely chose 2 sketches - serif x pixel, and blackletter x pixel. This was to see how different the design looks when digitised because based on experience designs can look better in the sketch than digitised, so I wanted to make sure that I digitised 2 designs for a comparison. A few changes were made which are the placement of the blocks (pixels) and extending the height of the letters because I wanted it to look more daunting and dangerous.

Fig. 2.2 The mess, the struggles, sleep?, Week 11 (3/11/2021)

I always present my work neatly so the mess behind the progression is rarely seen. Just thought I'd show that I don't come up with solutions that easily or quickly when digitising. In this screenshot, there are many renditions of the W because I didn't want it to be wider than the rest of the letters, it looked out of place.

Fig. 2.3 Design progression, Week 11 (6/11/2021)

Fig. 2.3 shows the progression of the letters that took a while to design because of the nature of the type. I found that balance took a while to achieve with some letters because the font style is a mixture of pixel, blackletter and serif, so there's bound to be some letters that have more pixel characteristics compared to others. The hardest letters to do were the ones with diagonal lines such as the V, W, X, Y, Z.

Fig. 2.4 Blackletter styled alternates, Week 11 (6/11/2021)

After digitising the first set of alphabets I realised that I wanted to make the blackletter element more consistent and obvious. So I made alternatives of the letters - A E F J L whereby they have the blackletter slant at the end and top.

Fig. 2.5 Week 11 progress, Week 11 (6/11/2021)

I arranged the letters to form some words that are significant in the story/fandom. This was when I realised that some words look better with the blackletter slant, especially the word "revived".

Fig. 2.6 Guidelines and modular grids, Week 11 (6/11/2021)

Measurements (from baseline)

Capital height: 650 px

Median / x-height: 500 px

Measurements of final font

Small squares: 25 px

Bar width: 50 px

Stroke width: 10 px

Dots of the symbols: 60 px

Fig. 2.7 Change in symbol dot size, Week 12 (8/11/2021)

Left (improved): 60 px; Right (original): 50 px

In week 12, Mr. Vinod mentioned changing the dot size of the comma, full stop, quotes etc. This is because in type design they are usually slightly larger so when seen from far they don't appear too small. After changing it from 50 px to 60 px, I realised how much of a difference it makes and it looks way better.

3. Generating the font in Font Forge

The rage part.

Fig. 3.1 Issues in FontForge, Week 12 (11/11/2021)

The issues I encountered were the sizing of the glyphs, not being aligned to baseline (as seen in Fig. 3.1). The first method I tried was redoing the guideline placement in a 1000 px square AI file. Wasted my time, aged 20 years, never again. This didn't solve anything as the imported SVG file still loaded in with the same issues.

Fig. 3.2 FontForge tutorial by Michael Harmon

I searched for tutorials on FontForge with the goal of fixing the scaling issue. However, this tutorial didn't cover scaling options because when imported, the glyph was already perfectly aligned to the baseline and it was the method I just tried.

During class, a classmate had the same problem and was advised to just use the scaling option. However, it's so tedious and there's a lot of inaccuracies which was why I really wanted to avoid this method. But at this point out of spite, I spent 3 hours manually scaling the sizes of the symbols. I discovered that the scaling option works very weirdly, the only thing I understood was that numbers > 100 scaled up the glyph, while < 100 decreases the size.

Fig. 3.3 Comparison of the tutorial's letter placement in the boxes and mine, Week 12 (11/11/2021)

After fixing the scaling with a terrible method, I went back to the tutorial video many times to see if I missed anything and finally, I observed that his letters did not fit the entire box like mine did, so then I figured maybe it's the import settings.

Fig. 3.4 Uncheck scale to fit, Week 12 (12/11/2021)

I started over and this time I unchecked the scale to fit in the import settings. This finally solved the issue but at this point, it was 8 hours gone and I had restarted so it took another 6 hours to complete.

Fig. 3.5 Before and after unchecked scale to fit, Week 12 (11-12/11/2021)

After solving the issue, I needed to add in the alternate glyphs. However, I couldn't find a tutorial on it, the ones I found were for ligatures instead. I added in my alternate letters using this method from this tutorial: https://www.youtube.com/watch?v=YQD3ii2Ie5M&t=259s. So in order to get the alternate letters and symbols: A E F J L O V W ' " they have to be typed AA EA FA JA LA OA VA WA Q1 Q2.

Fig. 3.6 Kerning through font into, Week 12 (12/11/2021)

When doing this I realised that it would take forever to finish and I wouldn't have enough time to complete my application and other modules' work which was due right before Task 3. I had to sacrifice doing the individual kerning. So I decided to focus on kerning the letters for the words I'll be using (Fig. 3.7 below).

Fig. 3.7 Kerning through metrics, Week 12 (12/11/2021)

Link to font file: https://drive.google.com/file/d/1Mq0gibF2CoB-KM4jM236-dDyMnEVHSMJ/view?usp=sharing

4. Application

Fig. 4.1 Mellohi - test type animation, Week 12 (7/11/2021)

I did a test type animation in After Effects to try out an idea I had. I wanted to make the letters look like they were breaking like the pixels and parts of the type get shifted. From this test, I realised that I have to make it more obvious and break apart the characteristics of the type more. After this test, I moved back to my "Nightmare" animatic to create the final type animation.

Application #1 (Main): Movie/animatic title - "Nightmare"

Fig. 4.2 and 4.3 Editing and animating in After Effects, Week 12 (12/11/2021)

I first separated the pixels/parts of the font into layers in Illustrator, imported the file into After Effects, then added keyframes to animate them coming together to form the font.

Fig. 4.4 Final animatic title display #1 "Nightmare", Week 12 (12/11/2021)

The final title colour matches the character's signature green colour. Caption font: Minecraftia

Fig. 4.5 Final animatic title display #2 "Nightmare", Week 12 (12/11/2021)

Alternate version with the character.

Fig. 4.6 "Nightmare" - final teaser animatic, Week 12 (12/11/2021)

Music: https://www.youtube.com/watch?v=LKSfLGtfrBA

Original song: Trapped in My Nightmares by WEARETHEGOOD https://www.youtube.com/watch?v=ZSpT80Kprd8

Application #2: Movie/animatic title

"Lesson 94" https://www.youtube.com/watch?v=1ykF01th1-g

I wanted to remake my "Lesson 94" animatic with this font however because of time constraints, stills would have to do. This animatic also has the same character(s) in it.

Caption fonts: Minecraftia and Minecraft Enchantment (game fonts).

All artwork was drawn by me in Photoshop.

Fig. 4.7 "Lesson 27" - animatic still, Week 13 (15/11/2021)

In week 13, Mr. Vinod mentioned to showcase more of the font in the application. So I did that with the lessons mentioned in the story. Here I used the alternate font style (blackletter versions).

Fig. 4.8 "Lesson 53" - animatic still, Week 12 (13/11/2021)

Fig. 4.9 "Lesson 94" - animatic still, Week 12 (13/11/2021)

Application #3: Movie/animatic title and character poster

"REVIVED" is another Dream SMP character's story. This font suits him and could also act as the font of the entire story of Dream SMP. The following was also inspired by Derivakat's song (https://www.youtube.com/watch?v=lCpszkhqV-o) of this character's arc.

Body text font: VT323

All artwork was drawn by me in Photoshop.

Fig. 4.10 "REVIVED" - poster, Week 12 (13/11/2021)

Fig. 4.11 "REVIVED" - animatic title, Week 12 (13/11/2021)

Fig. 4.12 "REVIVED" - animatic still, Week 13 (15/11/2021)

Fig. 4.13 "REVIVED" - lyric poster, Week 13 (15/11/2021)

Fig. 4.14 "Vilbur" - character showcase or album art cover, Week 13 (15/11/2021)

Made the smiley face symbol with the colon and bracket. Somehow I think I enjoy application #3 more, but maybe because it's my favourite colour and it looks loud.

Final Task 3: Type Exploration and Application

Link to font file: https://drive.google.com/file/d/1Mq0gibF2CoB-KM4jM236-dDyMnEVHSMJ/view?usp=sharing

Fig. 5.1 "Nightmare" - final type design, Week 12 (12/11/2021)

Fig. 5.2 "Nightmare" - final type display poster, Week 12 (13/11/2021)

Application #1 (Main): Movie/animatic title - "Nightmare"

Fig. 5.3 "Nightmare" - final animatic title display #1, Week 12 (13/11/2021)

Fig. 5.4 "Nightmare" - final animatic title display #2, Week 12 (13/11/2021)

Fig. 5.5 "Nightmare" - final teaser animatic, Week 12 (12/11/2021)

Application #2: Movie/animatic title - "Lesson 94"

Original animatic: https://www.youtube.com/watch?v=1ykF01th1-g

Fig. 5.6 "Lesson 27" - animatic still, Week 13 (15/11/2021)

Fig. 5.7 "Lesson 53" - animatic still, Week 12 (13/11/2021)

Fig. 5.8 "Lesson 94" - animatic still, Week 12 (13/11/2021)

Application #3: Movie/animatic title and character poster

Fig. 5.9 "REVIVED" - poster, Week 12 (13/11/2021)

Fig. 5.10 "REVIVED" - animatic title, Week 12 (13/11/2021)

Fig. 5.11 "REVIVED" - animatic still, Week 12 (13/11/2021)

Fig. 5.12 "REVIVED" - lyric poster, Week 13 (15/11/2021)

Fig. 5.13 "Vilbur" - character showcase or album art cover, Week 13 (15/11/2021)

Fig. 5.14 Final Task 3: Type Exploration and Application - PDF, Week 13 (14/11/2021)

Hours spent for Task 3: 58 hours

FEEDBACK

Week 10

Specific feedback: Go ahead with the interest in doing idea #1. The sketches are interesting because they are a mixture of pixel and serif font.

Week 11

Specific feedback: The middle rendition has a stronger impact compared to the top (thinner strokes). Search for film/animations collaterals and see what you can create/learn from these for additional collaterals besides presenting the type with the animatic.

Week 12

Specific feedback: Make the punctuation dots slightly wider than the width of the bars. Punctuation is often bigger in size to avoid them looking small when zoomed out. Change the tail of the comma to the quotation mark version because that looks more obvious.

Week 13

Specific feedback: Showcase more of the font in the application.

REFLECTION

Experience

I really liked this task because I got to dictate my own project. I'm satisfied that I got to design something I liked and incorporate it into my art. The outcome stayed true to my vision. This task was very beneficial because I'll be using this new type design in my future works. I also never thought that I would be using the art I did during last semester break to be used for a university project. The toughest part of this task was the generation of the font in FontForge and racing against time on the last few days before the due. We had Design Research Methodology (quite a heavy module) due right before Task 3, so many sacrifices had to be made such as individual kerning and sleep. I never expected to struggle with time because I had always managed my work well when it comes to Typography/Advanced Typography. I'm also a bit bummed that I didn't get to implement the font into my "Lesson 94" animatic because of the time constraints.

Observations

With this task, I was reminded to observe that punctuations have varying sizes compared to the letters. I also realised that they did look better when their dots were slightly larger than the original size/width of the letters. Besides, I observed movie title designs and learned that the design principles of colour and texture were implemented in the type. Along with elements of the characters or significant objects incorporated into the type design. Furthermore, these titles are animated effectively to enhance the type design and type expression as seen with Loki's title card animation.

Findings

I found that pixel fonts are actually not that easy to make. It somehow feels like a puzzle when I rearrange the square shapes to see which arrangement looks better. In a sense it is fun, yet also time-consuming and it gets tiring if a solution isn't formed after many arrangements. They're not easy to perfect because it is easy to create imbalance, especially with the nature of my font design being a mixture of pixel and serif with thin strokes. Besides, I found that FontForge is a pain. I think it's because I'm new to using it and that the settings and tools were never really covered. Relying on YouTube tutorials also took too long because of trying to search for the right one. At least I know now what not to do in FontForge.

Lui Hsiao Hui (Tressa) 0342003

Search This Blog