8th of Aug '17 - 27st of Sept '17 (Week 1 - Week 5)
Jaslyn Tjhai (0333039)
Typography and Hypertextuality
Exercises
LECTURES
Lecture/Tutorial 1: Introduction to Typography
On the first week of Typography and Hypertextuality class, Mr. Vinod explained about all the things he expects us to do in class. First thing was to have our own blog on blogspot, where I'm updating on right now, and we were required to submit all our works here. Then Mr. Vinod explained about a few things about our blog that we should pay attention to in order to have an organized blog such as labelling our post. While explaining, he noticed that none of us were taking down any notes so he gave us an advice to take down notes because our brains are bound to forget details. He told us to follow a certain format while writing our blog and we were asked to refer to our seniors blog which he gave a link to in Facebook. Mr. Vinod also expects us to read books or even research about articles regarding Typography where we have to document about it to learn more about Typography on our own. Afterwards, we were given our first exercise which is calligraphy exercise, where we are required to do horizontal and vertical lines, as well as circles, without using any guide (ex. rulers). We were also told that we should choose 1 from 3 calligraphic hands that we will use for our calligraphy exercise. Our choices are Roundhand, Blackletter, and Uncial.
 |
| Fig 1.a (left to right) Roundhand, Blackletter, Uncial |
Lecture/Tutorial 2: Introduction to Typography
On the start of the classes on the second week, Mr. Vinod asked the whole class to continue doing our exercises where we started to work on practicing the alphabets. He also explained how we should write our names on our graph paper that we used for exercises. It was quite difficult in the beginning as I'm still confused as to how big the letters should be and the spaces between the letters. But Mr. Vinod told me the right way to write the letters while he was walking around checking so I found it easier to do it afterwards. Mr. Vinod then gave us a lecture regarding Typography, where he explained that Typography is the art and technique to make written language readable, legible, and appealing. Whatever letter forms that are constructed or assembled, or even layouts of a written work are all considered as a part of Typography. In the lecture, we were explained that there are conventions and not rules in typography because convention means something that you can adjust to while rules mean you have to follow it. Mr. Vinod then told us to research on a few designers that have good works. Since I have some free time, I did some research about them.
The first designer that was mentioned was Paul Rand. He was an American art director and graphic designer best known for his corporate logo designs. He also did design on books, such as the children book titled I Know a Lot of Things. I also did some research on other deisgners that were mentioned by Mr. Vinod such as Shigeo Fukuda, Paula Scher, Ahn Sang Soo, Willian Herald Wong, etc.
 |
| Fig 2.a Works by Ahn Sang Soo |
 |
| Fig 2.b Works by Paula Scher |
 |
| Fig 2.c Works by Shigeo Fukuda |
Mr. Vinod also explained about a few terms in Typography.
Font came from the term 'found' which came from the term 'foundry'. Foundry is a place where process of melting of metals, carvings, etc. happens.
Typeface is a specific font in a typefamily. Ex: Helevatica BoldTypefamily (according to Business Dictionary) is a complete set of relating typefaces having identical characteristics. Ex: Helevatica, Arial, etc.
 |
