TYPOGRAPHY - PROJECT 1
Typography
18/09/19 - 02/10/19
(Week 4 - Week 6)
Natalie Leong Yuin May (0334127)
Typography Project 1
Lecture Notes
Lecture 4 - Text (Part 2)
To start off, Mr. Vinod has a run through of last week's lecture:- Letterspacing - adding space between letters
- Kerning - decrease space between letters
- Tracking - both letterspacing and kerning
He showed us how people back then indicated paragraphs, with the use of a pilcrow (¶) which leads to saving space. Below is an example he showed us in the lecture (Fig. 4.1).
 |
| Fig 4.1: Pilcrow (¶) used back then. |
Mr. Vinod then said that when creating paragraph space, and in a scenario where we are using a 12 pt typeface, we should give the text a 12 pt leading. He then compared a terminology in Microsoft Word as compared to what designers use. Line spacing is used by Microsoft Word, but designers use leading. However, they are essentially referring to the same thing.
For designers, leading is the spacing between two lines of text whereas line spacing is measured at the end of the line of text to the end of the next line of text. Unfortunately, much of the people in the world use 'line spacing' because it was made famous by Microsoft Word. To determine the correct leading to use, we should add 3 pt to the size of the font. For an example if we are using a 12 pt typeface, the leading is 15 pt. Below is a picture showing an example of line spacing (Fig. 4.2).
 |
| Fig. 4.2: Line spacing. |
Mr. Vinod mentioned another way of indicating paragraphs, through the use of indentations. Indentations were initially used by newspapers to save space. Indentations should be the same pt size as the typeface. Below is an example of what indentations look like (Fig. 4.3).
 |
| Fig. 4.3: Indentations. |
Paragraphs can also be indicated through the opposite of an indentation, called an extended. Mr. Vinod mentioned that this type of hanging style was usually used in the APA citation style for reference list. A figure below shows an example of extended (Fig. 4.4).
In traditional typesettings, there are generally two unpardonable gaffes (wrongdoings) - widows & orphans (Fig. 4.5).
 |
| Fig. 4.4: Extended. |
 |
| Fig. 4.5: Widows & orphans. |
Lecture 5
There was no lecture as Mr. Vinod looked through our progress for Project 1 and told us to focus on doing it. He and Mr. Shamsul was also going through our e-portfolios to to mark them.
Instructions
Mib Gcd60104 Typography Bdc... by Natalie Leong on Scribd
Project 1
Week 4
As Mr. Vinod advised us to read the text to understand it clearly and then express the tone of the article through our layout or headline expression. After my first reading, what I understood from it was:
- Even if I am not directly involved in something, it will affect others.
- Ethics feels very strict and involves honor
- The importance of moral values
- Self-reflection is important
But I could not think of how to express those four points through a layout so I made a few sketches (Fig. 4.1).
 |
| Fig. 4.1: Sketches of ideas. |
Then, I thought that maybe I should try to reflect 'water' or 'reflection' and tried to make the text surrounding the title to look like a ripple since I thought that they key point to maintaining a code of ethic is to self-reflect and that it's like a ripple effect. (Fig. 4.2).
Since I had no idea what to do, I just designed a really simple layout. For this layout, I thought that to express how ethics is 'straight' or 'serious', I made all the columns at the same height to look straight (Fig. 4.3).
Fig. 4.4: First attempt; ethics is 'straight' or 'serious' (PDF).
Suddenly, I had an idea during dinner which I then quickly sketched out. I wanted to reflect how a designer values his ethics at the start of their career but bit by bit, they start throwing their ethics out the window, 'like a slippery slope'. (Fig. 4.5).
 |
| Fig. 4.2: Sketches of ideas. |
Since I had no idea what to do, I just designed a really simple layout. For this layout, I thought that to express how ethics is 'straight' or 'serious', I made all the columns at the same height to look straight (Fig. 4.3).
 |
| Fig. 4.3: First attempt; ethics is 'straight' or 'serious' (JPEG). |
Fig. 4.4: First attempt; ethics is 'straight' or 'serious' (PDF).
 |
