Typography Task 1/ Exercises 1 & 2

August 24, 2021

Typography Task 1/ Exercises 1 & 2

25.8.2021 - 22.9.2021 (Week1 - Week5)
Ng Ee Chyn / 0344762
Typography / Creative Media Design(minor)
Task 1: Exercise 1 & 2

LECTURES

Link:

Typography Final Compilation

Week 1 / 25.08.2021:

Mr. Vinod and Dr. Charles lecture us in the first week of Typography class. We are asked to join the Typography group on Facebook. Mr. Vinod introduces us to the Facebook group announcement and files which allow us to find our online class link, spreadsheet, attendance, recorded videos, etc.

In the Facebook group, there are some previous student's e-portfolio and a link explaining how to write a reflection in e-portfolio as a reference and guideline on starting our e-portfolio. We are also required to download “10 typefaces”(fonts) files and install them on our computer which we going to use by next week. We also will be using Illustration, In design, photoshop, and font lab in the next few weeks.

Later on, we are given some time to watch the e-portfolio briefing video and create our own Blogger. I created my blog before in previous semester modules, so I think I don’t have any much problem with creating my e-portfolio, but I’m not sure I’m doing on right track. Last but not least, Mr. Vinod introduced MIB to us and give us our first exercise which is "Type Expressions" by using the words given by students in class.

Recorded lectures note:
Video 0 - Introduction

Typography is the act of creating a letter, is the crating of typeface/type families. Example figure 1.1, this is a geometrical shape used to create the shapes/letter shapes.

Fig 1.1: Geometrical shape (Week 1, 25.08.2021)

We can find typography anywhere such as:

Animation
Website design
Application
Sign design
Bottle labels, books & poster
Logo

Typography has evolved over 500 years:

Calligraphy > Lettering > Typography

Calligraphy: Write style- black letter, unsealed, round hand, etc.
Lettering: Draw letters out

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves:

Selecting typefaces
Point sizes
Line lengths
Line-spacing (leading)
Letter-spacing (tracking)
Adjusting the space between pairs of letters (kerning)

The term typography is also applied to:

Style
The arrangement and appearance of the letters
Numbers
Symbols

Font - refers to the individual font or weight within the typeface, for example:

Georgia Regular
Georgia Italic
Georgia Bold.

Typeface - refers to the entire family of fonts/weights that share similar characteristics/styles, for example:

Georgia
Arial
Times New Roman

Week 2 / 01.09.2021:

On the second of the week, students are required to post their "Type Expression" work given by last week on the Facebook group in the comment section. He also thought us how to export our work into JEPG.

Later on, Mr. Vinod and Dr. Charles randomly pick some student's designs and gave comments to them. Based on Mr. Vinod's comments on other students' designs, without distorting the typefaces/letters and try to use the given typefaces as much as possible to express our design. For example, try to use heavier weight such as bold and black or use the pen tool to add a little bit of pattern so that typefaces are not too overly distorted.

Typeface refers to the entire family of fonts, eg Futura, Arial and etc.
Font refers to individual weight, eg bold, black, light, italics and etc.

We also split into breakout rooms to give each other comments on their design by using these 4 questions:

Are the explorations sufficient?
Does the expression match the meaning of the word?
On a scale of 1–5, how strong is the idea?
How can the work be improved?

After the room discussion, Mr. Vinod and Dr. Charles also commented on my e-portfolio. They do not recommend not use other fonts, it is better to use the "default" font so it can be easy to read. Every "Fig" has to add the date. Others are fine.

At the end of the class, Mr. Vinod shows us his previous student e-portfolio to guild us on what to complete next week and the coming weeks. For the third week, we have to finalize our work by pick out the best for each word and digitize them. In the future class would be to pick one from the 4 and animate it.

Recorded lectures note:

Video 1 - Development

Fig 3.1: Development (Week 3, 08.09.2021)

Week 3 / 08.09.2021:

Today, we are showing our final outcome to our lecturers. Mr. Vinod said the common mistakes that most of the students made are the text/expression not visibly present and not dominantly using the space that has been provided, which losing in grabbing the attention. When Mr. Vinod was observing the first student type expression, he reminded us to change the font size to 7pt and export the entire artboard which I had made the same mistake. When my work was selected, the sport "Light" has grabbed Dr. Charles's attention and he commend my type is interesting. I also got an agreement from Mr. Vinod.