| Fig 2.d Examples of typefaces in a typefamily |
Lecture/Tutorial 3: Lettering
On the third week, Mr. Vinod started the class by asking us to gather around a table. We were then told to present our calligraphy exercises that we were asked to do weeks before. While each of us present our works, Mr. Vinod gave us all of us, as well as each of us a feedback. I was quite nervous while I was presenting, and thought that I could've done better. After the presentation, we were given the next task which is to make lettering of our names. Where the lettering should be able to express our personality. After sketching our a few of my name that expresses some of my personality, Mr. Vinod then asked me to choose the simpler ones so that it will not take much time as we were asked to finish this task by 2 p.m. which is the time our classes ends. After this exercise, we were given an assignment which is type expression using limited fonts that were mentioned.
Lecture/Tutorial 4: Type Expression
On the fourth week, Mr. Vinod started the class by giving us a lecture about the basic of letterforms. We were shown the component parts of a letterform which is important for us to understand especially when we will be asked to design our own fonts later on. A few parts that we learned from the lecture are the stroke, arm, beak, bowl, ascender, descender, bracket, and many more. After the lecture, we were asked to bring out our exercise on type expression while Mr. Vinod and Mr. Shamsul walked around the class to give feedbacks.
Lecture/Tutorial 5: Type Development
On the fifth week, Mr. Vinos started the class by going around and checking on our final work for type expression. He then explained the first project that we need to do which is a story book. Mr. Vinod then explain the requirements for this project which can be found in our Times website. We were also asked to do it on our own before he start giving feedbacks next week. Before starting our project, Mr. Vinod gave a lecture about the development of typography. Mr. Vinod explained about the development of letterforms from Early Arabic times to Modern Times. One of the earliest typeface used for printing is by Nicolas Jensen in the year 1471.
 |
| Fig 3.a A portrait of Nicolas Jenson |
For Dutch printing there’s Polyglot Bible printed by Christophe Plantin in the year 1572.
 |
| Fig 3.b Polygot Bible by Christophe Plantin |
Then we moved on to the classification of types where there are Blackletter in the year 1450,
 |
| Fig 3.c Blackletter |
Oldstyle in the year 1475 (ex. Bembo),
 |
| Fig 3.d Oldstyle timeline |
Italic in the year 1500 (it used to be considered as a font itself before it became a typeface within the family),
 |
| Fig 3.e Italics typeface |
Script in the year 1550 (ex. Snell Roundhand),
 |
| Fig 3.f Snell Roundhand's script |
Transitional in the year 1750 (they were not based on the diagonal stress; ex. Century),
 |
| Fig 3.g Transitional |
Modern in the year 1775 (when they discovered the serif; ex. Bodoni, Didot),
 |
| Fig 3.h Bodoni |
Square Serif/Slab Serif in the year 1825 (one of the inventions that make things look exaggerated; ex. Memphis, Serifa, Rockwell),
 |
| Fig 3.i Slab Serif |
and Serif in the year 1900 (ex. Gill Sans [Eric Gill], Caslon, Optima, Grotesk) Serif/Sans Serif in the year 1990 (ex. Rotis, Scala, Stone)
 |
| Fig 3.j Serif and Sans Serif font |
A short explanation on serifs.
 |
| Fig 3.k Difference between sans serif, serif, and slab serif |
If you don’t know history then you don’t know anything. You are a leaf that doesn’t know it is part of a tree –Michael Crichton
INSTRUCTIONS
EXERCISE
Exercise 1: Calligraphy
Requirements:
A4 graph paper
3.0 Artline Calligraphy pen/s
Name, Student ID, and date on the top left corner
Instructions:
The first thing to do is to try to draw the horizontal and vertical lines, and circles on a paper so that when you draw it on the graph paper it's not very shaky.
Afterwards on a piece of graph paper, place it so that it's landscape. Draw your horizontal lines, having one block as its thickness.
Continue the vertical lines on another graph paper.
Finally, draw your circles on the other graph paper. Remember that circles have thick and thin areas.
After doing the exercises for the calligraphic stroke, start practicing alphabets using the calligraphic hand that you chose.
Each letter should be written in one row where the spaces between each letter should be the same as when you write a word.
After practicing on the alphabets, look up a 3-4 lines poem on the internet. Write the poem on the graph paper as practice, then move it to a blank paper.
 |
| Fig 4.a Practices on horizontal lines |
 |
| Fig 4.b Four trys in horizontal lines, two one blocks and two two blocks |
 |
| Fig 4.c Practices on vertical lines |
 |
| Fig 4.d Four trys in vertical lines, two two blocks and two one blocks |
 |
| Fig 4.e More practices on horizontal and vertical lines |
 |
| Fig 4.f Practices on circles |
 |
