TYPOGRAPHY - EXERCISES



29.08.18 (Week 1) - 26.09.18 (Week 5)
Maisara Arissa Azahari (0332707)
Typography
Exercises

LECTURES

Lecture 1: Introduction to Typography

30.08.18 — Week 1


The class was commenced with a brief introduction to the module and what to take note of in the forthcoming weeks. In a nutshell, typography is the visual appearance of written word. According to Wikipedia, typography is described as the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Typography first started as calligraphy hundreds of years ago however, with the rapid development of applications, the qualities of typography also decreases rapidly.

Terminologies

  • Font - refers to the individual font or weight within the typeface, i.e. Regular, Italic and Bold. It also derived from the word foundry, which is the process of creating a typeface.
  • Typeface - refers to the entire family of fonts that share similar characteristics, i.e. Georgia, Arial, and Times New Roman.
  • Type family - refers to the many weights within an individual typeface.



Lecture 2: 

05.09.18 — Week 2


This week's lecture was on basic letterforms and describing them. We were introduced to many different technical terms and went more in depth about the other terminologies of letterforms. Besides that, we were also introduced to the 3 parts of a letterform which are baseline, median, and x-height.
                   
                                   
Figure 1.0 Out of many terms in describing letterforms
Image taken from https://designmodo.com/letterform/

Terminologies

  • Lexicon - Dictionary of Typography
  • Baseline - where all the letters sit
  • X-height - the height of the main body of lowercase letter x, which determines the legibility and readability of typefaces.
  • Descender height : part of a letter which extends below the baseline
  • Ascender height : a part of a letter which extends above the median

Other letterforms include stroke, apex/vertex, arm, barb, beak, ear, bowl, finial, crotch, leg, shoulder, em/en, swash, tail, serif, stem, loop, stress, and ligature. The readability and legibility of a text depends on the contrast; the thinness and thickness of the line. 

One thing that I took away from this lecture was...

The larger the x-height, the readability of the text will also increase.

which I though was something important to always keep in mind when doing either calligraphy or lettering. 


INSTRUCTIONS



EXERCISES

Week 1-3: Calligraphy

This week's class was to familiarise ourselves with our calligraphy pens by doing a few practices such as vertical, horizontal and circular strokes. The aim of this exercise was to achieve consistent strokes, in terms of thickness and slantedness, throughout the repeated practice and to get used to holding the calligraphy pens in a certain way.

Fig 1.1 1st attempt with horizontal, vertical, and circular strokes

Fig 1.2 2nd attempt with horizontal, vertical and circular strokes

After this practice was finished, we began to work on our chosen hand out of the four selected types that Mr Vinod gave us such as Uncial, Blackletter, Roundhand and Chancery Cursive.  I chose Uncial Calligraphy as I felt the most comfortable with it.

Figure 1.3 Example of Uncial Calligraphy


Figure 1.4 Alphabetical drills 

Figure 1.5 Alphabets (A-M)

Figure 1.6 Alphabets (O-Z)

After we were done practicing our strokes and writing alphabets, we were given the task of writing a quote/phrase/saying that is 3 lines long. 

Figure 1.7 Attempting different quotes

Figure 1.7 More attempts

Figure 1.8 More attempts

Figure 1.9 More attempts

Figure 2.0 More attempts
Figure 2.1 Final outcome (post-feedback)

Week 4-5: Animated Lettering


For this exercise, we were given the task of designing different styles of lettering of our names that reflected our personality. After choosing a style, we will then having to animate it using Adobe Illustrator and Adobe Photoshop. 

Initially, I was going for a more rounded approach to show that I'm an all-rounder and that I'm approachable, but Mr Shamsul said that it wasn't specific enough. I had to spend some time just brainstorming ideas on how to design a lettering that truly described me, which ended up with me doodling too many ideas. 


Figure 2.3 Multiple ideas that I came up with

After sketching out all the above letterings on a whim without thinking of a personality I wanted to emulate, almost all of the lettering I made were rendered useless as I did not attach a personality into it. So, I had to dig in deeper and did more research before doing the typesketch for my new lettering.


Figure 2.4 Typesketch 1 emulating playfulness

Figure 2.5 Typesketch 2 emulating playfulness