After students finished presenting their final outcome, we are given a few break-out rooms to join any discussion room we want. Mr. Vinod gave us 30 min to choose one from type expression complete a type animation in class and export in GIF. In the discussion room, students were doing while watching Mr. Vinod recorded video. I was panic and tough it was hard to complete animation in a short time because it used both Illustration and Photoshop to complete it. But in the end, I was able to complete it in the time given. To create an animation, we have to create a move in each artboard in Illustration. I used 10 artboards to create a GIF.

Fig 3.1: Gone GIF (Week 3, 08.09.2021)

Recorded lectures note:

Video 2 - Basic

Fig 3.2: Basic (Week 3, 08.09.2021)

Week 4 / 15.09.2021:

After we had completed "Type Expression", today we had come to Task 1 Exercise 2 which is "Text Formating". Mr. Vinod ask us to watch the recorded video, Typo_Ex Text Formatting 1:4 to Typo_Ex Text Formatting 4:4, and complete the exercise during the class. After completing the exercise we had to export it in 300 dpi and 2048px width with black & white color. During the break-out room, our lecturers will give feedback on our e-portfolio in the feedback sheet.

After the break-out room, Mr. Vinod shows a previous student e-portfolio, Lui Hsiao Hui, as an example while explaining to us what to write in our e-portfolio, also what Mr. Vinod expect to see on our e-portfolio. Later on, MR. Vinod gave us feedback on our final outcome GIF. I showed him 2 versions of the "Light" GIF, and he said the second version of the GIF is much better, just have to slow down the movement of the spotlight.

Recorded lectures note:
Video 3 - Text(Part 1)
Video 4 - Text(Part 2)

Fig 3.3: Text part 1 & 2(Week 4, 15.09.2021)

Week 5 / 22.09.2021:

Today, Mr. Vinod briefly explaining the task 2 work. Before starting task 2, he told us to watch the recorded video Typo_Task 2_Process Demo which will guild us on how to do task 2. After Mr. Vinod checked and gave feedback to our e-portfolio, he was disappointed because we had done a lot of mistakes, such as JPG no exported properly, PDF was not being summited or files were not visible, he hopes we can do better next time.

Recorded lectures note:
Video 5 - Understanding

Fig 3.4: Understanding(Week 5, 22.09.2021)

Video 6 - Screen & Print

Fig 3.4: Understanding(Week 5, 22.09.2021)

INSTRUCTIONS

Link to Modul Information Booklet

Task 1: Exercise - Type Expression

Week 1:

In this exercise, we have to choose 4 words to create our type expression from Error, Melt, Gone, Light, Pour & Shiver. Terror is mandatory.

Terror (mandatory)
~~Error~~
~~Melt~~
Gone
Light
~~Pour~~
Shiver

Fig A 1.1: Terror & Gone sketches (Week2, 01.09.2021)

Fig A 1.2: Light & Shiver sketches (Week2, 01.09.2021)

Week 2:

To finalizing our design, we have to use Adobe Illustrator to digitize our type expression. Based on the lecturer's feedback to other students, I decided to recreate my terror, make some minor changes gone and light and pick the first shiver that I sketched.

Terror

Font type - Futura Std Heavy

I decided to recreate another type expression for terror because my terror sketches are too overly distorted. I combined an image of rust with the typeface of terror which creates the rustly texture so it looks horror and creepy.

Fig A 2.1: Terror (Week2, 01.09.2021) Fig A 2.2: Rusty image(Week2, 01.09.2021)

Gone

Font type - Futura Std Light

For my gone, it was inspired by the Balloon Girl art, "Going, going, gone..."— Banksy. Based on what my classmates said, they prefer the second gone(in Fig A 1.1) because it was unique compare to my other gone sketches. The position on my gone has interrupted the design, they recommended adjust the position so it looks like the letter "O" is coming out from the Gone.

Fig A 2.3: Gone (Week2, 01.09.2021) Fig A 2.4: Balloon Girl(Week2, 01.09.2021)

Light

Font type - Futura Std Bold