| Fig 4.g Practices on alphabets using Roundhand (before feedback) |
 |
| Fig 4.h Practices on alphabets |
 |
| Fig 4.i First try on alphabets (after feedback) |
 |
| Fig 4.j A few more practices on strokes as well as the alphabets and the poem |
Here's the final work before I redid some.
 |
| Fig 4.k Final works on horizontal and vertical lines and circles |
 |
| Fig 4.l Close ups on horizontal and vertical lines, and circles |
 |
| Fig 4.m Horizontal lines |
 |
| Fig 4.n Vertical lines |
 |
| Fig 4.o Circles |
So over the break I decided to redo my vertical lines, so here are the updated final work.
F I N A L
 |
| Fig. 4.p Final work of vertical, horizontal, and circles |
 |
| Fig. 4.q Final work of horizontal lines |
 |
| Fig. 4.r Final work of vertical lines |
 |
| Fig. 4.s Final work of circles |
 |
| Fig 4.t Alphabets |
 |
| Fig 4.u Alphabets a-j |
 |
| Fig 4.v Alphabets k-t |
 |
| Fig 4.w Alphabets u-z |
Moving on to the poem, I searched for some poem on Pinterest and found a lot but I ended up choosing this one which, after doing more researches, turns to be lyrics from Avenge Sevenfold's song 'Welcome to the Family'. Below are some practices followed by final results.
 |
| Fig 4.x Practices on the poem and a few alphabets |
 |
| Fig 4.y Practice on the poem |
Below are the final work before I redo.
 |
| Fig 4.z Final works on the poem |
 |
| Fig 4.1.a Final work of the poem on a graph paper |
 |
| Fig 4.1.b Final work of the poem on a blank paper |
Here are some more practices and the updated work that I did to be submitted as finals.
 |
| Fig. 4.1.c More practices |
 |
| Fig. 4.1.d More practices |
 |
| Fig. 4.1.e More practices |
F I N A L
 |
| Fig. 4.1.f Final work for poem on graph paper |
 |
| Fig. 4.1.g Final work for poem on blank paper |
Exercise 2: Lettering
Instructions:
On the piece of paper that you have, write your name in typefaces that expresses who you are
After writing, create the typeface that you wrote in Adobe Illustrator. You can either do it directly or take a picture of the paper, place it on Illustrator and trace it
Duplicate the artboards a few times and try to change the movement of the typeface on each artboard.
Export all the artboards in PNG files.
Open Photoshop and go to Windows menu and click on Timeline located at the bottom of the options.
Import you files to Photoshop and start animating it by creating a time lapse.
 |
| Fig 5.a Sketches on the lettering |
While we were working on our sketches, Mr. Vinod walked around to look at our works. He said my sketches are good and he suggested that I choose the third one in the picture as it look nice and simple. I followed his suggestion but found out that I'm quite dissatisfied with my work on the first lettering so I tried to do two more.
 |
| Fig 5.b First try on lettering |
 |
| Fig 5.c First lettering thumbnails |
 |
| Fig 5.d First animated lettering |
My first lettering is to show that I'm the kind of person who never stops moving no matter what happens. Hence the constantly moving patterns inside my name. I'm also always going with the flow which is why the patterns as well as the directions inside the lettering are different. But the lettering seems too simple and less expressive so I did the second lettering.
 |
| Fig 5.e Second try on lettering |
 |
| Fig 5.f Thumbnails on the second lettering |
 |
| Fig 5.g Second animated lettering |
Lettering 2 was to show that I'm a weird and moody person so there's a lot of version of me. Letter 'J' shows that I'm always thinking, letter 'A' shows that I'm a very indecisive person (also shown from how I did 3 letterings), letter 'S' shows me when I'm being weird and fun, letter 'L' shows me when I'm in a very lazy mood, letter 'Y' shows me when I'm in a happy and cheery mood, while letter 'N' is me most of the time, expressionless. But the more I look at it the more I thought it doesn't really show my personality so I tried the third lettering.
 |
