Typography - Exercises

29.08.18 - 03.10.18 (Week 1 - Week 6)
Tamara Audrey Saputra (0335846)
Typography
Exercises

Lectures

Lecture 1: Introduction to Typography

29.08.18 (Week 1)

Our first class started with a brief introduction to what we could expect from this module in the following weeks. We were also told to directly make our own blog based e-portfolio, where all of our processes, reflections, project and etc will be displayed there. Mr. Vinod, our lecturer, have also addressed the kind of structure and criteria he wishes to see in our e-portfolio. Such as the labelings and the appropriate use of typeface for the headings and sub-headings in order to make it organized.

A quick background story of typography and terminologies were also introduced to us. For instance, we get to know that the word "Font" originated from a French word "Foundry" which relates to the casting of letters back in the olden days.

Terminologies

1. Font - The process of creation of the typeface.

2. Typeface - Individual face from one family which usually refers to the different weights or italicization it has. E.g Arial Bold, Arial Regular.

3. Type Family - Refers to the family of the typeface. E.g Arial.

By the end of the class, we were assigned an exercise to be due by next week and the materials we needed to buy: a graph paper and a calligraphy pen.

Lecture 2: Basic/Describing Letterform

05.09.18 (Week 2)

During our second class, we were taught about the complex terms of typography that allows us to describes the anatomy of a letter in an absolute detailed manner or, in other words, the lexicon of typography. Such as stroke, beak, stem, and ascender/descender.

There are also lots of rules that exist in a process of creating a font, a rule that came into existence through hundreds of years of development. For example, capital letters or uppercases are commonly slightly shorter than the ascender of a lowercase. It's because capital letters have more surface area which causes it to look optically bigger if its height is made equal to the ascenders. Another one is, X-height, it's probably one of the most important ones as it determines the legibility of a font. X-height is the height of the type family's lowercase "x" which sets the basic height of the other lowercases. The larger the x-height is, the more readable it is. e.g Helvetica, Georgia, Times New Roman. Another factor which adds to the readability of a typeface is its contrast, which refers to the variety of thickness of stokes it embodies. e.g Times New Roman.

Lecture 3: -

12.09.18 (Week 3)

There was no lecture today, we were told to resume with our passage writing using our preferred typeface.

Lecture 4: Development/Timeline

19.09.18 (Week 4)

In today's lecture class, we were taught about the development of typography. How it evolves into what we know today, through thousands of years of refinement. Dating back to the early days of Phonecian's letterforms to the Romans and which later on influenced our today's modern Latin.

How typography alters, has also had things to do with the different tools and surfaces that were available back in the days. As those factors generate different looks of the letters. Furthermore, readability and economic factor have also played its role in the development of typography. In order to fit more words into their materials such as sheets of leather or parchment paper, letters were compressed. As seen with the Square Capitals and its compressed form, Rustic capitals.

fig. 1.1: Example of Square Capitals

fig 1.2: Example of Rustic Capitals

The lecture also delves into the history of the movable type printing system, invented by Johannes Gutenbreg in Europe. His innovation started the Printing Revolution. However, the printing technique itself has been long back discovered in Asian countries such as China and Korea.

Lecture 5: -

26.09.18 (Week 5)

No lecture today, we continued with our lettering animation. We were also briefed about the next exercise.

Lecture 6: -

03.10.18 (Week 6)

There was no lecture today, we were given a chance to refine our animation and were introduced to InDesign for our first project.

Instruction

Calligraphy (Week 1 - Week 3)

We were given the assignment to create vertical, horizontal, and circular strokes. The aim of this exercise is to get us used to the calligraphy pen and practice our strokes consistency as well as the angles.

fig 2. 1: Several attempts

fig 2.2: Final Result

For the next exercise, we were instructed to choose one out of the four given hands. At the beginning I wanted to do Blackletters, however, after practicing it several times as well as trying the other hands, I decided to stay with Uncial.

fig 2.3: Uncial Reference

Next, we were assigned to practice our chosen hand by writing letters from A to Z several times.

fig 2.9: Practices

fig 2.8: Final Result

We are then asked to come up with a 3 line passage that has 3-4 words each line. After that, we have to write the passage with our chosen hand on a blank A4 paper.

fig 2.7: Graph Paper Practices

fig 2.8: Graph Paper Final

fig 2.9: Calligraphy on A4 Blank Paper Practices

fig 2.10: Final Result

Animated Lettering (Week 4)

In this exercise, we were told to create a lettering of our name that could reflect our personality. After landing with one design of our name, we then have to animate them accordingly to our personality.

The following image is my rough sketches, where I was just experimenting with multiples of personalities since I can't decide one yet.

fig 3.1: Rough Sketches

In the end, I decided "spontaneous" as my personality.

fig 3.2: Spontaneous Variations

After digitalizing it in Illustrator using the pen tool, I somehow feel that the "T" is rather awkward. Hence, I decided to get rid of the T's terminal and straighten it at an angle as well as lengthen the bar, in an attempt to make it look more spontaneous.

fig 3.3: Digitalized lettering modifications

