Advanced Typography - Final Project

Posted by Jasmine Teoh June 18, 2019

Advanced Typography - Final Project

4/6/19 - 2/7/19 (Week 10 to Week 14)

Jasmine Teoh Lee Suan (0331993)

Advanced Typography
Final Project

Instructions:

Module Information Booklet:

Lecture Notes:

Week 10 (4/6/19)
No lectures because it was Raya Hols this week.

Week 11 (11/6/19)

Here are the lecture slides that my friends made and presented on for this week:

Typography in different mediums

1. Print type - 300dpi - CMYK
Web/Screen Type - 72dpi - RGB
Different weights for print and screen

2. Kinetic Typography

Motion - moving
Fluid - into non typographic form
More appealing, grabs emotion, engaging

3. Patterns

Create and destroy
Enter / Exit
Morphing
Inventive Metaphors
Arc/Potion Motion
Storytelling

4. Some type in different mediums:

Sunbeam type
Hair Typography
Optic Typography
My Garden by Petra
Fear by Leo Burnett
Moss typography

Here are the lecture slides that my friends made and presented on for this week:

Typography Perception and Organization

1. Legibility, readability, overall aesthetic

2. Form and Content:

The way a piece of art is presented
Content - a work's subject matter, significance and style, meaning behind artwork (context)

3. Gestalt Psychology

Proximity
Similarity
Closure

4. Creating Visual Hierarchy

Tools:
Size, colour, contrast, arrangement
Keywords that you should remember and use for your work

Week 12 (17/6/19)
No lectures this week. We carried on with our final project progress.

Week 13 (25/6/19)
No lectures this week. We carried on with our final project progress.

Final Project:

Week 10 (3/6/19)

I started thinking of my possible ideas for my final project during the Raya holidays. These are all the really initial ideas that I had.

I looked all around me for ideas or possible problems to solve, and came across 4 different ideas:

1. Fonts on packaging (like medicine or vitamin bottles) are too small and too hard for the older generation to read, how can that be solved?

2. Kids don’t like taking baths - attract them to bathe by creating soaps shaped in the form of alphabets - can remember and learn the alphabet while bathing too

3. Most kids (and some adults) hate eating their veggies - make veggie cutter moulds of the alphabet and use them to cut veggies like carrots, cucumber, tomatoes and potatoes, or even fruits so that the slices will attract them and get them to eat their veggies while learning the alphabet in the meanwhile

4. The pasta in ABC soup - too small for kids to want to learn with it - they just chomp it all down - make it bigger and more memorable for the children - maybe the size of each letter can be the same size as macaroni?

Week 11 (10/6/19)

My four ideas got rejected after consultation because of these reasons:

1. The first idea is too hard to execute, given the time and restraints, it's an idea but it won't be easy to achieve, it's quite complicated

2.It might take too long for a soap bar to be used, so the child will take ages to learn the alphabet.

3. Once you cut the vegetables with the shape cutter, what will you do about the remnants?

4. There's a reason why the letters are that small. So that it's easier to chew on them.

The second to fourth idea are all quite similar, basically it's teaching children the alphabet, but they all have their loops and flaws, the solutions aren't 100% guaranteed to solve the problem. My lecturer asked me what my specialization I'll be taking is, and said to do something in that direction, like animating the text.

Week 12 (17/6/19)

I proposed a new idea this week, which was about creating an animated video on teaching children how to write the alphabet in the correct stroke order. Here's the research I did for this idea:

Here are the important details to my research:

Problem:
Importance of stroke order in Roman alphabet is not highlighted as much as it should be.
Children learn how to write when they're around the age of 4-6. There's a standard stroke order for Roman alphabets but it is not important in the eyes of most people. In actuality, stroke order for Roman alphabets are generally from top to bottom, left to right. Following this rule enables us to write much faster and with less hand strain, it enables us to write more efficiently. It also helps with writing cursive and penmanship.

Idea / Solution for the problem:
Create an animated typeface to teach children how to write the alphabet. Typeface animation should be interesting, teaches the stroke order of the Roman alphabet, leaves a good impression towards the children.