| Fig 5.h Third try on lettering |
 |
| Fig 5.i Thumbnails of third lettering |
 |
| Fig 5.j Third animated lettering |
The third lettering shows a part of me that's cold and kind of ignorant but at the same time it shows that I take things easily and is always cool about everything which also shows form the slow rotation of snowflakes and how the letters of my name swing from side to side.
F I N A L
After much thinking and consideration, I decided to submit the first lettering for my final submission as it's simple even if it's a little less expressive compared to the other two.
 |
| Fig 5.k Final submission of lettering |
Exercise 3: Type Expression
Words: jumbo, noisy, crooked, hollow, deep, dig
Fonts: Garamond, Janson, Caslon, Baskerville, Bodoni, Serifa, Futura, Gill Sans, Univers
Instructions:
On a piece of paper, sketch out how you want to form the words.
After sketching, start doing it on Adobe Illustrator. However, you are only allowed to use limited fonts as listed above
Once done, animate one of the words like in lettering exercise.
At first, I did the type expression without knowing that we can only choose from a few fonts that were given to us.
 |
| Fig 6.a Sketches on type expression |
 |
| Fig 6.b First try on type expression (before feedback) |
When Mr. Vinod and Mr. Shamsul walked around to inspect our work, I was asked to redo as I used the wrong fonts and that my previous work doesn't really express the words.
 |
| Fig 6.c Second try on type expression (after feedback) |
Before choosing to animate 'deep', I actually hesitating whether to animate 'deep' or 'noisy'. Mr. Shamsul asked me to animate 'noisy' at first because there seem to be an obvious movement as to how the animation is going to be so I animated the word 'noisy'.
 |
| Fig 6.d Animated type expression of noisy |
But then Mr. Vinod said my animated version of noisy wasn't noisy enough so I decided to choose the word 'deep' for the animated type expression as I was quite satisfied with how it turned out although it took me quite some time to stack up the layers on each letter.
 |
| Fig 6.e Thumbnails of type expression deep 1 |
 |
| Fig 6.f Thumbnails of type expression deep 2 |
 |
