T&H Week 5 - Week 8 Project 1 A Story Book
2/5/17 - 23/5/17, Week 5 - Week 8
Kamal Afiq [0330643]
Typography and Hypertextuality
Project 1 A Story Book
Lecture 5: The personality of type
This week we delved deeper into the small details type designers put into their work. Small differences in the appearance of curves, ligatures, serifs and other parts of letters gives each typeface its own distinct character and personality. Type designers take great care to create letterforms that are both harmonious and expressive. The shape of the counter-form (the negative space of the letterforms) can also distinctly highlight the differences in the shapes of letterforms. He concluded by saying that all the principles of graphic design also apply to that of typography; be it symmetry, contrast, domination, etc.
Design should never get in the way of content in typography. If you see the type before the word, change the type as it is too distracting.
When highlighting text, you can make text bold, italic, use a different font or use color. You can also put a field of color behind the text you want to highlight.
There are many ways to make headings (classified as A, B and C) in text. These headings are often used as a hierarchy, with A coming first and being the most important while C is the least important.
A Heading is above text.
BlahblahblahblahBlahblahblahblahBlahblahblahblah
B Heading is right above text.
BlahblahblahblahBlahblahblahblahBlahblahblahblah
C Heading is imbedded into tho text BlahblahblahblahBlahblahblahblahBlahblahblahblah
'Design of American Captain' by Mike Adkins
A few weeks ago I did research on the history of type and print using the book 'The Complete Typographer' by Will Hill in my previous entry. That book focused on the early history of written calligraphy and the beginning of printed typography. The e-book I read, written by font designer Mike Adkins is more of a case study pertaining to how he design the font 'American Purpose', a font I have personally used in the past in a couple of my own design projects.
In the article he goes through the steps he takes to create the font, mainly focusing on conception and digitization using a vectors in the program CorelDraw. When initially coming up with the idea of the font, the designer has to take into account what kind of font is he creating. Is it to be used as a title in a poster? Body text in a letter? As a decoration? As such in this early of stage the designer has to figure out what kind of aesthetic style he wants to imbue into the design. How the strokes connect, the thickness of the strokes, the appearance (or lack of) serifs, the thickness of the strokes, how the positive and negative space look together, and so on.
When he designed his font, his approach was to build the appearance of all the letters or glyphs around the appearance of the typeface's title itself; "American Purpose". He wanted to give the text long, bold strokes that are somewhat reminiscent of early American 'Gothic' style type. He wanted to to instill the essence of a Gothic font within the letters, but at the same time shape the letters so that they could be versatile enough to be used in a variety of different applications. Because he wanted a prominent bold style in the font, he made it so that the negative space in the letterforms were very minimal.
He then proceeded to scan in the letters he had sketched into the computer, where he then made use of vector tools to draw out the shapes of the individual letterforms in CorelDraw. He began by creating the most important aspects of the shapes first which were the main strokes. He then began to add detailing by rounding corners, filleting edges and adding other minor details that help give his font its own character and personality.
What I realized by the time I had finished reading the article was that the majority of what Mike Adkins had written pertained to the vector digitization of the letterforms, and relatively very little when it comes to conception and actually porting the vector letterforms to a program that turned these graphics into a proper font, e.g. FontLab. Because of this I will have to start looking for another book that will better explain the conception and final development phases of font design.
Kamal Afiq [0330643]
Typography and Hypertextuality
Project 1 A Story Book
Lecture Notes
Lecture 5: The personality of type
This week we delved deeper into the small details type designers put into their work. Small differences in the appearance of curves, ligatures, serifs and other parts of letters gives each typeface its own distinct character and personality. Type designers take great care to create letterforms that are both harmonious and expressive. The shape of the counter-form (the negative space of the letterforms) can also distinctly highlight the differences in the shapes of letterforms. He concluded by saying that all the principles of graphic design also apply to that of typography; be it symmetry, contrast, domination, etc.
Lecture 6: Basic introduction to inDesign
Mr. Vinod and Mr. Shamsul thought us through the basics of using Adobe Indesign today instead of the standard lecture. They taught us how to format the documents, setup guides, change measurement units, manipulate the kerning and leading of text as well as a host of other basics. We were also taught how to create facing pages, how the master-pages worked and how to space out text, lines and paragraphs.
Lecture 7: A look at text
Today we were given a lecture on text. Kerning is the reduction of space between the letters. Increasing the space between letters is letterspacing. Doing both is called tracking. Small spaces between letters is called 'tight tracking' while large spaces are called 'loose tracking'. Uppercase letterforms are drawn to be able to stand on their own, while lowercase letters depend on their counterforms for ease of reading.
Flush left is another term for left alignment of text. It mirrors asymmetrical handwriting. Spaces between words are consistent, allowing the type to create an even gray value.
Center alignment gives a body of text shape and pictoral quality.
It has dragging on both sides of the text.
Dragging is the side of the text that is not perfectly aligned. Flush right places emphasis on the end of the lines.
Justified imposes a symmetrical shape upon text by adjusting the tracking of each line so that all the line lengths look the same. 'Rivers' are white spaces that appear between words in justified text.
Design should never get in the way of content in typography. If you see the type before the word, change the type as it is too distracting.
The goal of setting text type is to allow for easy, prolonged reading. Type size, leading and line length are all important. Here are some tips:
- If your font size is X, your ideal leading should be around X+3.5.
- Squint your eyes to see the gray matter and counterforms of text
- You should try to print on laser jet printers when dealing with text
- Use type specimen sheets to get general ideas for how text would look in different sizes and leading.
- Zoom in to 400% to check how good the leading looks
Lecture 8: A look at text (part 2)
There are a variety of ways to separate text and paragraphs.
- A pilcrow was used in medieval manuscripts to indicate paragraphs.
- Line-spacing (leading) is often used to separate text. Often the amount of line-spacing is the same as paragraph-spacing.
- Line spacing is from the descender of one line to the baseline of the line below.
- Indentation. Often it is the same size as the line spacing, however it can exceed that.
- Extended paragraphs. The first line is normal however every line that comes after is indented.
There are two unpardonable gaffes in the world of typesetting, widows and orphans.
A widow is a short line of text left at the end of a column. An orphan is a short line of text left at the beginning of a column. These should be fixed through re-breaking of paragraphs or adjustment of leading.
When highlighting text, you can make text bold, italic, use a different font or use color. You can also put a field of color behind the text you want to highlight.
There are many ways to make headings (classified as A, B and C) in text. These headings are often used as a hierarchy, with A coming first and being the most important while C is the least important.
A Heading is above text.
BlahblahblahblahBlahblahblahblahBlahblahblahblah
B Heading is right above text.
BlahblahblahblahBlahblahblahblahBlahblahblahblah
C Heading is imbedded into tho text BlahblahblahblahBlahblahblahblahBlahblahblahblah
Cross-alignment is important to generate a sense of harmony between columns of text.
Instructions
Project 1: A Story Book
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!)
Description
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
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!)
Description
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.
- An appreciation of the skills sets and mental discipline required in Typography
- To develop the necessary software skills for the typographic communication.
Work Processes
I began the project by reading more into the subject of the book itself. Mister Babadook is a short story book that centers around a monster called the Babadook who stalks children at night. As such the obvious theme of the book itself is horror, thus I began planning how I could communicate this kind of theme in 16 pages using just type.
We were restricted by Mr. Vinod to using only a few fonts from the Adobe Font Folio, so I settled upon the typeface Caslon. The font I used to create the text in the computer was specifically called Adobe Caslon Pro. The typeface is a serif font, developed by William Caslon in the 18th century. I chose this font in particular because I felt that it had an old-fashioned Victorian look. It's through this some-what creepy and classical kind of font that I want to communicate the theme of horror in my storybook, reminiscent of horror written in the early 19th century.
Because we weren't allowed to manipulate the shapes of the letters themselves, we had to make do by changing their positions on the page. The method I chose to emphasize certain words and phrases was to use different weights and styles of the Caslon font. I also made certain, more meaningful words bigger to further give these words emphasis.
I decided to work directly in inDesign to create my project as I felt that I could make changes more quickly and easily, and also because I decided that I wouldn't really be doing anything particular with my type such as rotation or distortion.
The size of the pages were 210mmX210mm. The page margin was 7mmX7mm. There are 3 columns in each page, separated by a gutter width of 5mm. While I didn't use these columns to line up my type exactly, I did use them as general guides the text would align to so that they would follow the rule of thirds.
The cover page looks deceptively simple, making the reader curious as to the actual subject of the book itself. The following pages make use of alternating font weights and sizes to emphasize different words and phrases. While larger text like 'Babadook' in the 3rd page dominated the reader's attention, other phrases were made particularly smaller so as to require more effort on the reader's end to discern the words and phrases, thus emphasizing these smaller lines of text as well. The most notable example is "A friend of you and me" on page 5.
After my first bit of feedback I began work on the other 11 pages of the book. It was quite a task as I tried to diversify the positioning of the text even more as well as to make the amendments to the book suggested by Mr. Vinod and Mr. Shamsul. The use of varying line lengths, font sizes, weights and layouts helped to create the rest of the book more lively through diversity of typesetting. For some lines of text where I felt that clear emphasis was important, I made the text large and bold. For other cases where I thought that focus was needed but not as obvious, I made the text smaller so that the reader would need to read more closely to discern the message.
After having typeset the rest of the book, Mr. Vinod tasked us with adding some minor animations and interactivity to the book through the use of InDesign's animation tools. Because my book was typeset around the idea of subtlety and the slow building of tension, I only used simple 'fade-in' animations. Text that I felt needed more emphasis had a slower fade-in (2 seconds) while less significant text had a faster fade-in (1 second). Exciting text like "Dook! Dook! Dook!" have no fade-in and just pop into the page. I tried to avoid using flashy animations in order to keep the book simple but interesting. The animations are triggered when the reader presses the same keyboard button used to advance the pages. The animations only play if the book is exported as a digital e-book 'EPUB' format, and when played through an EPUB reader. I then printed out the book at a local Print shop.
We were restricted by Mr. Vinod to using only a few fonts from the Adobe Font Folio, so I settled upon the typeface Caslon. The font I used to create the text in the computer was specifically called Adobe Caslon Pro. The typeface is a serif font, developed by William Caslon in the 18th century. I chose this font in particular because I felt that it had an old-fashioned Victorian look. It's through this some-what creepy and classical kind of font that I want to communicate the theme of horror in my storybook, reminiscent of horror written in the early 19th century.
 |