Benefits:

teach children how to write in an efficient way
may be able to save money on workbooks, printing, save trees
may help parents who cannot afford kindergarten education
may help lots of orphanages who want to teach children how to write the alphabet but can't afford to buy workbooks
promotes correct stroke order to children so that they will have the habit from a young age

Methods:
Animated Video (decided to do this method in the end)
OR
Simple website (the child can replay the animation by the click of a button)

Target Audience:
Children aged 4-6, at the age of going to kindergarten.

Potential threats to solution:

Some kids may just watch the video, need guidance from parents.
Harms the eyes of young children (but these days even 3 year olds have their own iPads to play with so might as well make use of technology)

Has anything like this been done before?
Yes it has, but the videos created were really lengthy and not engaging.
https://www.youtube.com/watch?v=Kt0nlWkUBJw
https://www.youtube.com/watch?v=Sw2KZki-eaA

Possible execution of solution:

Sketches of typeface design
Plan out animation
Create animated GIFs of each letter
Add the GIFs into a website

I started out on the basic idea of the typeface with some sketches. I showed them to my lecturers.

Figure 1.1 Sketches of Final Idea

I started working on the typeface after my idea got approved and after consulting with the lecturers about it. Here's the process of my refinement stage.

First, I referenced children's handwriting and found a crayon brush for Adobe Illustrator, modified the settings so that it would come out the way I wanted it to. I also referenced from existing sans serif typefaces like Gill Sans STD and Future STD while creating my typeface.

Figure 1.2 Actual Children's Handwriting Reference

Figure 1.3 Existing Handwriting Typeface Reference

Here's the very crude first step into my journey of creating my typeface:

Figure 2.1 Typeface Creation

I added a bit of colour here just to test out what it would look like later on.

Figure 2.2 Typeface Creation + Colour Test

Figure 2.3 Screenshot of Typeface Creation on AI (Referencing Gill Sans)

Continued refining on my letters.

Figure 2.4 Typeface Refinement Stage 1

Figure 2.5 Screenshot of Typeface Refinement on AI (Referencing Gill Sans)

Figure 2.6 Screenshot of Typeface Refinement on AI (with guides)

Figure 2.7 Screenshot of Typeface Refinement (Letter B)

Second Refinement:

Figure 2.8 Typeface Refinement Stage 2

Experimenting on the thickness of the strokes:

Figure 3.1 1pt Stroke Thickness

Figure 3.2 14pt Stroke Thickness

Figure 3.3 18pt Stroke Thickness

I added colour to my typeface, to make the typeface more feasible and interesting to children. These were my attempts at adding colour.

Figure 3.4 Typeface Design with Colour

Reference for the coloured typeface:

Figure 3.5 Colour Reference for Typeface Colour

After feedback, my lecturer said to stick to the lighter weight font that I previously designed, which was this one:

Figure 4.1 Final Typeface Weight