| Fig. 6.g Animated type expression |
FEEDBACK
Week 1
On the first week while Mr. Vinod was explaining everything to us, he saw that none of us were taking down notes and he recommended that we take down notes as our brain may not remember everything.
Week 2
We were told not to hold our pen to tightly as it may put too much pressure on the way we write so instead, we were told to hold it like we're holding a feather. Mr. Vinod said that my horizontal lines and vertical lines are good and that he showed me how I should write my alphabets.
Week 3
We were told that having an understanding on the calligraphic hand that we chose will help us in improving the way we write as we know how to break down complicated parts of a letter into strokes and practice the strokes to be able to write better. Having self-criticism is also good as well as a lot of practices but there are times when we should know when to stop and be satisfied enough. Time management is also important in finishing out work otherwise it would trouble us in the future. Mr. Vinod also said that my exercises are good.
Week 4
Mr. Vinod and Mr. Shamsul said that all my letterings were good but they both like the first one. I was reminded to update everything on my blog but be sure to point out my final work. While working on my type expression exercise, I was told that I could do better without using decorative fonts because in the beginning I didn't know that we should use fonts that were given. After redoing my exercises and having Mr. Vinod and Mr. Shamsul check on it, I was told that my work was far better than the first try that I did. We were then asked to animate one of the words. I animated the word noise at first but it was said to be too dense and not noisy at all so I added more noise to it. But in the end I submitted the animated version of the word 'deep' because it turned out better. We were also reminded to always do thing clear, neat, and concise.
Week 5
Mr. Vinod and Mr. Shamsul started the class by checking on our final work for exercise on type expression. When my work was checked, I was told that my animation on the word 'deep' was awesome. Mr. Vinod also explained that we need to observe our first try on the exercise and then our second try to find out what we learn in the process and to see what improved our works. We were then shown the works of our seniors on the first project which is to typographically express the content of a 16-pages booklet titled 'Mister Babadook'. The works of the seniors are impressive. We started working on our first project while Mr. Vinod and Mr. Shamsul gave us a feedback on our blog one by one. When it was my turn I was told that my blog weren't quite following the layout, and that I should try to retake the pictures of my work with neutral colors for the background as the pictures that's currently in my blog stood out too much. Since I separated my documentation on the books that I read on another blog post, I was asked to combine them. While working on project 1, Mr. Vinod saw my first page and asked me to try and redo it as I didn't quite align the words well. I was also told that I should try to create less gaps between the sentences as it may create tension.
REFLECTION
Experience
On the first week, it was actually kind of tiring and frustrating as I can't seem to draw the lines straightly and I was having a difficult time trying to familiarize myself with the pen and looking for a comfortable way to hold it. I also drew the lines according to the thickness of the pen so it took two blocks on the graph paper but turns out everyone did only one block so I had to redo. On the second week, I chose a calligraphic hand and became really interested in practicing so I practiced a lot but I get a little annoyed when I can't get the letters to look good. On the third week, I though about different kinds of designs for my name to see which suit me best. I was actually hesitating to choose one of my designs but was suggested to choose a simpler one. On the fourth week, I was having a hard time coming up with type expression for certain words, such as the word 'dig' so I searched online for people digging hoping to find inspiration. On the fifth week, I was quite satisfied with my work and felt that my hard work paid off.
Observation
On the first week, I observed that there are times when I suit a flat nib pen and there are times when I suit a slanted nib pen. I also realized that it's really difficult to draw the lines straightly even when there are lines that can guide us on the graph paper. On the second week, I realized that I suit pen with slanted nib better and that when I draw the lines, I tend to lower my head that it's so close to the paper. On the third week, I realized that even when I was told to chose simple design for my animated typeface, I still wanted to try and animate the more expressive design that I did. Making the animated typeface was time consuming but it gave me a feeling of satisfaction after looking at the final piece. On the fourth week, I observed that I should always ask for opinions and feedbacks from Mr. Vinod and Mr. Shamshul so that I can improve my work and know what should be done to make it better. On the fifth week, I observed that my works after feedback was given improved a lot from my work before the feedback and I was satisfied with the results of my second attempt on the assignment.
Findings
On the first week of doing the calligraphic exercises, I found that I need a lot of practice in order to draw really straight lines. On the second week, I found that I need to put less pressure on my pen for smoother lines. On the third week, I found that I need to put in more effort in order to improve on my skill. I also found that I need to manage my time better to maximize the time I have to finish my works. On the fourth week, I found that animating really takes a lot of time and patience in order to have a very smooth and maximal results. On the fifth week, I found that it was actually quite fun doing the type expression and I'm actually satisfied with my result.
BOOK OF THE WEEK
Week 1&Week 2
Type Object by Barbara Brownie
 |
| Fig 7.a Front and back cover of Type Object by Barbara Brownie |
The first book that I chose to read is Type Object by Barbara Brownie. This book presents typographic objects in three dimensional form. I'm particularly interested in Chaper 7: Light&Shadow because I'm always amazed at how a weird looking three dimensional object can become a typographic work of art with just a presence of a light to cast a shadow on the object. One of the artifacts found in the book that I like is an artwork by Fred Eerdekens 'Could You Suggest Something...' (1999)
 |
| Fig 7.b Work by Fred Eerdekens 'Could You Suggest Something...' (1999) |
In the book, it is also explained that different kinds of lights can form different kinds of typographic art works, where a few examples are shown. For example, some objects may not totally lie on the surface but when there's illumination, it forms some kind of typographic art. It's also interesting how by using a certain material to create an art, the final result can give a different feel to viewer as it reflects light. An example found in the book is Catarina Pinto, Cláudia Gonçalves, Cláudio Rodrigues, Graciela Coelho, and Rui Torres's work called Outype (2009) where they used CDs to create a typographic object. When viewed in the morning it may look a little unappealing. However, when the night comes, they carefully placed lamps in the field, where the CDs reflect it back as it they're the one illuminating the light.
 |
