TYPOGRAPHY & HYPERTEXTUALITY: Project 1, A Story Book
May 15, 201728/3/16 – 24/4/17 (Week 5 – Week 8)
Beatrix Leong Yi Wen, (0331043)
Typography and Hypertextuality
Project 1: A Story Book.
Lecture 4 || Letters, Week 5, 24/04/2017
In this lecture, we began learning about the intricate details of letters in typeform. We learnt that minute details in areas such as bowls and stems of a character can make a huge difference and differentiates one font from the other. We also learnt about form and counterform. We were also told that contrast is as important in typography alone as it is in graphic design; such as light and bold text, serif and sans serif, negative and positive to name a few.
Lecture 5 || Adobe InDesign Demonstration, Week 6, 2/5/2017
Unfortunately, I was absent for this class. However, by viewing the links posted under Times and seeking assistance from my classmates, I was able to recover what I missed during the demonstration, which was learning the basics in InDesign such as setting up a document, altering tracking between letters, and how to space out and align text.
Lecture 6 || Text, Week 7, 9/5/2017
In this lecture, we learnt more on the technicalities of spacing between letters, words and lines. We first learnt about tracking, which is the manipulation of space between letters. It can take the form of "kerning" which is to reduce the space between letters, resulting in tight tracking, or adding space between letters which results in loose tracking.
We also learnt about text formatting: flush left (aligned left) which is the most commonly used and the alignment is made to mimic handwriting, flush right (align right) which is generally quite hard to use and should only be used minimally. There is also centered text, which shepherds the words and text into symmetrical "shapes". Justified alignment shapes text to have identical line length in every line. This however can cause "rivers" in the text which can be un-aesthetically pleasing. In this lecture it was also stressed about the importance of simple, easy to read text vs. excessively ornate text that can end up looking messy or hard to decipher.
We also learnt that it is important to consider the situation and brief before deciding on the best way to format the text. We were also taught about line leading and text texture. Line leading refers to the space between lines. The ideal line leading is dependent on the font size- for a font size of X, the leading should be X+3.5 or thereabouts. Text texture refers to how different typefaces feel as text, which is affected by the generosity of the x-height and thee weights of strokes in letters. In this class, we also continued to work on our Mr Babadook assignment.
Week 8: Mid-sem break
Week 8: Mid-sem break
PROJECT 1 (20%)
Instructions:
The Brief:A Story Book.
Duration of Assignment3 Weeks (Briefing on Week 5)
DEADLINE
Week 8 (16 May 2017)
Description
Text:
Title: Mister Babadook
If it's in a word or in a look
you can't get rid of the Babadook.
If you're a really clever one
and you know what it is to see
then you can make friends with a special one,
a friend of you and me.
His name is Mr Babadook
and this is his book.
A rumbling sound then 3 sharp knocks
ba Ba-ba DOOK! DOOK! DOOK!
That's when you'll know he's around.
You'll see him if you look.
See him in your room at night
and you won't sleep a wink.
(whisper: Let me in!)
I'll soon take of my funny disguise
(whisper: Take heed of what you've read...)
and once you see what's underneath...
YOU'RE GOING TO WISH YOU WERE DEAD.
I'll WAGER with YOU, I'll MAKE you a BET.
The MORE you DENY the STRONGER I GET
(LET ME IN!)
You'll see him if you look.
See him in your room at night
and you won't sleep a wink.
(whisper: Let me in!)
I'll soon take of my funny disguise
(whisper: Take heed of what you've read...)
and once you see what's underneath...
YOU'RE GOING TO WISH YOU WERE DEAD.
I'll WAGER with YOU, I'll MAKE you a BET.
The MORE you DENY the STRONGER I GET
(LET ME IN!)
In this project you will be asked to express typographically the content above in a 16-page booklet. No images are allowed. However some very minor graphical elements, i.e. line, shade… might be allowed.
Utilising the knowledge gained in the exercises and other modules from the same semester, you will use illustrator to typographically compose and express the text within a given size.
And, upon completion you will place your illustrator artworks in InDesign to create a digital ebook utilising the navigation and animation settings to enhance the expressions of your composed text.
Requirements
The student must document the above progression in their eportfolio and A4 hardcopy
portfolio. The results of the phases must be collated and presented. A thumbnail printout of
all 16 pages, and an ebook for desktop viewing must be produced.
Submission
- All gathered information (failures, successes, epiphanies, sketches, visual research, printouts, websites, images, charts, etc.) documented logically and chronologically in the A4 Clear Sheet folder. The works must be labelled and dated.
- All gathered information (failures, successes, epiphanies, sketches, visual research, printouts, websites, images, charts, etc.) documented logically and chronologically in the eportfolio for the duration of the project in one post.
- Generated eBook uploaded to the eportfolio and the relevant printouts of the artwork in the determined formats, in the hard copy portfolio.
Objectives
- An appreciation of the skills sets and mental discipline required in Typography
- To develop the necessary software skills for the typographic communication.
A Story Book (Mr Babadook) Progress Work
Before I started work on the project, I decided to research about the history of Mr Babadook. To my surprise, I found out that it's actually not a real book. It is a fictional book that features in a horror movie called The Babadook, where a mother and a child read a scary book together called Mister Babadook. However, soon the story becomes a little too real.
 |
| Figure 1: The book from the "The Babadook" |
 |
| Figure 2: Still from "The Babadook" |
At first, I used Gill Sans font. I used too many different versions of the font and did not align the text forms properly or have proper balance or comtrast, which unfortunately was quite disastrous:
 |
| Figure 3: First Mr Babadook attempt |
Mr Vinod was not pleased with my outcome and asked me to re look my work as it was completely missing alignment, contrast, balance, layout and was very lacking generally. At first, I was very confused and unsure of what he meant but after studying others' work, I was able to get an idea of what I needed to do I regrouped and began fresh.
I consulted the book Typographic Systems by Kimberly Elam which was one of the books I mentioned in my Exercises post earlier. Studying the different systems of arranging text was very helpful and I could finally understand properly about how to balance text, create contrast and emphasis, indicate a sense of movement, and ecetra. I made some notes as I went through the book more thoroughly this time and planned how to incorporate my newfound knowledge into Mr Babadook.
As we are limited to using only a few fonts in our Typography assignments, I eventually settled for choosing Janson instead of Gill Sans. I chose this font because it is a serif font which I thought would be more suitable for making a book solely from text and no images or colours, as the serif would make it look more interesting. It also looks a little gothic and serious which suits the horror theme but has a little mystery and quirkiness to its look as well. I found with this font and a better idea of what to do, my work ended up turning out much better. Below are some screenshots of my Mr Babadook page. Eventually, we also animated our books so they would be interactive ebooks.
 |
| Figure 4: Second version of Mr Babadook |
There was a lot I ended up changing this time. Apart from changing the font, I had to come up with a whole new strategy to design the book again. I made sure to pay attention to details such as alignment which I used the ruler tool in InDesign to assist me, contrast and balance both within one page and the relationship between the two pages of the same spread. From studying different typographic systems, I feel it was helpful to give me ideas and guidelines on how to place the text in a functional, meaningful and aesthetically pleasing way.
Lastly, due to feedback from Mr Vinod and Mr Shamsul, I had to redo some pages one final time as there were certain things they were not satisfied with, namely that the page layouts did not follow a common theme and certain spreads had pages that did not work well together. This time, I simplified it even further and paid closer attention to following a common unified theme and made sure everything looked as cohesive as possible. I also added another spread as I felt some spreads were too cluttered.
Finally, after our design was approved we proceeded to print out our books and bind them into a physical copy.
Requested folder with all Mr Babadook work, ebook and animation files:
Lastly, due to feedback from Mr Vinod and Mr Shamsul, I had to redo some pages one final time as there were certain things they were not satisfied with, namely that the page layouts did not follow a common theme and certain spreads had pages that did not work well together. This time, I simplified it even further and paid closer attention to following a common unified theme and made sure everything looked as cohesive as possible. I also added another spread as I felt some spreads were too cluttered.
 |
| Figure 5: Final Mr Babadook |
Finally, after our design was approved we proceeded to print out our books and bind them into a physical copy.
Requested folder with all Mr Babadook work, ebook and animation files:
Feedback ||
Week 6:
I did not receive any feedback as I was absent.
Week 7:
There is a lack of balance, contrast and alignment in my
work as well as lacking generally in quality. The quality of my work has to be
improved which I could work on by viewing my classmates’ work, specifically
those whose work is of a high standard. Additionally, the text appears very “scattered”.
Week 8:
The work still lacks balance between pages of certain spreads although some pages are good. Some animations are unnecessary. One of the pages with a justified text box (starting with "...That's when you'll know") has rivers in it. I also needed to adjust the letter spacing for "YOU WERE". Mr Shamsul also adviced me to change the sequence of the "LET ME IN" animation as it seemed to be read as "IN ME LET".
The work still lacks balance between pages of certain spreads although some pages are good. Some animations are unnecessary. One of the pages with a justified text box (starting with "...That's when you'll know") has rivers in it. I also needed to adjust the letter spacing for "YOU WERE". Mr Shamsul also adviced me to change the sequence of the "LET ME IN" animation as it seemed to be read as "IN ME LET".
Reflection ||
Experience:
This assignment has definitely been the most difficult one yet of Typography class. I feel this is because of certain rules such as we are not allowed to use colour or images at all. I personally find this restricting as aesthetically speaking, I prefer things to be vibrant and pictorial in nature.
Observation:
I observed that one of my most obvious weaknesses for this assignment is that I am overly partial to complicated fonts, layouts and having too many elements going on at once. I need to learn to be able to keep things clean, simple and organised and pay more attention to fine details. Once I attempted to do so, I feel my work improved. I noticed that consulting reference design books and making notes or sketches helps. I observed that in my opinion, our books look better and more professional once printed out and binded as opposed to just on screen. I noticed that for the animation I tend to graviate towards very large and visible movements; I need to try to be more subtle.
Findings:
In conclusion, I find that this assignment has taught be the value of simplicity, organisation and details. I am sure this will be beneficial to me in future assignments. Maybe to further improve, I should try to incorporate simple designs similar to this in my work. I have also realised that research, sketches and brainstorming is a must have that I cannot afford to skip in the future.
Books & Articles:
5 Favourite Fonts for Interior Book Design by Joel Friedlander
 |
| Figure X: Website screenshot |
I thought it would be a good idea to do some research on how fonts are used in books. I searched online and came across some articles, this being one of them. The article talks about how the biggest decision in designing a book is to pick the book's body typeface to make it easy to read while conveying the author's message and intention. The style and fashion of the font is also important. The article states that the most popular fonts for interior book design in order are Garamond, Janson, Bambo, Caslon and Electra.
Top Ten Typefaces Used by Book Design Winners by FontFeed.com
 |
| Figure X: Website screenshot |
When comparing the lists, I found it interesting that the lists are completely different except for Garamond and Electra. From this, I can derive two educated assumptions, one is that Garamond and Electra are probably very commonly used and popular, two is that it is impossible to say exactly what are the most popular fonts to use for books as there are so many books, so many fonts, and so many differing opinions in the design world; which is not necessarily a bad thing.
0 comments