2 papers filled with lettering later, I decided to finally choose one to animate. I had chosen the third last lettering in the second typesketch (Figure 2.5)

Figure 2.6 Chosen Lettering

Using the sketch, I had outlined the lettering using the pen tool in Adobe Illustrator. 


Figure 2.7 Final outcome of lettering - Static

For the animated lettering part, we had to make sure the animation emulates the personality to the T. During the process, I encountered a few difficulties such as I did not know how many frames one movement will take which caused my first attempt to look very slow and steady rather than fast and 'playful'.

Figure 2.8 Screenshot of the frames I used for first attempt


Figure 2.9 First attempt at animating - Failed

After doing it for the first attempt, I noticed the black lines that kept appearing at the edges of the gif  that I have created which was automatically a fail for me. I decided to try again and this time around, I decided to just emulate the word 'playfulness' for the last alphabet. Besides that, I had also decided on filling the word instead of it being outlined.



Figure 3.0 Screenshot of the frames I used for the final attempt

Figure 3.1 Final attempt at animating - 'Playful'


Week 4-5: Animated Lettering

We are given 6 words to do type expression with. The 6 words are float, sparkle, blur, heavy, tall, and rage. 10 type families were given for us to choose from. Then, we had to illustrate them in Adobe Illustrator and Adobe Photoshop. 


Figure 3.2 Final attempt at type expression


Right after my designs were approved, I moved on to animating two of the type expressions and giving it life. 


Figure 3.3 Screenshots of frames used for Blur animation 

Figure 3.4 Animation for Blur















FEEDBACK

WEEK TWO
Specific feedback:
Mr Shamsul pointed out that I was using the wrong type of graph paper so I had to go purchase some from the stationery store in Syopz. Other than that, he advised me to draw the circles with two strokes instead of one. He also added that the circle has to touch all four edges of the box its contained in to have a cleaner look. Furthermore, the way that I was putting too much pressure on my pen had affected the nib a little bit which caught Mr Shamsul's eye, which then I went to buy a new one to get a clearer stroke. General feedback: The thin and thick lines of my circle could be improved greatly after Mr Shamsul showed me the proper way of drawing it. I have to work on drawing the proper circle that touches all four edges of the box in order to achieve a better look.

WEEK THREE
Specific feedback: Overall my calligraphy was alright except for some alphabets such as D, E, F and O. First of all, Mr Shamsul pointed out that my D and E were not slanted enough according to the Uncial Calligraphy reference I have printed. Next, my F did not exceed the descender height according to the reference as well. Lastly, my O was still not as round as it should be. Besides the individual alphabets, Mr Shamsul also pointed out the extra space between the passages that acted as a divider. He told me that it should minimised as the font does not exceed the x-height by a lot.

WEEK FOUR
Specific feedback: Mr Vinod and Mr Shamsul both agreed that I have mastered the Uncial Calligraphy well for the final outcome of my quote on A4. Mr Vinod commented that the quote does not necessarily have to be in the middle of the page. He told me to think about composition when writing as well. As for the sketches I made for animated lettering, Mr Vinod asked me to develop a typeface based on a prominent personality type and that it has to be consistent. I will have to properly go in depth about my personality and figure out which typeface fits me the most.

WEEK FIVE

Specific feedback: Mr Shamsul pointed out how delayed the animation that I had created looked which was due to the amount of frames I had used to indicate one simple movement. Mr Vinod on the other hand asked what kind of personality I wanted to show which I then answered with "friendly" He had suggested me to make the animation more lively by making sure the alphabets' movements are exaggerated in which they are waving to the audience. General feedback: Mr Vinod reminded us to really focus on making sure that the animation represents only one of our prominent personalities that we want to put forward.



WEEK SIX
Specific feedback: Mr Shamsul said that my expressions are alright except for 'float' which he made a remark on. He said that it does not emulate the meaning of the word entirely and could be worked on even more. Overall, nothing else needed to be fixed. Mr Shamsul also mentioned that he liked what I did with the word 'rage' and that my placements are all aligned. After that, I worked on the animation that expresses the word more.

WEEK SEVEN
Specific Feedback: Mr. Shamsul said that my animation for blur is simple yet conveys the message well. However when it comes to the animation quality, he said that I should have more frames for a smoother look but the movement of the word has to be quick.