| Rough idea conception for Babadook layout and font. |
Because we weren't allowed to manipulate the shapes of the letters themselves, we had to make do by changing their positions on the page. The method I chose to emphasize certain words and phrases was to use different weights and styles of the Caslon font. I also made certain, more meaningful words bigger to further give these words emphasis.
I decided to work directly in inDesign to create my project as I felt that I could make changes more quickly and easily, and also because I decided that I wouldn't really be doing anything particular with my type such as rotation or distortion.
 |
| First draft of Mister Babadook's first 5 pages. |
The size of the pages were 210mmX210mm. The page margin was 7mmX7mm. There are 3 columns in each page, separated by a gutter width of 5mm. While I didn't use these columns to line up my type exactly, I did use them as general guides the text would align to so that they would follow the rule of thirds.
The cover page looks deceptively simple, making the reader curious as to the actual subject of the book itself. The following pages make use of alternating font weights and sizes to emphasize different words and phrases. While larger text like 'Babadook' in the 3rd page dominated the reader's attention, other phrases were made particularly smaller so as to require more effort on the reader's end to discern the words and phrases, thus emphasizing these smaller lines of text as well. The most notable example is "A friend of you and me" on page 5.
After my first bit of feedback I began work on the other 11 pages of the book. It was quite a task as I tried to diversify the positioning of the text even more as well as to make the amendments to the book suggested by Mr. Vinod and Mr. Shamsul. The use of varying line lengths, font sizes, weights and layouts helped to create the rest of the book more lively through diversity of typesetting. For some lines of text where I felt that clear emphasis was important, I made the text large and bold. For other cases where I thought that focus was needed but not as obvious, I made the text smaller so that the reader would need to read more closely to discern the message.
 |
