Typography (Week 6 - Week 8)

02/05/17 - 23/05/17 (Week 6 - Week 8)
Agnes Cherine Viridiana, (0331332)
Typography
Project 1 (20%)

---

Lectures :

Lecture 1 (02/05/17) : Instructions 
We learn how to make new page/new layers and not to put stuffs in master page because it’ll appear on all of your pages. We learn how to make a well organized guidelines by using the master page. Mr.Shamsul also teach us a lot of shortcuts for Windows and Mac such as:

• Make your text bigger press ctrl/command+shift/alt+>
• Make it smaller press ctrl/command+shift/alt+>
• Add space between every alphabets press alt/option+right arrow(→)
• Reduce space between every alphabets press alt/option+left arrow(←)
• Add space between paragraphs press alt/option+down arrow (↓)
• Reduce space between paragraphs press alt/option+up arrow (↑)
• To edit your tab press ctrl/command+shift/alt+t

Lecture 2 (09/05/17) : Text 
Letter spacing = adding space between letters.

Kerning = reducing space between letters. 

Tracking = addition and removal space in word or sentences. 

Kerning and letter spacing is not the same.

Kerning

Normal tracking, loose tracking, tight tracking

Tracking

Normal tracking = as how it’s designed by the designer

Uppercase letterforms are designed to stand individually and not designed for counterform.

Formatting text :

• Flush left: This format most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even gray value.
• Centered: This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature. Because centered type creates such a strong shape on the page, its important to amend line breaks so that the text does not appear too jagged.
• Flush right: This format places emphasis on the end of a line as opposed to its start. It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right.
• Justified: Like centering, this format imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters. The resulting openness of lines can occasionally produce ‘rivers’ of white space running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.

Mr. Vinod say we usually read shape and form, not the letters. Typographers first job is to make clear,appropriate presentation of the author’s message It’s important to practice your sensitivity, you can practice it with half close your eyes and see if it’s too dark, too light or just right. 

Text

Type size: Text type should be large enough to be read easily at arms length—imagine yourself holding a book in your lap.

Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.

Line Length: Appropriate leading for text is as much a function of the line length as it is a question f type size and leading. Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 35-65 characters. Extremely long or short lines lengths impairs reading.

What you see on screen is what you see when it’s produced. Always print and judge before you choose. Here’s more shortcuts for Windows and Mac :

• To centered your paragraph press ctrl/command+shift/alt+c
• To control your text box press ctrl/command+b
• To select word tap 2x on the word
• To select the whole line tap 3x on one word.
  

Lecture 3 (23/05/17) : Text 
Continuing from lecture 2 lesson when you're typing something that make in paragraphs you have to check if you have even tone rather than dark tone or light tone, you'll need to half close your eye when you're checking your paragraphs.
Technically leading and line space is different. For example line space is 12pt, then the paragraph space is 12pt.

Line spacing vs leading

As for indent and line spacing usually people will make the same size for both but there're no reason to say you can't make the size different, in some conventions they make the different size for both.
In traditional typesetting (the kind that still endures among conscientious commercial publishers), there are two unpardonable gaffes—widows and orphans. Designers (specifically those that deal with large amounts of text in websites or books on online magazines or printed magazines, news papers or online journals) must take great care to avoid the occurrence of the the above mentioned. A widow is a short line of type left alone at the end of a column of text. An orphan is a short line of type left alone at the start of new column.  So a way to avoid widow and orphan you might want to do line spacing and

Example of widow and orphan

When you highlight text within a column of text there're different kinds of emphasis require different kinds of contrast. You can make it italic,bold with same typeface, bold with different typeface or use different color. If you choose bold with different typeface you'll need to decrease the size of your highlighted text to match the x-line.You can also do highlight by placing a field of color at the back of the text but remember highlighting text by placing a field of color at the back of the text, maintaining the left reading axis (right example) of the text ensures readability is at its best. Sometimes it is necessary to place certain typographic elements outside the left margin of a column of type (extending as opposed to indenting) to maintain a strong reading axis. Quotation marks, like bullets, can create a clear indent, breaking the left reading axis. Compare the indented quote at the top with the extended quote at the bottom.

X-line

There are many kinds of subdivision within text of a chapters. In the following visuals these have been labeled (A, B and C) according to the level of importance. A typographers task is to make sure these heads clearly signify to the reader the relative importance within the text and to their relationship to each other. 

A head indicates a clear break between the topics within a section. In the following examples ‘A’ heads are set larger than the text, in small caps and in bold. The fourth example shows an A head ‘extended’ to the left of the text. 

‘A’ head

The B head here is subordinate to A heads. B heads indicate a new supporting argument or example for the topic at hand. As such they should not interrupt the text as strongly as A heads do. Here the B heads are shown in small caps, italic, bold serif, and bold san serif.

B head