| Fig. 4.5: Finalized sketch; a designer may slip after walking a straight path for awhile. |
 |
| Fig. 4.6: Second layout, first variation; a designer values their ethics at the start but starts going down a slippery slope (JPEG). |
After receiving feedback from Mr. Vinod, I changed the headline (Fig. 4.6).
 |
| Fig. 4.8: Second layout, second variation; a designer values their ethics at the start but starts going down a slippery slope (JPEG). |
 |
| Fig. 4.10: Second layout, third variation; a designer values their ethics at the start but starts going down a slippery slope (JPEG). |
 |
| Fig. 4.12: Second layout, fourth variation; a designer values their ethics at the start but starts going down a slippery slope (JPEG). |
 |
| Fig. 4.14 Second layout, fifth variation; a designer values their ethics at the start but starts going down a slippery slope (JPEG). |
Fig. 4.15 Second layout and variations. (PDF).
I showed it to Mr. Vinod towards the end of the class and he gave me some more feedback, so I changed it again.
 |
| Fig. 4.16: Third layout, first variation; a designer values their ethics at the start but starts going down a slippery slope (JPEG). |
Week 5
Over the weekend, I played around with more fonts and layouts. The layouts all stem from the same idea. For some of the concepts, I wanted to see what the layout would look like with and without lines. I also tried to use different fonts for the headline.
 |
| Fig. 4.17: Third layout, second variation; a designer values their ethics at the start but starts going down a slippery slope (JPEG). |
 |
| Fig. 4.18: Third layout, third variation; a designer values their ethics at the start but starts going down a slippery slope (JPEG). |
 |
| Fig. 4.19: Third layout, fourth variation; a designer values their ethics at the start but starts going down a slippery slope (JPEG). |
Fig. 4.20: Third layout & variations (PDF).
The layout Fig. Fig. 4.21, Fig. 4.22, Fig. 4.23 and Fig. 4.24 all have the same layout but different typefaces. For Fig. 4.21 and Fig. 4.22, the typeface used for the headline is ITC New Baskerville, while for Fig. 4.23 and Fig. 4.24, the typeface used is Futura Std. |
| Fig. 4.21: Fourth layout, first variation; a designer values their ethics at the start but starts going down a slippery slope (JPEG). |
 |
| Fig. 4.22: Fourth layout, second variation; a designer values their ethics at the start but starts going down a slippery slope (JPEG). |
 |
| Fig. 4.23: Fourth layout, third variation ; a designer values their ethics at the start but starts going down a slippery slope (JPEG). |
 |
| Fig. 4.24: Fourth layout, fourth variation; a designer values their ethics at the start but starts going down a slippery slope (JPEG). |
Fig. 4.25: Fourth layout & variations (PDF).
So far, I really like the typeface Futura Std because it looks modern but ITC New Baskerville looks elegant and professional. Furthermore, I feel that the lines make the layout look neater and organized.
I tried a different layout where the first page is the cover page which contains the headline and the second page is the rest of the text. This time, I expressed the tone or main point of the article through the headline instead of the text.
 |
| Fig. 4.26: Fifth layout, first variation; a designer's ethics slowly falls (JPEG). |
 |
