Typography - Project 1
3/5/2019 - 17/5/2019 (Week 5 - Week 7)
Vun Wan Min (0334263)
Typography
Project 1
LECTURE NOTES
Lecture 5: Letters3/5/2019 (Week 5)
The uppercase Baskerville letter form suggest symmetry, but in fact it is not. There are two different stroke weights and each bracket connecting the serif to the stem has a unique arc.
 |
| Fig. 1.1: Baskerville Uppercase letter "A" |
 |
| Fig. 1.2: Univers Uppercase letter "A" |
A demonstration of the complexity of each individual letterform by examining the lowercase ‘a’ with two seemingly similar sans-serif typefaces, which are Helvetica (left) and Univers (right).
 |
| Fig. 1.3: Comparison of lowercase "a" |
The comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the notable difference in character between the two.
In order to appear to be the same size as the vertical and horizontal strokes to be next to. The curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) of x-height. |
| Fig. 1.4: Example 1 |
 |
| Fig. 1.5: Example 2 |
As recognizing specific letterforms is developing a sensitivity to the counterform (or counter)—the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them. How well you handle the counters when you set type determines how well words hang together—in other words, how easily we can read what’s been set.
 |
| Fig. 1.6: Example of Counterforms |
 |
| Fig.1.7: Example of Contrast |
Lecture 6: Cancelled
10/5/2019 (Week 6)
We did not have lecture. We were formatting our blogs and were still working on Project 1.
Lecture 7: Text (Part 1)
There are 4 types of type:
It is important to understand how different typefaces feel as text. A good typographer has to know which typeface best suits the message at hand. It is because different typefaces suit different messages.
Consider, too, the different textures of these typefaces. Type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke. Sensitivity to these differences in colour is fundamental for creating successful layouts.
The goal in setting text type is to allow for a easy prolonged reading.
Our first project is to format the text of an article. Using Adobe InDesign, we had to copy the text and paste it in notepad before into InDesign.
The article is about making a change in the industry of design. We have to make the layout of the article more attractive.
I was trying to express the manifesto as a change for the 21st century.
Week 6
After showing to Mr Vinod, he said that my form looks awkward sitting there and to look at the form against the white space.
After looking and reading at some references of the layout book. There is a layout called the "Golden Ratio". It has been used throughout history to create design elements that have an ideal visual appeal.
Using the letter "F" as a structure and the rest as a building of the letter 1. It looked like a tower.
With all the words combine, it has formed into the number 1. It's trying to show the priority of creating changes.
Based on the "Golden Ratio", I tried to arrange it in the matter of it. I arranged the words "First Things First" into the numeral number of 1 and "Manifesto 2000" into a stone of a monument.
Week 7
I went with the fourth design (Fig. 4.5) and after having Mr Vinod and Shamsul seeing it, they said to I had to remove the black . If I leave the black I have created a boarder. I have moved the heading and sub-heading, so that it does not clash with the gutter. I also moved the body text, so it does not clash with the boarder and to make it look more centered.
Project 1 (PDF):
Week 7:
General Feedback: Our blog has to write down the caption more specifically.
Specific Feedback: For my project, 1 he said that my layout was good and to get rid of the background. For project 2, he said to learn from the typefamily and create something new from it.
Week 5: InDesign is a new software that I never use before and it has a lot of functions that I am not entirely use to.
10/5/2019 (Week 6)
We did not have lecture. We were formatting our blogs and were still working on Project 1.
Lecture 7: Text (Part 1)
17/5/2019 (Week 7)
‘Kerning’ is the term for automatic adjustment of space between letters. Often mistakenly referred to as ‘letterspacing but in fact, letterspacing means to add space between the letters while the addition and removal of space in a word or sentence is referred to as ‘tracking’.
Uppercase letterforms are drawn to be able to stand on their own, whereas lowercase letterforms require the counterform created between letters to maintain the line of reading.
 |
| Fig. 2.1: Kerning Comparison |
 |
| Fig. 2.2: Tracking Comparison |
 |
| Fig. 2.3: Example of Tracking |
Flush left: It is 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.
Depending on several factors, personal preference, prevailing culture and the need to express play important roles. When setting the field of type, designers keep in mind the typographer’s first job—clear, appropriate presentation of the author’s message.
Centered: It 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. Centered type creates a strong shape on the page, its important to amend line breaks so that the text does not appear too jagged.
Flush right: It 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, it 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.
Justified: Like centering, it 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.
Type that calls attention to itself before the reader can get to the actual words is simply interference, and should be avoided. Quite simply if you see the type before you see the words, change the type.
 |
| Fig. 2.4: Example of Type |
On the left side, the type is appropriate for the invitation written on as it is to celebrate a wedding.
On the right side, the type is clear to read but not a suitable type for an invitation.
It is important to understand how different typefaces feel as text. A good typographer has to know which typeface best suits the message at hand. It is because different typefaces suit different messages.
Consider, too, the different textures of these typefaces. Type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke. Sensitivity to these differences in colour is fundamental for creating successful layouts.
 |