The C heads, although not common, highlights specific facets of material within B head text. They not materially interrupt the flow of reading. As with B heads, these C heads are shown in small caps, italics, serif bold and san serif bold. C heads in this configuration are followed by at least an em space for visual separation.

C head

Putting together a sequence of subheads = hierarchy.

Obviously there is no single way to express hierarchy within text; in fact the possibilities are virtually limitless.

A,B,C head

---

Instruction

PROJECT 1 (20%)
 

The Brief

A Story Book

Duration of Assignment
3 Weeks (Briefing on Week 5)

DEADLINE
Week 8 (16 May 2017)

Description

Text

Tittle: 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!)

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

1. 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.
   
2. 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.
   
3. Generated eBook uploaded to the eportfolio and the relevant printouts of the artwork in
   the determined formats, in the hardcopy portfolio.

Objectives

1. An appreciation of the skills sets and mental discipline required in Typography
   
2. To develop the necessary software skills for the typographic communication.
   
3. To introduce the use of Grids, layouts and page flow.

---

Project 1

Software needed:

1. Adobe InDesign

Step by step:

1. Open your Adobe InDesign
2. Create a New File with 210x210mm size, 16 pages, 3 coloums with 5mm gutter, 3mm bleed and pick on the facing pages
3. Double click on  your first side master pages and click the next side
4. Click layout, create guides, make 3 rows with 5mm gutter and pick one fit to margins
5. Start making your book
6. After your're done with the content on the top of InDesign on the left side of the search panel you'll need to change it to Digital publishing and you'll find the animation in there
7. Start doing your animation

Making new document

Making the row

Here is the screenshot that I take I also attach the file you can check it in the Google Drive link Final Work

First trial

Title (1st page)

2nd and 3rd page

4th and 5th page

Second trial with some version (only saved certain pages)

Second trial

Another version from the second trial

Final work (third trial)

Title page (1st page)

2ndand 3rd page

4th and 5th page

6th and 7th page

Mr. Babadook Final book

---

Feedback 
 

Week 6 
It's hard to read because the words are messy, random and too small. Some page is good bur mostly no,because it's messy and too much space. I put all the words inside the column and Mr. Vinod say columns are not jail, no need to follow the columns and I need to express what the paragraph means. So I redo my work again and Mr. Vinod say it's better than the first one but some are still floating, some works well. I need to work more on the contrast and balance.

Week 7
Most of the problem are in contrast, size and spacing, tacking. But some of it are good.

Week 8 
Good flow, good layout adjustment, good balance and contrast but there are certain mistakes on animation movement because it's too slow and Mr. Vinod say he might fall a sleep in the middle of reading it. Mr. Vinod say I've make a lot of improvement with the work that I've done from my previous works till now.

---

Reflection

Experience 
At the first I really don’t know what to do with the story book and I even make a fatal mistake because I put everything inside the columns so it messed around everywhere, it end up super bad and I redo the thing but it still doesn’t work so I keep on redoing everything.Doing the animation is not as easy as just clicking whatever you need, you need to know which one really need to be animated and what kind of animation will fit. So I'm doing the animation on my mid-semester break because I cancelled my plan to go back to my country so I can do my assignments, it takes few days to finish because I keep on re-checking if it fit or not

Observation 
It’s actually quite hard for me to figure out a new idea in a short time so I find my very first work will be the worst out of all after the redo. But it’s possible for me to come out with a few ideas in a week or more so I need to make sure that I use the time not t o procrastinate. I used to add animation on something when I'm still in primary school but I did the animation on every single thing and end up make it very complicated, so this time I try not to make animation on every single thing. It's good to always recheck your work to get a produce something good,well even if my work is not as good as the other but I'm happy with the result.

Findings 
Instead of redoing everything that takes 1 week to get the new idea I try to make a view versions of it so I can ask like which one works better so I’ll end up redoing just a few thing that I think I don’t need to redo but actually still need to redo it because it doesn’t work. Checking on my work is also good to make sure whether I think my work is good or almost good or even still bad. I've made a right decision not to go home because Mr. Vinod and Mr. Shamsul say my work is good and Mr. Vinod also say I improve a lot.

---

References
 
Drawing Letters
Lettering by  Carolina Amell

Front Cover

Back Cover

I really recommend this book to those who need ideas and reference for their work. Well it doesn’t contain much words but a lot of picture, which is also good. I also take note on two designers which I like their work.

Sel Thomson's design

“Usually I sketch a few concept and then scan and trace in Adobe Illustrator. Sometimes I live trace, but usually I redraw the design with the pen and shape tools, and then add textures at the end.”-Sel Thomson

Daniele Tozzi's design

“All my artworks are and made (pentel pen brush on paper and molotow acrylic on canvas) and I never use any digitalism to finalize them. I also do walls sometimes since my passion for street and graffiti can’t be stopped.”-Daniele Tozzi