Week 5 - Week 7 (Project 1) - A story Book (Babadook Book)

TYPOGRAPHY AND HYPERTEXTUALITY - Project 1 (A Story Book)

27 September, 2017 - 11 October, 2017 (Week 5 - Week 7)

Jesslyn Fabryando (0332213)

Typography & Hypertextuality

Project 1 A Story Book

Lecture 5: Basic introduction to inDesign software
27 September, 2017 (Week 5)

On this week 5, we are starting our first project which is making a story book of 'Babadook'. Mr. Vinod, and Mr. Shamsul introduced us the software that we are going to use to design the book which is Adobe inDesign. They taught us step by step how to format the document, setup gridlines, change measurement units, manipulate the kerning and tracking as well as the short cut keys. We were asked to understand the story line not just placing the words anywhere we want. The line spacing of left, right, bottom and up should be symmetry.

Lecture 6: No lecture
4 October, 2017 (Week 6)

Lecture 7: Letters/ Understanding Letterform

11 October, 2017 (Week 7)

On week 7, we were explained about the complexity of each individual letterform.

Fig. 1. similar sans-serif typefaces - Helvetica and Univers

Figure 1 shows a comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

Fig. 2. comparison between the same sans-serif typefaces when they overlap each other

Fig. 3. letters/ maintaining x-height

Aside from that, things that he mentioned is that curved strokes must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Fig. 4. Counterform

The counterform (or counter) - the spaces describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them. Mr. Vinod mentioned that, we are actually reading a pattern (counterform) on the paper not letters.

Fig. 5. Letters/ Contrast

Classification of contrast. The most powerful dynamic in design - as applied to type, based on a format devised by Rudi Ruegg.

Lecture 8: Font Design

25 October, 2017 (Week 8)

On week 8, we are starting our second project which is designing a font of our own. Mr. Vinod briefly told us the software that we are going to use to design the font which is Adobe Font lab Studio. They haven't taught us how to use the software. For now, we were asked to design a font based on the typeface given by our lecturer as our guide to start designing it.

Fig. 6. Typeface that can only be used for the references of making our own font

We should change or make it better than the original font. As we design our font we need to be consistent from one alphabet to another. Mr. Vinod showed us some examples of the previous batch's font as well as Mr. Vinod's font that he designed.

Fig. 7. Theo Van Doesburg Font (1919)

Fig. 7.1. Theo Van Doesburg Font (2004) Designed by Mr. Vinod

We also have a quick review about ascender, descender, and x-height. Since we are going to design our own font, Mr. Vinod told us the details to make one. The Art-board size should be 1000x1000pt. Make sure overtime we are designing press Command-R to show you the ruler. The width of the alphabet box is 500x500pt. In other words, the x-height should be 500pt high. As for the ascender and descender height it should be half of the x-height therefore it will be 250pt.

Fig. 8. Basic/ Describing Letterforms

All the details that were told by Mr. Vinod is for digitalizing our font from our sketch to Adobe Illustrator.

---

INSTRUCTIONS:
Project 1 : A Story Book

---

WORK PROCESSES:

I began the project by reading over and over again what is the meaning behind the story of Mister Babadook. When I am doing a research about Mister Babadook, I found out that it is a short story book that centers around a monster called Babadook who stalks children at night. It is a horror story which is usually read to children at night before going to sleep.

Mr. Vinod limit the typeface however, we can play around with the font. I chose Serifa Std as my typeset even though we are being recommended to use the typeface which is a sans serif font. I want it to be different so I will go of a Serif font. We were not allowed to distort the letters but we were allowed to rotate and play around with the size of the letter, adjust the spacing between words and letters by making use of kerning, tracking, and letter spacing.

For my font I only use 4 type of it from Serif Std. I will not be touching the font which has Italic in it.

Fig. 9. Four types of font being used for my Babadook Book

Below are the pages of my Babadook book.

Google Drive link: https://drive.google.com/open?id=0B05GMm8yDrJIcGh1dTNCeVY1TEU

After designing the Babadook book and exported it to PDF, we proceed on animating the words using the sam software which is In Design software. It is not necessary to animate all of the words. Just the words that you think it is necessary to animate it to emphasize it and makes it interesting such as the word "DOOK! DOOK! DOOK!". The preset of animation that I used are: Appear, fade in, fly in from bottom, fly in from top, fly in from left, fly in from right. The duration that I set for the words are ranging from 0.5, 0.75, and 1 seconds. After done animating the words, we save it as SWF file which can only be open if you have Adobe Flash.

Google Drive Link: https://drive.google.com/open?id=0B05GMm8yDrJIM0RVYVNsdWlnYmc