As for my light, I choose the third sketch(in Fig A 1.2). I removed the detail of the letter "L" and the candle to make it as original as could be.

Fig A 2.5: Light (Week2, 01.09.2021)

Shiver

Font type - Futura Std Book Oblique

I picked the first sketch of shiver because the second sketch are distorted and the last one I could not find the way to create the shaking effect. I applied the waves and added the shaking line on the shiver so it look like very cold.

Fig A 2.6: Shiver (Week2, 01.09.2021)

Final outcome:

Fig A 2.7:Final type expression JPEG(Week2, 01.09.2021)

Fig A 2.8: Final outcome(Week2, 01.09.2021)

Week 3:
This week, we have to create a GIF using Adobe Illustrator and Animation. I choose light because it had a more challenging and interesting look compared to other type expression. Firstly, we have to use illustration to drew a loop to guild the light movement that I want it to go and move the light on each artboard until the end of the loop.

Fig A 3.1: Process of creating layers (Week3, 08.09.2021)

Illustrator shortcut key:

Select artboard = Shift+O
Make = Ctrl+7 (combine an image and shape)
Release = Ctrl+Alt+7

Before use Photoshop to create an animation, I used a GIF maker to check my animation could move in smoothly which also could save my time. In this GIF maker, I observed the lesser detail of movement, the faster it moves. Therefore, I skipped some of the artboards to make the movement from slow to fast.

Fig A 3.2: GIF creator (Week3, 08.09.2021)

Moving on, I delete all the loops in Illustrator and use Photoshop to create an animation. Each time duplicate a frame, we have to hide the layer we don't need and show the layer we need until the end of the layer. Lastly, export and save for web to create a GIF.

Fig A 3.3: Process of creating animation (Week3, 08.09.2021)

Fig A 3.4: 1st version Light outcome (Week3, 08.09.2021)

Besides, I also try another version of light without the shadow of light:

Fig A 3.5: Process of creating "Ver. 2 Light" layers (Week3, 08.09.2021)

Fig A 3.6: 2nd version of Light outcome (Week3, 08.09.2021)

After Showing Mr. Vinod 2 version of Light, he said the "2nd version of the Light" GIF is much better because we could not see the letters, only the light shine can starts to see the letters which allow a person to engage the work. While the 1st version of light already shows what I trying to say. As the 2nd GIF just have to slow down a little bit. After Mr. Vinod gave a comment on my GIF, I found out I have lost an artboard while creating the 2nd ver GIF which causes the GIF to move faster.

Final outcome:

Fig A 4.1: Final outcome(Week4, 15.09.2021)

Task 2: Exercise - Text Formatting

Week 4:

Kerning - Adjusting the space between the individual letterforms

Tracking(letter-spacing) - Adjusts spacing uniformly over a range of characters

InDesign shortcut key

Max of the head is 20 pt
View > Grids and Guides > Show baseline
w = preview
alt + < = kerning
alt + (right arror) = tracking, increase letter spacing
ctrl + alt + i = hidden characters
ctrl + shift + < = increase text szie
ctrl + shitf + alt = increase text size faster
ctrl + : = margin/column
fill frame proportionally = fill the image
Layout > Margin and column > 4 column
Text frame option > 1. Align - Top, 2. Baseline option: offset - Leading
Edit > Preferences > Grids (increment every 11pt, View Threshold 50%)
Window/F8 > Info
Edit > Prefrence > Unit and Increments > Kerning&Tracking 5/1000em

Fig A 4.2: Text Formatting with Kerning(Week4, 15.09.2021)

Fig A 4.3: Layout 1(Week4, 15.09.2021)

Fig A 4.4: Layout 2(Week4, 15.09.2021)

Fig A 4.5: Layout 3(Week4, 15.09.2021)

Fig A 4.6: Layout 4(Week4, 15.09.2021)

Final outcome:

I decided to choose layout 4 as my final outcome

Fig A 4.7: Final outcome(Week4, 15.09.2021)

FEEDBACK

Week 1
General feedback: During the checking time, Mr. Vinod randomly picked students' portfolios to correct their e-portfolio format.