| Fig 7.c Work by a group of artists called 'Outype' (2009) |
Overall, chapter 7 of this book presents quite a lot of examples on how light and shadow are applied in three dimensional object to create a typographic art.
Week 3
An Essay on Typography by Eric Gill
 |
| Fig 8.a Front and Back cover of 'An Essay on Typography' by Eric Gill |
The second book I chose to read is An Essay on Typography by Eric Gill. This book caught my attention because unlike other typography books which contains more pictures, this book is more on essay. I read the second chapter which is about lettering. The chapter started off by explaining what lettering is and I really like the definition of it.
"Letters are signs for sounds."
When I read the definition, something immediately clicked in my mind making me realize that after all this time I've never thought about how whenever people see letters, they are really signs for sounds. This books also explained that English language is done in Roman letters, therefore even if there are a lot of varieties of lettering nowadays, Roman letters remain unchanged. There are also a few pictures in the book which shows the evolution of certain alphabets as well as the forms of a letter that were considered right and wrong.
 |
| Fig 8.b A few pages on the book showing the forms of letter 'A' and 'G' |
Overall this book contains more on the history of how typography evolved from centuries back till the modern era that we are in now. If anyone if interested in learning the history of typography then this book is the right choice.
Week 4
Handfont, Handwork by BNN
 |
| Fig 9.a Front and back cover of 'Handfont, Handwork' by BNN |
The next book I chose to read for the fourth week is Handfont, Handwork published by BNN. This is a Japanese book that shows a series of modernized graphic font giving readers the "analog" taste of graphic. From what I understand, giving the readers the "analog" taste of graphic meaning how in the modern era everything keeps on changing which is why this book consists more of hand writing, drawing, and typewriter type of fonts.
At first I chose this book because I was attracted by the cover. When I open the book and scan a few pages, I became interested because there are a lot of visuals in the book since it shows a variety of fonts that I found appealing. Personally I'm also develop interest in the book because I like how handwritten fonts look. From the book, I found a few fonts that I like such as font 0.63 called Quid Pro Quo designed by David Kerkhoff because it's kind of in a form of a cursive letter but there are repeated lines seen in the capital letters which I really like because it really seem so handwritten. Another font that caught my attention is font .060 called Pee Pants Script design by Kirk Shelton because even if it's design in a 3D kind of way, when it's type out it's in the form of cursive which I found really cool.
 |
| Fig 9.b Font .063 Quid Pro Quo by David Kerhoff |
 |
| Fig 9.c Font .060 Pee Pants Script by Kirk Shelton |
So if anyone asked, I would most probably recommend this book especially if they are looking for a few handwritten fonts for their work or simply for inspiration.
Week 5&Week 6
Mastering Type by Denise Bosler & Basics Design 02 Layout by Ambrose/Harris
 |
| Fig 10.a Front cover of both books |
 |
| Fig 10.b Back cover of both books |
The fourth and fifth book that I chose to read are Mastering Type by Denise Bosler and Basics Design 02: Layout by Ambrose/Harris. I chose these two books because this week's Typography class, Mr. Vinod explained to us what we're going to do on our first project which is to make a book. So I figured I need to learn about the basics of layout on a page as well as kerning, spacing, etc. These two books both contain lectures and topics about spacing, kerning, alignment, layout, etc. However, after reading these two books, they mostly only explain what all the terms are as well as give a few examples about it. There are also works of art by designers where they used different kinds of spacing, kerning, and layout on their work. But I don't really learn anything new that I can apply on my project for Typography which is Mr. Babadook, a children book. Overall both books are good for those who's learning the terms on typography.
Comments
Post a Comment