I added primary and secondary colours to these letters after feedback as well, and refined it even further (because my hands were itchy and I saw some minor flaws in the design above.

After adding colour:

Figure 4.2 Final Typeface with Colour

Refining and finalizing my typeface:

Figure 4.3 Final Typeface Refinement

Figure 4.4 Screenshot of Final Typeface with Colour Process

I added an exercise book line to experiment with the product of the typeface.

Figure 4.5 Final Typeface with Exercise Book Lines

Figure 4.6 Screenshot of Final Typeface with Exercise Book Lines

Figure 4.7 Screenshot of Final Typeface(Comparing Similarity)

I then added a paper texture to it as well.

Figure 4.8 Final Typeface with Exercise Book Lines + Paper Texture

Figure 4.9 Final Typeface with Exercise Book Lines + Paper Texture

I wanted to use this visual for my animated video but sadly it would take ages for me to animate the 26 letters into a background like this as it would require a totally different method from what I have learned to animate the typeface, considering the time restraints for this project in the meanwhile. Still, it looked nice.

Figure 5.1 Animated Video Visuals Attempt

I created a couple of words out of the typeface I made, for the purpose of the video.

Figure 5.2 Final Typeface tested with words

Figure 5.3 Screenshot of Final Typeface with guides

Figure 5.4 Screenshot of Typeface File

Here's the pdf that contains my finalized typeface:

I then started animating the strokes of the letters by following this tutorial on After Effects: https://www.youtube.com/watch?v=aLvmXuInbHo

I also had references for the stroke order:

Figure 6.1 References for Stroke Order

Here's my progress on the animation:

Figure 6.2 Screenshot of Process in After Effects

Figure 6.3 Screenshot of Process in After Effects

Figure 6.4 Screenshot of Process in After Effects

Figure 6.5 Screenshot of Process in After Effects

Week 13 (25/6/19)
I compiled all the animation of the letters into a video and added background music for the video, which was the alphabet song: https://www.youtube.com/watch?v=pbYD8qx8oVk

Here's my video:

Week 14 (2/7/19)

I received feedback to make changes of my video and my lecturers suggested to create a new video using the letters A to E without music, just the stroke sound effects and add in the exercise book lines and paper texture. I was also told not to use colours or just stick to one colour for the letters in the video.

After searching YouTube for tutorials, I found this video and learned how to use a different technique to mask my letters from here: https://www.youtube.com/watch?v=LSmDzScPsTY

Here are my test videos.

Test video #1: Red stroke with black trace

Test video #2: Black Stroke

Test video #3: Red Stroke

Test video #4: Red Stroke with Black Trace, Letters Side by Side

After showing the videos to my lecturer, I proceeded to work on my final video based on his feedback.

Here's some screenshots of my process of animating the letters:

1. Adjusting the time and arrangement of the letters:

Figure 7.1 Screenshot of Animating Letters

2. Masking the letters in their individual layers.

Figure 7.2 Screenshot of Masking Letters

3. Changing the brush size, hardness, and keyframing each stroke to an adequate speed.

Figure 7.3 Screenshot of Editing Stroke Effect Settings

4. I edited the stroke sounds on Adobe Audition so that there would be different stroke sounds to match different strokes. I also got the sound of the letters from https://soundoftext.com/ which lets us download Google Translate sounds.

Figure 7.4 Screenshot of Editing Stroke Sounds on Adobe Audition

Figure 7.5 Screenshot of Sound of Text Website

5. Syncing stroke sounds to animation (and re-watching it many times just to make sure the sound is synced with the strokes).

Figure 7.6 Screenshot of Editing Sound Files in Video

6. Colour-coding each letter's files, organizing composition.

Figure 7.7 Screenshot of Compilation of Layers

Final Animated Video on Teaching Children How to Write the Alphabet (A - E)

Here is my final video that I've uploaded onto my YouTube channel.

Figure 8.1 Screenshot of Video on YouTube

Just to reiterate on my final project idea, here's a summary of my problem and solution for this product.

Problem:
Importance of stroke order in Roman alphabet is not highlighted as much as it should be.
There's a standard stroke order for Roman alphabets but it is not important in the eyes of most people.

Idea / Solution for the problem:
Create an animated typeface to teach children how to write the alphabet. Typeface animation should be interesting, teaches the stroke order of the Roman alphabet, leaves a good impression towards the children.

Target Audience:
Children aged 4-6, at the age of going to kindergarten.

Benefits:

teach children how to write in an efficient way
may be able to save money on workbooks, printing, save trees
may help parents who cannot afford kindergarten education
may help lots of orphanages who want to teach children how to write the alphabet but can't afford to buy workbooks
promotes correct stroke order to children so that they will have the habit from a young age

I also included a description for my video on YouTube:

For my final project for the module Advanced Typography.

Did you know? Just like Chinese, Korean and Japanese characters, the Roman Alphabet has a stroke order as well. The stroke order usually follows the rules of top to bottom, left to right, to make writing and penmanship easier and more efficient. However, many people disregard the fact that the stroke order is important.

In this video, I aim to teach children how to write the Roman Alphabet using the correct stroke order through animating the strokes of each letter. By starting young, children would keep the habit of writing in the correct stroke order, maintaining it throughout their lives.

Typeface designed by me on Adobe Illustrator.
Lines created on Adobe Illustrator.
Animation created on Adobe After Effects.

Background paper texture credited to the owner.
Sound Credits to https://soundoftext.com/ (sound of letters) and https://freesound.org/ (stroke sounds).

That's all for Advanced Typography!

Feedback:

Week 10:
General Feedback: For the final project, the lecturers gave us some tips and guides on how to execute it: You can think about what you wanna do and find a problem for it or vice versa, maybe a new and interesting way? For example, when you cut a cake you can see the person's name there, as usually if you cut it the name disappears. Introduce the typeface that you're inventing and present it in a unique way. It can be interactive in a sense. They have 3D printer, laser cut for us to make use of. You also need to know the larger problem to solve OR enhance your existing solution. Have a rationale, what you wanna do, why you do it? EXPERIMENTAL BUT WITH A PURPOSE! They want you surprise them, they want you to think. They were not happy with someone who made a poster in a week, the exploration should result in something substantial. If the purpose is very cloudy, not strong enough its a no. It needs to be exciting, you need to be excited, they need to be excited. Figure something out!

Week 11:
Specific Feedback: Mr Vinod said that the first idea is too hard to execute, given the time and restraints, it's an idea but it won't be easy to achieve, it's quite complicated. As for the second idea, it might take too long for a soap bar to be used, so the child will take ages to learn the alphabet. The third idea is not practical, once you cut the vegetables with the shape cutter, what will you do about the remnants? The lecturers said that for the fourth idea there's a reason why the letters are that small. The second to fourth idea are all quite similar, basically it's teaching children the alphabet, but he said that they all have their loops and flaws, the solutions aren't 100% guaranteed to solve the problem. He asked me what my specialization I'll be taking is, and said to do something in that direction, like animating the text.

Week 12:
Specific Feedback: I proposed my final project idea to the lecturers once again, and they approved of the idea where I create an animated video to teach children how to write the alphabet in the correct stroke order. I also showed them my poster, tote bag and T-Shirt for Project 2 and they said that the work was well done and that they liked my tote bag a lot. After working and researching in class, I went back to show them my progress on my final project, they agreed that the typeface could look like it was handwritten instead of typed out digitally, and told me to research more and refine the typeface.

Online Feedback: I'm busy. Please Look into your own research. Figure it out. Look at your own work and criticize it. Ask your self, how is what I have done any different from what has been done so far?

Week 13:
Specific Feedback: Mr Vinod said that I should stick to the lighter weighted font that I worked on previously, instead of the heavier ones. He said that the development and refining was well done and that I could proceed to animate it. I showed the lecturers a sample of my animation and they commented that it was a bit too slow. Mr Vinod also suggested me to use primary and secondary colours for my letters only.

Week 14:
Specific Feedback: I received feedback to make changes of my video and my lecturers suggested to create a new video using the letters A to E without music ("get rid of the damn music, it's so slow it makes me want to sleep"), just the stroke sound effects and add in the exercise book lines and paper texture. I was also told not to use colours or just stick to one colour for the letters in the video.

Online Feedback: Better. Just sync the stroke-sounds with the stroke a little more (if you can). and see if you can have a few diff stroke sounds.

Reflections:

Experience:
Week 11: I felt scared because four of my ideas that I thought of got rejected, and it was already 2 weeks into the final project assignment so I was panicking.
Week 12: I felt relieved that finally my final idea was accepted. I also felt pain in my wisdom tooth and it disturbed me a lot while I was doing my work, so I went to the dentist to see what can be done about the painfulness.
Week 13: I wanted to give up at this point because I didn't know whether I was making progress or just doing the same thing over and over again. I also felt like I was in a dilemma because I wanted to use a paper texture but didn't know how to animate the type on that texture even after I used transparent pngs for my work on after effects.
Week 14: I feel really tired because I haven't been sleeping well for the past few weeks but once this week is over, I can finally sleep in peace again.

Observations:
Week 11: I noticed that many people in class also got their ideas rejected.The lecturers rejected my friends' works and they looked sad. Some of them got their idea approved and they immediately started work.
Week 12: I noticed that my classmates are working really hard this week, and that there are only 2 more weeks left until the sem break. I noticed that I'm starting to sleep later and later as well.
Week 13: I observed the stroke order from different exercises and websites that show the roman stroke order and there are differences in them,
Week 14: In class, I saw that everyone's faces were so stiff as today was submission day.

Findings:
Week 11: I found that my immune system is deteriorating because of lack of sleep. I got sick this week and I kept coughing in class.
Week 12: I found that handwriting fonts take pressure of the strokes into account, therefore I used my pentab to create that pressure naturally first when I started creating my font, then only refined it according to the principles of designing type by using my mouse.
Week 13: I realized that animating letters aren't as easy as I thought they would be, I should have spent more time researching on how to animate in different styles.
Week 14: I realized that I haven't updated my flat lay for Project 2 yet so I will be doing it in class. I also realized that today is the last day I will be in this class and it makes me kind of sad.

Further Reading:

1. The Origins of Typography by Michael J. O'Donnell

From this reading material, I learned that typefaces started off with being pictograms on caves in the stone ages, then evolved into much simpler forms so that it would be more efficient for us to use them. The material showcases different origins of type and how it evolved into what it is as of today.

I like how they explained that type is attached with a meaning to it because I think that everything done in design should be justified with a reason or rationale so that we're looking at our designs in a more critical way instead of subjectively and due to personal preferences. Also, I learned that as type evolved, the importance of consistency in a typeface also started to grow and people started paying more detail and attention to the letter forms.

Figure 9.1 The Origins of Typography

Figure 9.2 The Origins of Typography

Figure 9.3 The Origins of Typography

Figure 9.4 The Origins of Typography

Figure 9.5 The Origins of Typography

Figure 9.6 The Origins of Typography

Figure 9.7 The Origins of Typography

Here's the PDF version of the document:

2. Emotional Response to Typography: The Role of Typographic Variations in Emotional Response to Advertising by Kevin L. Guthrie

What I learned from this journal is that each and every detail put into creating a typeface or choosing it will affect the human emotion, which is why all these qualities in a typeface need to be taken into consideration while choosing them, as it will bring an effect towards the items or products that you incorporate them into.

For example, the researchers of the journal found out that print color is more influential for the logographic Chinese brand names than the alphabetic English names. Another experiment on colour was carried out, and results showed a relationship between words that are written in an atypical typeface or color could be recalled better than words written in a regular typeface or color.

Another factor is typeface personality, where some typefaces are grouped together with personalities, for example serif typefaces were overall considered “more elegant, charming, emotional, distinct, beautiful, interesting, extraordinary, rich, happy, valuable, new, gentle, young, calm etc, while sans serif type styles showed “more manly, powerful, smart, upper-class, readable, and louder.

I also found out that if your typeface, picture and ad copy are consistent in a brand, there would be a greater memorability for that brand.

Figure 10.1 Emotional Response to Typography

Figure 10.2 Emotional Response to Typography

Figure 10.3 Emotional Response to Typography

Figure 10.4 Emotional Response to Typography

Figure 10.5 Emotional Response to Typography

Figure 10.6 Emotional Response to Typography

Here's the PDF version of the journal:

3. 8 Rules for Creating Effective Typography

I found this pdf online as well, while searching for interesting typefaces to give me inspiration on what I wanted to do for this project. I scrolled through it and read the part that said we could break the rules of typography as it acts as a guide only, and related it to my previous key artwork creation.

I also found these cool typefaces, although it would have been plausible if they documented how the typeface came about and what process it went through to achieve the final result of it. I decided that I would document my final project that way instead. I would also like to know the reason behind why the typefaces were created.