| Fig. 4.27: Fifth layout, second variation; a designer's ethics slowly falls (JPEG). |
Fig. 4.28: Fifth layout & variations (PDF).
Feedback
Week 4
General feedback: Mr. Vinod said that we had 2 submissions: the A4 size digitization of six words: emerge, clean, party, explode, sneeze and gigantic. He also said that iit was fine f we wanted to put our reflection in weeks. Next, Mr. Vinod assked all of us to download all of the nine typefaces he uploaded into the Google Drive. After that, Mr. Vinod also told us that we had to export the A4 digitization as a jpeg with 72dpi and then embed it onto our e-portfolio as a PDF as a lot of us did it wrongly.
Specific feedback:
Digitized sketches of six words: Mr. Vinod commented that my digitization of sneeze could be and told me to export the piece as a jpeg.
Gif of digitized sketch: I digitized the word 'gigantic' and Mr. Vinod said that I exported the gif wrongly, which caused it to have a white background. Overall, he liked how the GIANT landed hard enough to cause the gic to jump.
Project 1: I asked Mr. Vinod whether I could use 2 different fonts for the headlines which were from the 9 type families allowed. He said that I could.
"However note that the more types you use in one artwork the more challenging it is to manage the combination and layout."
Week 5
General feedback: Mr. Vinod warned us about using a paragraph space and indentations with the text being left aligned. He said that it was unacceptable as now both sides are ragged. Additionally, he also told us to have the body of text connected so that we won't make mistakes like accidentally deleting a sentence which will have a heavy cost.
Specific feedback:Mr. Vinod commented that my font size was too big from a design perspective and that the body of text was too close to the line. He also said that the formatting of text was bad as the text was ragged. He also suggested that I should explore on expressing the slope for the headline.
Week 6
Specific feedback: Mr. Vinod and Mr. Shamsul viewed all 3 of my different layouts. They said I did a good job for the first one and said the second layout was interesting but they liked the last one best because the headline was more expressive. Mr. Vinod and Mr. Shamsul also said that the typeface ITC New Baskerville works for the tone of the article. Mr. Shamsul said that the lines made the layout look neater, but Mr. Vinod found it unnecessary. Mr. Vinod showed me how to do cross-alignment, as the size of my body text was 9pt, with an 11 pt leading but my the size of my headline was 16pt with 19pt leading. He explained that for both the body text and the headline is cross-aligned, I should have the leading for the title to be 22pt (which is double the size of the leading for the body text). However, this will significantly shift my body text down until the text might overflow. So to solve this, I could make the size of the headline smaller.General Feedback: "Everyone get a mouse." - Mr. Vinod
Mr. Vinod also told us to put all the variations in one file, not separate PDF files.
Reflection
Week 4
I feel pretty satisfied with my gif for GIgANTic however I feel a bit dissatisfied with my digitization of 'explode', 'sneeze' and 'party'.
Week 5
Mr. Vinod said he didn't like the lines because it's thick and I don't really like it too but I didn't have any idea on how to make it less plain. Even after his suggestion I still feel dissatisfied with the layout.
Week 6
I was worried about the fourth layout so I created a fifth layout. But after designing it, I still feel dissatisfied as I thought I could do better, but Mr. Vinod and Mr. Shamsul chose the fourth layout out of all the rest.
Observations
Week 4
I noticed that quite a lot of my classmates animated 'explode'. However, I did see one gif in particular that stood out, and it helped me look at a different perspective of animating 'explode' even though I animated 'gigantic'. I looked through someone of my classmate's blogs and I found out that everyone really has a different way of expressing typography, and I did get some inspiration for ideas from looking at their documentation and their thought process.
Week 5
I noticed that a lot of our classmates this time seem more worried than usual, perhaps it's because we are finally put to the test to apply what we've learnt in class.
Week 6
I noticed that ITC New Baskerville actually goes very well with the article I chose because it gives off an elegant, business-like, professional feel. I looked at some of my classmates' blogs and I did find some inspiration from there. A lot of them gave their layouts a minimalistic feel which looks neat and nice.
Findings
Week 4
I realized that to design better, I have to observe more. But yet I feel a bit conflicted because I'm afraid of accidentally or subconsciously copying someone else's design. Also, I'm starting to realize the importance of documentation. It's an important habit to have especially if I'm stuck in coming up with a design, I can go back and read my thought process again which might help in giving a spark in ideas.
Week 5
Coming up with layouts is a lot harder than I thought. I designed the magazines for my MPU subjects Hubungan Etnik and Bahasa Kebangsaan A but they're nothing compared to this. Back then I used a lot of color and relied on visuals but now having to design in only black and white really brings it to a whole a new level. Even the placement of text is important to convey a tone, which was something I never considered back then.Week 6
I realized that sometimes less is more and more is less. Everything plays a part in the visuals, from the typeface, to space, Adding too many lines can make the layout look crowded, and space is really your best friend.
Further Readings
Week 4
Book title: Stop Stealing Sheep & find out how type works (third edition)
Author: Erik Spiekermann
 |