| Fig. 2.5: Comparison of Typefaces |
There are 3 rules that provide an important role:
Type size: Text type should be large enough to be read easily at arms length—imagine yourself holding a book in your lap. Good reading size is between 8 -12 pt.
Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place while type that is set too loosely creates striped patterns that distract the reader from the material at hand. If the type is a point size 9, the leading should increase by 3 or 4.
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. A good line length is between 40 - 60 character per line.
Type size: Text type should be large enough to be read easily at arms length—imagine yourself holding a book in your lap. Good reading size is between 8 -12 pt.
Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place while type that is set too loosely creates striped patterns that distract the reader from the material at hand. If the type is a point size 9, the leading should increase by 3 or 4.
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. A good line length is between 40 - 60 character per line.
 |
| Fig. 2.6: Example of Leading |
A type specimen book shows samples of typefaces in various different sizes. It is to provide an accurate reference for type, type size, type leading, type line length etc.
INSTRUCTIONS
Project 1
Week 5 |
| Fig. 3.1: Screenshot of the article |
The article is about making a change in the industry of design. We have to make the layout of the article more attractive.
 |
| Fig. 3.2: Sketch 1 |
 |
| Fig. 3.3: Sketch 2 |
Week 6
 |
| Fig. 4.1: Screenshot of First Design |
 |
| Fig. 4.2: Screenshot of Error in First Design |
 |
| Fig. 4.3: Screenshot of Second Design |
 |
| Fig. 4.4: Screenshot of Third Design |
 |
| Fig. 4.5: Screenshot of Fourth Design |
Week 7
I went with the fourth design (Fig. 4.5) and after having Mr Vinod and Shamsul seeing it, they said to I had to remove the black . If I leave the black I have created a boarder. I have moved the heading and sub-heading, so that it does not clash with the gutter. I also moved the body text, so it does not clash with the boarder and to make it look more centered.
 |
| Fig. 5.1: Print out of Original Final Design |
 |
| Fig. 5.2: JPEG of Final Design |
FEEDBACK
Week 5:
General Feedback: Our blogs do not need to be customize and needs to provide explanations.
Week 6:
General Feedback: Mr Vinod suggest us to always backup our eportfolio in Word Document, so that our eportfolio's progress won't be gone.
Specific Feedback: Do some layout research and then make another attempt.
You must look at the shape/form against the white space. Can you see how awkward it looks, sitting on the white square space. Good design has clean shapes that sit well against the white space. This doesn’t.
General Feedback: Our blogs do not need to be customize and needs to provide explanations.
Week 6:
General Feedback: Mr Vinod suggest us to always backup our eportfolio in Word Document, so that our eportfolio's progress won't be gone.
Specific Feedback: Do some layout research and then make another attempt.
You must look at the shape/form against the white space. Can you see how awkward it looks, sitting on the white square space. Good design has clean shapes that sit well against the white space. This doesn’t.
Week 7:
General Feedback: Our blog has to write down the caption more specifically.
Specific Feedback: For my project, 1 he said that my layout was good and to get rid of the background. For project 2, he said to learn from the typefamily and create something new from it.
REFLECTION
Experience:Week 5: InDesign is a new software that I never use before and it has a lot of functions that I am not entirely use to.
Week 6: InDesign is still confusing to use.
Week 7: Making a decent layout is not easy.
Observation:
Week 5: I observed that InDesign is hard to use when I am still not use to the functions.
Week 6: I observed that I have much more to learn about the forms and shape against white spaces.
Week 7: I observe that making boxes on the texts can make a difference.
Observation:
Week 5: I observed that InDesign is hard to use when I am still not use to the functions.
Week 6: I observed that I have much more to learn about the forms and shape against white spaces.
Week 7: I observe that making boxes on the texts can make a difference.
Findings:
Week 5: I find that InDesign is interesting because of the new shortcut key I learnt.
Week 5: I find that InDesign is interesting because of the new shortcut key I learnt.
Week 6: I find that making forms and shapes against white shapes are the same as gestalt.
Week 7: I found that having boxes would help me to see the space of the pages.
The Layout Book (Second Edition) by Gavin Ambrose and Paul Harris
This book has many example layouts and it explores the broadest sense by looking at the many elements of everyday life. Looking what is familiar gives sources of ideas and inspirations.
Week 7: I found that having boxes would help me to see the space of the pages.
FURTHER READING
3/4/2019 - 17/5/2019 (Week 5 -7):The Layout Book (Second Edition) by Gavin Ambrose and Paul Harris
 |
| Fig. 6.1: The Layout Book (Second Edition) by Gavin Ambrose and Paul Harris |
 |
| Fig. 6.2: The Golden Ratio (Example 1) |
 |
| Fig. 6.3: The Golden Ratio (Example 2) |
Comments
Post a Comment