| Some screenshots from the third draft of the book. Varying positions of text and more aesthetic alignments are key features of this latest draft. |
 |
| The printed out book. |
Final Submissions
 |
| Final draft of the Story Book assignment |
Feedback
Project 1: A Story Book
In my first bit of feedback, Mr. Vinod said that the reasoning and general thought processes behind how I typeset my book was quite sound. Mr. Shamsul that I could better improve the layout of the type by creating more guidelines and aligning various lines of text together to create a more harmonious aesthetic throughout. Both lecturers said that I should add some more variety to the positioning of the text boxes to further diversity the appearance of the type.
In my second bit of feedback, Mr. Vinod reviewed my book and said my typesetting had generally good contrast and use of emphasis. Despite that, the text flow tended to repeat and started to become repetitive. Similar to the previous week's comments, I had to diversify the layout of the text through more harmonious and diverse alignments, textbox justification and positioning. The spreads seemed to flow and contrast quite nicely together, however they could be made more interesting through varying layouts. For the animation segment of the tutorial, I used simplistic fade ins to animate my text. Mr. Vinod liked the simplicity of my animation, but warned me not to make anything too flashy so as to make the animation seem harmonious with the style of typesetting I had chosen.
In the final bit of feedback, Mr. Vinod and Mr. Shamsul said they were very pleased with the final layout of the text. The type of animation I used for my book was quite satisfactory, and it suited the typesetting well. However, in some pages the animation was far too slow, to the point where the reader could become bored. Furthermore the animation tends to become repetitive, so they suggested I could further improve the animation by making certain lines of text appear together, faster, or just pop-in to add diversity.
In my first bit of feedback, Mr. Vinod said that the reasoning and general thought processes behind how I typeset my book was quite sound. Mr. Shamsul that I could better improve the layout of the type by creating more guidelines and aligning various lines of text together to create a more harmonious aesthetic throughout. Both lecturers said that I should add some more variety to the positioning of the text boxes to further diversity the appearance of the type.
In my second bit of feedback, Mr. Vinod reviewed my book and said my typesetting had generally good contrast and use of emphasis. Despite that, the text flow tended to repeat and started to become repetitive. Similar to the previous week's comments, I had to diversify the layout of the text through more harmonious and diverse alignments, textbox justification and positioning. The spreads seemed to flow and contrast quite nicely together, however they could be made more interesting through varying layouts. For the animation segment of the tutorial, I used simplistic fade ins to animate my text. Mr. Vinod liked the simplicity of my animation, but warned me not to make anything too flashy so as to make the animation seem harmonious with the style of typesetting I had chosen.
In the final bit of feedback, Mr. Vinod and Mr. Shamsul said they were very pleased with the final layout of the text. The type of animation I used for my book was quite satisfactory, and it suited the typesetting well. However, in some pages the animation was far too slow, to the point where the reader could become bored. Furthermore the animation tends to become repetitive, so they suggested I could further improve the animation by making certain lines of text appear together, faster, or just pop-in to add diversity.
Reflections
Project 1: A Story Book (Week 5- Week 8) reflection
Over the past few months we've gotten more into what modern typography is, and its at this point that I started seeing type as more of an art form than just arbitrary things we type into a document and use everyday. I find it fascinating, that each typeface and font we use everyday has their own unique character and personality imbued in their forms. Small details like how the letterforms bend and split, the stresses of strokes and the way they interact with their counterforms truly gives type its own artistic nature. And to think the fonts we use everyday have all this depth and character really has made me appreciate the world of typography more.
With the Babadook assignment, I was able to put into practice all the things I've learnt in the past into my own project. My lecturers helped me a great deal through this process as they helped me spot and fix things that even I couldn't see in plain sight. It's made me further appreciate the importance of having a different perspective when it comes to design work. I've also been able to pick up a couple of conventions typographers often use in their projects, and I feel this knowledge is going to greatly benefit me in the future.
With the Babadook assignment, I was able to put into practice all the things I've learnt in the past into my own project. My lecturers helped me a great deal through this process as they helped me spot and fix things that even I couldn't see in plain sight. It's made me further appreciate the importance of having a different perspective when it comes to design work. I've also been able to pick up a couple of conventions typographers often use in their projects, and I feel this knowledge is going to greatly benefit me in the future.
Further Reading
'Design of American Captain' by Mike Adkins
A few weeks ago I did research on the history of type and print using the book 'The Complete Typographer' by Will Hill in my previous entry. That book focused on the early history of written calligraphy and the beginning of printed typography. The e-book I read, written by font designer Mike Adkins is more of a case study pertaining to how he design the font 'American Purpose', a font I have personally used in the past in a couple of my own design projects.
In the article he goes through the steps he takes to create the font, mainly focusing on conception and digitization using a vectors in the program CorelDraw. When initially coming up with the idea of the font, the designer has to take into account what kind of font is he creating. Is it to be used as a title in a poster? Body text in a letter? As a decoration? As such in this early of stage the designer has to figure out what kind of aesthetic style he wants to imbue into the design. How the strokes connect, the thickness of the strokes, the appearance (or lack of) serifs, the thickness of the strokes, how the positive and negative space look together, and so on.
When he designed his font, his approach was to build the appearance of all the letters or glyphs around the appearance of the typeface's title itself; "American Purpose". He wanted to give the text long, bold strokes that are somewhat reminiscent of early American 'Gothic' style type. He wanted to to instill the essence of a Gothic font within the letters, but at the same time shape the letters so that they could be versatile enough to be used in a variety of different applications. Because he wanted a prominent bold style in the font, he made it so that the negative space in the letterforms were very minimal.
He then proceeded to scan in the letters he had sketched into the computer, where he then made use of vector tools to draw out the shapes of the individual letterforms in CorelDraw. He began by creating the most important aspects of the shapes first which were the main strokes. He then began to add detailing by rounding corners, filleting edges and adding other minor details that help give his font its own character and personality.
What I realized by the time I had finished reading the article was that the majority of what Mike Adkins had written pertained to the vector digitization of the letterforms, and relatively very little when it comes to conception and actually porting the vector letterforms to a program that turned these graphics into a proper font, e.g. FontLab. Because of this I will have to start looking for another book that will better explain the conception and final development phases of font design.
References & Bibliography
- Adkins, Mike. Design Of American Captain. 1st ed. CorelDraw. Web. 21 May 2017.
Comments
Post a Comment