I wanted to make the animation smooth, therefore, in my early attempts, I made the animation at around 60 fps.

fig 3.4: Artboards in Illustrator

fig 3.5: First attempt

However, when exported, the animation is quite slow and this does not resemble the nature of spontaneity. Therefore, I decreased the frames into 30 fps to make it faster.

fig 3.6: Final Result - Spontaneous

Type Expression (Week 5-6)

We were given 6 words (sparkle, float, blur, heavy, tall, and rage). From there words, we have to make type expressions based on the provided 9 fonts without distorting the letters.

fig 4.1: First Attempt

fig 4.2: Final Attempt

After our design is approved, we have to choose one expression and animate it. I decided to animate 'Blur'.

fig 4.3: Animation Artboards

fig 4.4: First Attempt

fig 4.4: Second Attempt

I tried to refine it by making more frames to smoothen the gradual blurring transition as well as adding more frames to the blinking action.

fig 4.6: Final Result's Artboard

fig 4.7: Final Result

Feedbacks

Week 2

General Feedback: We were told to keep our strokes consistent and leaving the gap between the strokes equal to the nib size. We were also advised to not rush on the circular strokes and it has to touch all four sides.

Specific Feedback: Mr. Vinod said that I need to maintain my stroke width as well as my circular strokes since it does not touch all four sides, mainly due to rushing. He also said I maintained the pen angle correctly after asking me to show how I made the strokes

Week 3

Specific Feedback: Mr. Shamsul said that my work is not bad. However, he told me to fix my "d" and "e" as they're not consistent. I also need to improve the spacing from one word to another as well as the height of the ascender and descender. Overall, my work hasn't fully reflected the Uncial typeface.

Week 4

Specific Feedback: Mr. Shamsul said that my letterings are not specific enough, as I made several letterings with different personalities. He told me to narrow down the personalities into one only. It can be something that I haven't made, allowing me to start fresh.

Week 5

General Feedback: Mr.Vinod reminded us to animate our name according to our chosen personality. Also, he suggested to use many frames to make our animation smoother.

Specific Feedback: To Mr. Shamsul, the lettering still does not resonate spontaneity, he said it's more like free-flowing. However, he suggested to make the animation faster to complement that. My animation also somehow jitters, it might be caused by accidental misalignment in Illustrator. I'll have to redo it to fix it.

Week 6

Specific Feedback: Mr. Shamsul said that the "sparkle" should have more elements that scatter to emphasize it. Meanwhile, Mr. Vinod said that it was interesting how I use an asterisk in replace of the "a" in "sparkle". Mr. Shamsul also said that what I did for the "Blur" is interesting and suggested to lighten the blur effect on the top letters to make it at least more readable. As for the "float" and "tall" first attempt, both of them said that it does not express the words well. However, for the animation both of them said it was nice.

Reflection

Experiences

Week 2

The lecture was really interesting and insightful, as its something I've never touched before. The exercise can get frustrating at some point due to the fact that we have to leave the spaces in a "zig-zag" manner and nib size.

Week 3

This time the lecture felt quite long as there were so many things about the anatomy of typography that's introduced at once.

Week 4

It was quite a hectic day in class since I can't figure out any decent lettering that echoes spontaneity. After the class, I spent the rest of the week searching and finding more ideas for my lettering.

Week 5

I stumbled upon technical problems during the making of my lettering animation. Such as the jittering of the gif that just won't disappear even after I aligned the objects, used the ruler, rearranged the artboards and redoing it 5 times. It became frustrating.

Week 6

What was hard was how do we express the words differently from the others, but still retaining the same meaning. As sometimes, somehow the result is similar to the others at a certain degree, especially, when there is a limitation such as no distortions and no many graphic elements can be applied.

Observations

Week 2

Taking notes of the lecture seems to be crucial, as it becomes handy when we have to write about it later on in the blog that we have to maintain. In addition, it also keeps me alert and attentive during the lecture. When it comes to making the circular strokes, I tend to rush which causes the overall strokes to look messy and inconsistent.

Week 3

I noticed that I have a problem with the Uncial "d" letter. Where the ascender of it just won't touch with the other stroke.

Week 4

During the process of brainstorming of the letters, I find it really hard to decided on what my personality is. It was hard to just come up with one word. I realized it was because, in my head, the idea of it was still extremely abstract.

Week 5

I noticed that I need to duplicate the objects slowly in illustrator to minimize any chances of accidentally shifting and causing the objects to misalign which later on causes the animation to flicker.

Week 6

It was interesting to see how we all experimented using the same type families and words yet the output varies.

Findings

Week 2

I recognized that typography requires a lot of precision as well as patience in order to generate a satisfying output.

Week 3

I discovered that my habit of using my pinky finger as a pivot and support helped me a lot when it comes to making straight lines.

Week 4

I realized that translating our personality into a visual form is a very demanding and daunting task.

Week 5

I found out that although many frames will make the animation smoother, in my case, it needs to be shortened to make the animation faster. In order to support my chosen personality.

Week 6

Although all of us worked separately, I realize that there is some sort of similarities in how we express the words. Which means that there is a general visual interpretation and understanding when we read a word.