The last but not the least things to do is get the book printed out. We were asked to print the thumbnails together with the book. We got the recommendation store to print which is the mummy design printing shop.

Fig. 10. Babadook Book Printed Thumbnails

Fig. 11. Printed Babadook Book

Google Drive Folder Link: https://drive.google.com/open?id=0B05GMm8yDrJITHB0azl2cG1LbUU

---

FEEDBACK:

Week 5 - September 27, 2017
 Starting with my first page for my story book of Babadook, Mr. Vinod told me to add more grid lines so that I will be comfortable in placing the words.

Week 6 - October 4, 2017
As for my draft of Babadook book, my cover page seems to be fine. Mr. Vinod told us that every pages should be different so that it will be eye-catching. He also said my second, third, fourteen and fifteen pages looks the same and It’s not working because there is a diagonal negative space that doesn’t look good. As for that, I need to fix it. Furthermore, he told me that the first few pages, it seems that I am not getting the knowledge but as you reach the middle to end, I am starting to get the knowledge on how the positioning should be. I don’t have any problem with the left and right alignment for all the pages however, I need to look into it more for the up and down spacing so that it will be equal. Some of the words in the pages, I need to emphasize the words more. Mr. Vinod also teach me the short cut keys for viewing the pages without gridlines.

Week 7 - October 11, 2017
Mr. Vinod said that I have the flow of the story. The cover page is really good, but I just need to make a little bit of adjustment to make it looks cleaner and organize. Every single details of positioning really matters. All of my pages have no problem just that I need to change the last four pages because it’s not working. He mentioned I need to make the last 4 pages to be connected to the previous page. For page 10 I made some changes because he said it can be better than this and give a suggestion to make the same pattern as page 7. I called Mr. Vinod to check my work for four times and he said I made a progression wherein I made it slowly and surely. After four times of getting feedback from Mr. Vinod, he give it a go to animate the words.

Week 8 - October 25, 2017
Overall of my Babadook book is relatively good and ok. There is nothing wrong with the placement of the words. However, I miss some sentence in one of my pages that Mr. Vinod spotted that out for me. For the animation of my Babadook book, I have problem with the speed of some pages. There are pages that doesn’t work. The speed is not appropriate for that particular page wherein it tend to make people asleep while seeing the animation. Mr. Vinod said that he saw that there is a big room for improvement that I can make to make it better.

---

REFLECTIONS:

1. Experience

• On the fifth week, we start our first project 2 hours before the class ends wherein we were asked to start our story book of Babadook. I thought it will be easy to make the story book because the outcome of the previous batch is really simple. However, when I tried to do it on my own, it is not easy as what I thought. The example that is shown to us looks very simple and seems so easy but that simple look of the book has a very deep meaning and there is a reason behind all the arrangement of the words. 
• On the sixth week, I find it stressful because every placement of the word should have a flow throughout the pages. I need to figure it out so that the fonts that I am using has a meaning and make sense. I am asked to make a lot of adjustment wherein I need to think in a more smart and creative way. This is so frustrating every time I've made adjustment but still I can't get it right whenever I showed it to Mr. Vinod. I asked Mr Shamsul's opinion and he told me it was okay already however when I Showed it to Mr. Vinod, I got a different feedback that I should still be working on it.
• On the seventh week, I find it less stressful because I got to change only the last four pages. However, still I need to think of other ideas of how I should position my words. I got the chance to get a lot of feedback and tips from Mr. Vinod and being helped by him to make every pages look even better.
• On the eight week, I thought I am done with my work. However, I need to print again because there is a missing sentence that I didn't included. This was a really stressful day for me. For my animation it's my first time doing it so for sure I need to revise it again. But, it's ok for me because by getting a feedback from Mr. Vinod I can see the difference of my task that is being improved and the feedback given really matters wherein it boost me to make it way even better than before.

2. Observation

• On the fifth week, when I am having difficulty to arrange the words and making it symmetry to the previous page I found out that the grid lines is very helpful to maintain a constant and symmetry line throughout all the pages.
• On the sixth week,  I observe that receiving a feedback is really helping you to improve a lot in your word. The outcome is more satisfying. I can see the difference if you will follow the feedback of your lecturer given to you. It does make a difference.
• On the seventh week, I observe that I am getting what Mr. Vinod wants us to do with the positioning of the words for Babadook story book. I got the feel how the words should flow, setting the line spacing and everything according to the story. I can see why every position of the words we place is very important. Unlike before I don't understand what's so good of the positioning of the previous batch's storybook.
• On the eight week, I learnt that the duration of the words appearing really matters to entertain the eyes and preventing people to get bored when they are watching. Every transitions, we need to know whether we should prolong the duration of time of make it faster. 

3. Findings