REFLECTION


Experiences



WEEK ONE
The first lecture felt really long and exhausting for us even though we were all stoked to learn about typography. However, my view on typography changed tremendously after the lecture.

WEEK TWO
I used the calligraphy pen for the first time and was surprisingly adapting to it really quick. Even though I was adapting to it, I still felt frustrated when it came to practicing the letter 'O'. I couldn't get it to be just big enough to fit a grid of the graph paper but after several attempts, I finally managed to do so.

WEEK THREE
I enjoyed the writing exercise and my writing have definitely become more consistent through the constant practicing.

WEEK FOUR
This week was quite stressful as some of my writings had become a little bit off due to the calligraphy pen's nib getting dented by the frequent use. I had to purchase new pens right after and start all over again.

WEEK FIVE
Class was surprisingly lighter than usual as we had to make gifs. I had fun animating the words that were given by Mr Vinod. Though it was lighter, it was still as tiring as we had to animate for 3 hours.

WEEK SIX
For today's class, I experimented with animations for type expression and settling with two words which are 'tall' and 'blur'.

WEEK SEVEN
I felt like I had to be more aware of how important typography really is in this class. Typography for me now is defined not only by the aesthetic purpose but also the readability and clarity of it. Overall, it has to be understood by the audience.

Observations

WEEK ONE
I noticed that my classmates and I are very taken aback at how much Typography has to offer and that it is more than what eye sees.

WEEK TWO
My hands were adapting to the calligraphy pen really quickly and I was able to draw straight lines.

WEEK THREE
I was beginning to notice typography in everything and I started to appreciate them even more. Other that that, I noticed that my other classmates were also getting used to the calligraphy pens.

WEEK FOUR
To show our personality through our name for lettering, most of us went for a simplistic approach. Even though it was simplistic, minor changes to the lettering prove to be a big deal in the end.

WEEK FIVE
I saw a lot of different yet interesting animations done by my classmates. It was really intriguing to see different ideas coming together to make one beautiful artwork.

WEEK SIX
The expression for RAGE and SPARKLE was the hardest to do for most of us.

WEEK SEVEN
Getting introduced to InDesign was a very confusing experience for all of us but by the end of the class we eventually got the hang of it.

Findings

WEEK ONE
I found myself being interested in learning more about typography after the lecture was given by Mr Vinod.

WEEK TWO
I found that I have been drawing the letter 'O' wrong all this while and that it appears smoother if I don't put too much pressure on the pen.

WEEK THREE
I found that typography really isn't as easy as they make it seem and that it takes a lot of work and understanding to achieve an almost perfect lettering.

WEEK FOUR
I noticed that it was fairly simple to describe myself through lettering as my personality is quite a stereotype aka Playful.

WEEK FIVE
I found that all of my classmates are filled with bright ideas on choosing a personality that they emulate for their lettering.

WEEK SIX
I was inspired by my classmates' works in class and decided to implement some of them in my work as well, achieving my desired look at the end.

WEEK SEVEN
I find that Mr Vinod constantly unloads a lot of information in class that requires constant understanding non-stop. I juggled with taking notes so I took a video of him instead since I work better with visual notes.

FURTHER READINGS

WEEK ONE - WEEK THREE

Typographic Design: Form and Communication by Rob Carter, Philip B. Meggs, Ben Day, Sandra Maxa and Mark Sanders

Typography is an evolution of the written word, and as such it participates in a history of visual communication extending thousands of years. That evolution is presented here in the form of a timeline that traces a development from hand, to mechanical, to digital practice, in the context of world-historical and art-historical events. Typographic design is a complex human activity, requiring a broad background for informed practice. Typography had also evolved from handwriting, which is created by making a series of marks by hand; therefore, the fundamental element constructing a letterform is the linear stroke.

WEEK FOUR - WEEK FIVE

Dancing with Words: Using Animated Text for Captioning

by Quoc Vy,Richard Hunt &Deborah I. Fels

They claimed that “kinetic typography has the capacity to dramatically add to the way people convey emotions” (p. 2). Both studies demonstrated that kinetic typography can enhance the emotional interpretation of written words, but neither attempted to determine which aspects of the animation excited a particular emotion.






Comments