Week 2
General feedback: During the class, Mr. Vinod encourages us to not distort too much on the typeface. I asked Mr. Vinod and Dr. Charles to check my e-portfolio and they recommend changing the font type to the default font as a beginner because it allows us to read smoothly.
Specific feedback: Based on my classmate's feedback, they prefer to go on my second "gone" and third "light" because it was more unique.
Gone - For my Gone descending position has interrupted the design, they recommended adjust the position so it looks like the letter "O" is coming out from the Gone.
Light - They recommend me to make removed the detail of the letter "L" to make it less dependent on showing an image rather then just a font, as original, as could be.

Week 3
Specific feedback: Mr. Vinod said the common mistakes that most of the students made are the text/expression not visibly present and not dominantly using the space that has been provided, which losing in grabbing the attention.
General feedback: Whats grab Dr. Charles's attention is the sport "Light" and overall are interesting. Mr. Vinod praise and he reminds. Besides, he reminds me to change the font size to 7pt and export the entire artboard.

Week 4
General feedback: We have to complete the e-portfolio weekly so we can catch up easily. Do not delete the feedback given in the feedback sheet. Before week 6 or during week 6, we have to watch finish the recorded lecturer videos.
Specific feedback: The second version of the "Light" GIF is much better because we could not see the letters, only the light shine can start to see the letters, just have to slow down a little bit.

Week 5
General feedback: Students was done a lot of mistakes, he hopes we can do better next time and pay attention to submission details.
Specific feedback: Export based on instruction, GIF still a bit fast but good, PDF was not visible, JPG must be in 300 dpi and maximum quality.

REFLECTIONS

Experience:

Typography is kind of interesting and challenging for me to learn, it took a lot of effort and hard work to overcome the crisis circumstance. I have to concentrate on every detail what has Mr. Vinod said during the lecture by noting down every important piece of information. The most fun part is creating a GIF using Adobe illustrator and photoshop because I am able to make the words move lively.

Observations:
The typography course is more challenging than I expected. It is not just selecting the font family and font size, it also has to make sure it is not overly distorted when creating a typeface, adjusting line-spacing, letter-spacing, and the space between pairs of letters. We also have to make sure it was legible, readable, and appealing when displayed.

Findings:
In this module, I have found that I had more space to grow, I am able to be more creative in every section. For example, type of expression, animate GIF, and text formatting arrangement have multiples ways to exhibit its uniqueness and creativity. Besides, I always learn through the process and do my best. Making mistakes is common, as long as I learned from my mistake, that is nothing impossible.

FURTHER READING

1. Early Evolution of Roman Letters 1

SQUARE CAPITALS

Approximate inscriptional letters
Formal books and documents
These letters definitely embody gravitas: the precision and regularity of their form shows that they were drawn slowly and carefully
Written quickly, with a more flowing hand, than was possible in stone
Although they were patterned after the capital letterforms, differed from the inscriptional form on monuments

Fig B 1.1: Example of Square Capitals(Week5, 26.09.2021)

RUSTIC CAPITALS

Wide, taking a lot of space on a page or scroll
Patrons who used scribes realized that they could appropriately reduce the cost of producing certain, less important books and documents if the writing were done in a letterform that was narrower (thus saving space) and simpler to draw (thus saving time).
be known as rustic (or “simple”) capitals.

Fig B 1.2: Example of Rustic Capitals(Week5, 26.09.2021)

ROMAN CURSIVE

Means “running” in Latin, and the Roman cursive form enabled the writer to keep the pen running along the writing surface.
Recording business transactions, bookkeeping, correspondence and similar uses
Until approximately AD 500.
Since the writings were not usually intended to be permanent, the letters were often scratched in tablets of wax, clay or masonry, or written on papyrus.
Sometimes they were so carelessly recorded which cause difficult to identify anyone but the author
Led to the present forms of many of our lowercase letters

Fig B 1.3: Roman Cursive(Week5, 26.09.2021)

2. First Alphabets

Symbol Alphabets

The first writings were graphic images that represented something tangible
Simple shapes that spoke fairly simple vocabulary: man, woman, fire, food, tree, etc.
Over time, people realized that they needed more symbols to express more words. So, multiple “tree” symbols were combined to make a “forest,” and the separate symbols for man, woman, and child were consolidated into a single “family” symbol