• On the fifth week, I found out that we cannot judge the book by its cover. The outcome of the previous batch might be simple, however, adjusting all the arrangement might be complicated in order to make sense of the book and fully understand the meaning of the words. I also found out that the grid lines help you better in making the line of the words symmetry to the previous page. The shortcut keys help in adjusting the words (kerning and tracking) that results an impressive outcome.
• On the sixth week,  I did a lot of adjustment in the book after getting the feedback. This results to a better outcome.  Having feedback from the lecturer and look at other people's work opens your creative thinking and tends to give you more idea.
• On the seventh week, for every feedback and tips that Mr. Vinod gave to me is really helpful because you get inspired and the idea of getting your work done even better.
• On the eight week, For every tasks that we do, we should recheck our work to avoid carelessness.

---

FURTHER READINGS (Week 5 - Week 8)

(Third Book) The Fundamentals of Typography by Gavin Ambrose & Paul Harris

I borrowed 'The Fundamentals of Typography' by Gavin Ambrose & Paul Harris to read more about the topic of letterforms and words and paragraph that includes type size, kerning and letterspacing.

Fig. 1. Book 3 about the fundamentals of typography

In this particular book I found out that all alphabets are not the same. Base on my knowledge alphabets only consist of 26 letters. However, that doesn't apply to all. The image below (Fig.2.) it shows the modern Italian alphabet that lacks the letters 'j', 'k', 'w', 'x', and 'y' (pg. 28).

Fig. 2. All alphabets are not the same 

We all know that there is only 26 letters in alphabets. However, before there is 27 letters in total. As seen below there is another character — the ampersand (&) — also, at times, was included among the current 26. And amazingly, the word “ampersand” is probably a byproduct of the symbol’s inclusion.

The ampersand was developed along with the rest of the language, reaching back to the 1st century, when Romans would occasionally combine the letters “E” and “T” into a similar symbol, representing the word “et” meaning “and.” It was included in the Old English alphabet which was still in use into medieval times.

The & sign was, rather, referred to simply as “and” — which made reciting the alphabet awkward. As Dictionary.com notes, it was (and is) odd to say “X Y Z and.” So, they didn’t. Instead, our lexicon developed another saying: “X, Y, and Z"

Fig. 3. Before there is 27 letters of alphabets (Facts)
  http://nowiknow.com/and-the-27th-letter-of-the-alphabet/

Another interesting fact that I didn't know is that before, Old English included the ampersand, it did not include a few letters we use today, notably J, U, and W. J and U did not become their own letters until the 16th century (they were, instead, represented by I and V, respectively), with W becoming a letter independent of U soon after.

Fig. 4. Information about measurements

(pg. 58- 59) Absolute measurements: Measurements of fixed values. The basic typographic measurements, have fixed values. e.g. millimeter, points, picas.

Relative measurements: Ems and end are relative measurements that have no prescribed, absolute size. The size is relative to the size of type that is being set. As the type gets bigger, so does the leading as it is relative to the type size. 

Points: It is an absolute measurements equivalent to 1/72 of an inch or 0.35mm and its creation is attributed to French clergyman Sébastien Truchet (1657-1729). 

Before standardization, typefaces of similar names had varying sizes. A Pica from one type foundry would be exactly 12 points, while the measurement from another could vary by as much as a point. 

Picas: It is a unit measurement equal to 12 points that is commonly used for measuring line of type. There are six picas (or 72 points) in an inch, which is equal to 25.4 millimeters.

As I am designing my Babadook Book it is very important to consider the type size and leading. I learnt that as type gets bigger the line space, or leading, can appear to grow, which means that larger text may need to be set tighter to look comfortable. Aside from that I also learnt about the kerning and letter spacing (pg. 116). As text gets larger, more kerning may be required.

Fig. 5. Kerning and letterspacing

Fig. 6. Understanding the use of Grid (The book of The complete  Typographer by Will Hill - pg. 47)

This page makes me understand the use of grids and I find it very useful to maintain the alignment and also the consistency. (Fig. 6.)

Fig. 7. Examples from the Vox classification system categories

In this examples, I learnt the consistency of letters being made such as the bracket, counter, barb, stress and many more (pg. 106-107). This page will help me a lot as for my references in my second project which is making Font design.

Fig. 8. Typeface anatomy

In different books I found different typeface anatomy which I find it new to me. There are lots of typeface anatomy out there, which is why every book that I read I will definitely find a new type of anatomy. (pg. 57)

This conclude my reading about the fundamental typography which give me knowledge and it's been so helpful resources as I made my Babadook Book. There are also some topics that might be helpful for my second project and in the future. I might want to look back to this book and my other books that I borrowed since it is a good references.