| Fig. 5.1: Stop Stealing Sheep & find out how type works by Erik Spiekermann. |
The first book I borrowed from the library is the third edition of Stop Stealing Sheep & find out how type works (Fig. 5.1). This book contains many simple and easily understandable visuals and explanations of how to look at type, choosing the best typeface for a text and more.
I read chapter 3 (Looking at type) and learnt about some typefaces and what their physical characteristics connote. For an example, Runic Condensed. Runic Condensed has spiky serifs and exaggerated letterforms which typically do not confirm with conventional standards of how we define beauty and proportion. Due to this, it expresses uneasy feelings. The substitutes for this font are Bodega Sans Light, Block Extra Condensed, Harlem Slang, Bureau Empire and Bodega Serif Light.
Additionally, the analogy with type is that if it is printed in different colors, on different backgrounds, dark on light or light on dark, it will always appear as if the typefaces are not the same and more than one typeface is being used.
I flipped through chapter 4 (Type with a purpose) and learnt about how typography is part of branding:
"Brands have to speak their own authentic language. Type is visible language. Using a bland or overused typeface will make the brand and its products or media equally bland and even invisible."
This makes me understand that we can't use fonts that are too common.
I also learnt about how the more technical the profession or business, the cooler and more rigid its typeface to indicate seriousness. The example found in the book is the typeface Univers for architects. It continued with how the more traditional a trade is, the more classical the typeface used which the example given was the typeface Bodoni for bankers.
Week 5
Book title: Stop Stealing Sheep & find out how type works (third edition)
Author: Erik Spiekermann
|
| Fig. 5.2: Stop Stealing Sheep & find out how type works by Erik Spiekermann. |
What caught my attention is this chapter was the example of the best and worst designs is usually found in instructions manual for mounting snow chains onto the car wheels. It gave a scenario of me being in the dark and it's cold and that I am in a hurry but alas, the instructions are often printed on white paper, which gets wet and dirty easily way before I'm even done.
The typographic solution to this is to print it on the outside of the package which is a plastic material and that the color of the background should be yellow. The book explains that the dirt wouldn't show as easily and as much on yellow background as compared to white, but I thought of it from a scientific perspective where the yellow color would reflect light easily, thereby making it much easier to see in the dark.
The typographic solution to this is to print it on the outside of the package which is a plastic material and that the color of the background should be yellow. The book explains that the dirt wouldn't show as easily and as much on yellow background as compared to white, but I thought of it from a scientific perspective where the yellow color would reflect light easily, thereby making it much easier to see in the dark.
The next is the type used, which should be big and strong so that it would be legible. The text should also be in short, simple words and sentences. From this explanation, I think a sans serif font like Arial would be good.
Next on page 165, the chapter writes about how the visuals of typographic work would affect the person's attitude with the explanation below:
"There is no reason for hardworking pieces like price lists, technical catalogs, timetables and similar heavy-duty information to look as ugly or complicated as they often do. If something looks dull, repetitive and off-putting, people will approach it with a negative attitude (if they approach it at all). This does not improve their willingness to absorb the information."
"There is no reason for hardworking pieces like price lists, technical catalogs, timetables and similar heavy-duty information to look as ugly or complicated as they often do. If something looks dull, repetitive and off-putting, people will approach it with a negative attitude (if they approach it at all). This does not improve their willingness to absorb the information."
Then it goes on to explain how the page arrangement should stem from the content and structure of the information itself. The steps are:
- Find the shortest and longest elements.
- Ignore them.
The reason why this is done is because if the layout accommodates the extremes, I will end up making allowances for a few isolated exceptions. Instead, the thing to do is to make the bulk of the matter fit and then work on the exceptions one by one which is to either design around them or rewrite.
The next paragraph gives tips on how to improve the look and function of any information-intensive document, which is by eliminating boxes. Vertical lines are almost always unnecessary as type creates its own vertical divisions along the left edges of columns as long as there is sufficient space between columns. It goes on to explain that vertical lines take up space on both sides. Horizontal lines can be used to accentuate areas of the page.
Comments
Post a Comment