TYPOGRAPHY | EXERCISES






27/03/18 - 01/05/18 | Week 1 - Week 6
Yeoh Xiao Shi (0331577)
Typography
Exercises




LECTURE

Lecture 1: Briefing & Introduction to Typography
27/03/18 (Week 1)

We started our first class by introducing ourself to the lecturers. There will be two lecturers: Mr. Vinod assisted by Mr Shamsul who will be teaching us typography throughout this semester. During the class, Mr Vinod broke down what we can expect for our future assignments. We also told to create a blog to upload all our works and progress for this module. After creating our blog sites, he described what is needed and necessary to include in our sites. He was very comprehensible in what was needed to be included.

Then, he gave us a lecture on introduction to typography. He started the class by asking the meaning of typography and he explained it to us. So, what is typography? Typography is the style and appearance of printed matter. Besides that, he also explained what is the difference between calligraphy and lettering. Calligraphy is everything that is written while lettering is like arranging the alphabets, the form of the letter and draw out the letter. Other than that, We also learned about the the terminologies of typography in this class as well.

Terminologies of Typography:

  • Font : The process of making or developing a typeface                                                            (i.e. : Georgia Regular, Georgia Italic and Georgia Bold)
  • Typeface: The individual weight in a type family                                                                       (i.e. : Georgia, Arial, Times New Roman, Didot and Futura)
  • Type family: The typeface designs that are variations of one basic style of alphabet


Lecture 2 : No lecture (Calligraphy Exercise)
03/04/18 (Week 2)

There was no lecture this week and we started our first calligraphy exercise by practicing horizontal, vertical as well as circular strokes. When practicing, we were told to hold our pen with an angle and the angle should be maintain the same all the time. We were also told to keep our pen slanted while writing. We were advised not to use too much pressure as it may spoil the nib of the pen. After practicing the basic strokes, Mr. Vinod asked us to choose one hand and print it out for referencing. He also gave some feedbacks on our writing and taught us the way to write it well.


Lecture 3 : Development of Typography 
10/4/18 (Week 3)

Early Letterform Development : Phoenician to Roman

This week, Mr Vinod gave us a lecture on development of typography from the perspective of western world. At first, writing is scratching into wet clay with stick or engraving into stone with chisel. Then, it can be seen that the forms of uppercase letterforms have developed gradually of these tools and materials. The evolution began from Phoenician letter which are simple combination of straight lines and pieces of circles.


Fig.1.1: Evolution from Phoenician letter

The Greeks developed a style of writing called "boustrophedon", which meant the lines of text read from right to left and then left to right. They change the direction of reading and also the position of the letterforms. In addition, they did not use letter space and punctuations. After that, Etruscan, the ancient people of central Italy whose civilization influenced the Romans working in marble painted letterforms before engraving them. There are certain qualities of their strokes :


  • a change in weight from vertical to horizontal 
  • widen of the stroke at start and finish

Hand Script from 3rd to 10th century C.E.

Square capitals were the written version that can be found in Roman monuments. Soon, it changed to a compressed version which is rustic capitals. It allowed for twice as many words on parchment paper  and it took less times to write. Rustic capitals is faster and easier to write but is hard to read because of the compressed nature.



Fig.1.2: Square Capitals.


Fig.1.3: Rustic Capitals.

Uncials is likely developed from some aspects of the Roman cursive hand. It is considered as small letters and the broad of forms of uncials is more readable at small sizes compared to rustic capitals.

Fig.1.4: Uncials.


Lecture 4 : No lecture (Lettering Exercise)
17/04/18 (Week 4)

We don't have any lecture today. So, both of our lecturer start the class by checking our previous exercise. After that, they walk around to check our name lettering for next exercise. They ask us to choose one of our designs and describe it as our personality. We were also told to transfer our name lettering to Adobe Illustrator and make it into animation. Before the class end, Mr Vinod asked us to prepare for next exercise which is type expression. We need to complete this exercise by using only a specified group of typefaces and we had to express the meaning of these six words chosen : Drink, Dead, Loud, Quick, Dark & Stress. Overall,we need to complete lettering exercise and also develop ideas for the type expression this week.


Lecture 5 : No lecture (Type Expression Exercise)
24/04/18 (Week 5)

Just like last week, we don't have any lecture in today class. Mr Vinod began the class by explaining the format of the e-portfolio again as some of us still didn't follow the format. Then, he moved on to check our work for type expression. He also gave us some feedbacks on our work so that we can improve it.


Lecture 6 : No lecture (Public Holiday)
01/05/18 (Week 6)

There was no class conducted this week as it was a public holiday. However, we received a message from Mr Vinod at Facebook. As our work for the last two exercises (lettering & type expression) was not up to standards previously reached, we were told to reconsider, revaluate as well as rework our outputs based on the feedback given or looking at our classmates work or did our own research. Lastly, we were also told to make the necessary changes for our e-portfolio by looking and compare it with the examples given.




INSTRUCTIONS







EXERCISES
Calligraphy Exercise (Week 1-3)

Week 1 (27/03/18)
This week, we were told to practice the basic strokes like horizontal, vertical and circular strokes before we starting to write the lettering calligraphy. 


Fig.2.1: Draft of horizontal, vertical and circular strokes.


After practising for few times,  Mr. Vinod told me that vertical and horizontal strokes must be a bit slanted as well as holding the pen with an angle when writing. I tried again after knowing my mistake.


Fig.2.2: Draft of vertical and horizontal strokes


Fig.2.3: Final outcome for the basic stroke: horizontal, vertical and circular strokes.


When we were done with the strokes exercise, we were told to choose one hand and work on it. I chose round hand to work on for this exercise. It was a bit challenging and hard for me at first. The more I write, the less confidence I have to continue as I'm not satisfied with all my writing. After trying for few times, I got to see some improvement for my writing.



Fig.3.1: Reference used.


Fig.3.2: Practice of alphabets (a-z).



Fig.3.3: Final outcome (alphabet a-i).


Fig.3.4: Final outcome (alphabet j-s).


Fig.3.5: Final outcome (alphabet t-z).

After receiving feedbacks from Mr Vinod, I realised that my writing for letter "g" and "Q" was written wrongly. So, I decided to rework again and here is the outcome below! 


Fig.3.6: Process of rework.


Fig.3.7: Final Outcome (after feedback).


Fig.3.8: Final Outcome (after feedback).


Fig.3.9: Final Outcome (after feedback).


Fig.3.6: Practice of selected quotes.


Fig.3.7: Final Outcome on graph paper.



Fig.3.8: Final Outcome on white paper.


Lettering (Week 4)

Week 4 (17/04/18) 
For this week exercise, we were required to create a lettering for our names that reflected our personality with Adobe Illustrator. Then, we need to move on to Adobe Photoshop to make the lettering into an animated GIF. I was trying to create a lettering to show the characteristic of stress in myself. So, I draw the messy lines around my name to represent the thinking that always stress me out.


Fig.4.1: Sketches for name lettering

Fig.4.2: Sketches for name lettering


Fig.4.3: Selected name lettering.


Fig.4.4: Screenshot of Adobe Illustrator art boards.


Fig.4.5: Moving on to Adobe Photoshop to create GIF.

Fig.4.6: Final outcome. (Stress)



Type Expression (Week 5-6)

Week 5 (24/04/18)
This week, we need to express the meaning of these six words : drunk, dead, loud, quick, dark and stress which given in the previous class. We were only allowed to use the 10 specific group of typefaces provided to express the word. Before we moving on to animate it, we need to show our design for the type expressions to Mr Vinod.


Fig.5.1: First attempt of type expression.


Mr Vinod commented that my design for the word 'dead', 'loud', 'quick and 'stress' did not express well and needed to make some changes to improve it. So, I decided to redo again after the feedback given. After trying for a few times, Mr Vinod approve my design at last.



Fig.5.2: Final design for type expression.


For the animation, I tried to work on drunk, dead and stress but the result wasn't that good at first. I tried to work on it again for few more times and I ended up choosing the word "drunk" for the animated type expression.






Fig.5.3: Chosen type expression : drunk.

Fig.5.4: Screenshot of Adobe Illustrator art boards.

Fig.5.5: Exporting the artboards to Photoshop.
Fig.5.6: Final outcome.
Fig.5.7: Final Outcome (after feedback).



FEEDBACK

Week 2
General Feedback : Mr Vinod told us to hold our pen with an angle and avoid using too much pressure when writing as pressing too hard may spoil the nib of the pen.
Specific Feedback : Mr Vinod correct my mistake for the vertical and horizontal strokes as I didn't start with an angle when I wrote it. He also taught me the right way to write circular strokes.

Week 3
General Feedback : Composition and spacing is important for the lettering exercise. We were told to draw an 'X' on the graph paper before we start lettering to get the middle point so that the quote is centralized. Don't use pen to write name, student ID and date on the graph paper. We should always use pencil for it. Lastly,always update our blog not only for typography but also other modules. Specific Feedback : For the basic strokes exercise, I need to aware of the consitency. While for the alphabets, 'g' and 'Q' was written wronly and he showed me the right way to write it. Mr Shamsul commented for my blog and he said overall is good. For the further reading part, I haven't update for week 2 so he asked me to update it.

Week 4
General Feedback : We should not write our name, student ID and date in front of the artwork. It must written at the back of the paper. Besides that, we were reminded to read a book and update what we have read on our eportfolio every week. When we update our blog, we should always follow the format as the example is given.
Specific Feedback :  After looking at my quotes writing, Mr Vinod said overall is good but the gap between the last two word is too big. He told me to try again and reduce the spacing between the last two words. For my eportfolio, I have done updated so there's not much comment from Mr Shamsul.

Week 5
General Feedback : Mr Vinod start off the class by explaining the format of eportfolio again as we still not done it correctly. Mr Vinod was dissapointed on our work for lettering. He asked us to look back all the things we have done and more effort is needed. He also told us to do what is good for the artwork but not to just complete the work. Specific Feedback : For the tye expression, Mr Vinod commented that my design for the word 'dead', 'loud', 'quick and 'stress' did not express well and more improvement is needed.

Week 6
General feedback : There was no class this week as it was a public holiday but we were told to to reconsider, reevaluate and rework our outputs based on the feedback given or based on our own observations of our classmates work as well as did our own research. Besides that, we were also told to make necessary changes for our eportfolio by looking and compare it to the examples given. Specific feedback : We didn't received any specific feedback this week because it was a public holiday.




REFLECTION

Experiences :

Week 1 : I learned about what typography means and also the terminologies of typography. After this lecture, I gain more interest on typography because it is an challenging piece of art.
Week 2 : I started to practise the basic strokes for the first exercise. I spent a lot of times to practice as I didn't get to write it with an angle. After practising the strokes for a few times. I started practice with the alphabets. It is not easy to write at first as my hand is still not familiar with it.
Week 3 : I did the lettering exercise this week and I found out that I'm not good at writing it with spacing. I tried my best to do the exercise but the result wasn't that good as both my pen is run out of ink.
Week 4 :  I enjoyed designing my names but it is hard for me to relate it to personality. So, I took a lot of times to complete it. 
Week 5 : I need to express the six words chosen for this week exercise and I found out it was a bit challenging for me as I'm lack of idea.
Week 6 : I try to animate some of the words and the result wasn't that good. 

Observations : 

Week 1 : After this class, I considered myself lack of proficiency and many researches need to be done to know more about typography.
Week 2 : After practising a lot, I get to write the basic strokes with an angle and is more easy to write it now. For the alphabet exercise, I think I need to do more practice for it in order to improve my writing.
Week 3 : I need to be careful with the spacing and composition for lettering exercise to ensure that the result was good.
Week 4 : I found out I'm lack of acknowledgement on my own personality. So, it limited me to create more lettering.
Week 5 : I realised my design for the six words is not expressive enough if compare to my classmates' work.
Week 6 : I think my idea for the animation is quite weak and need more improvement for that.

Findings :

Week 1 : It took some times for me to understand the terminologies of typography. I'm a bit confused with it and its example at first. After researching and listening to the explanation of my lecturer, I think I understand better.
Week 2 : I keep forgetting to write the strokes with an angle and holding the pen in the wrong way.
Week 3 : I realised that I need more improvement for the lettering exercise as I keep struggling with the spacing and also prepare more pen so that I have the extra one when the pen is run out of ink.
Week 4 : To have a good design on the name, I need to know and understand my personality well.
Week 5 : I need to put more effort in type expression exercise as I'm not satisfy with my current design.
Week 6 : It is not that easy to create a creative animation lettering, it took times.




FURTHER READING (WEEK 1-3)

Week 1


Typographic Design : Form and Communication (4th Edition)
By: Rob Carter, Ben Day, Philip Meggs


This book coverage essential topics as the anatomy of letters and type families, visual communications and design aesthetics, and designing for legibility. Before starting to write typography, is important for us to know the parts of the letterforms. Letterforms and their parts are drawn on imaginary guidelines so that typography looks consistency.

Major Components of letterform construction.



So, there are few lines as the guide when we write calligraphy which is capline, meanline, baseline and beard line.
  • Capline : Imaginary line runs along the tops of the capital letters.
  • Meanline : Imaginary line establishes the height of the body of lowercase letters.
  • Baseline : Imaginary line runs along the base of each capital rests.
  • Beardline : Imaginary line runs along the bottom of descenders.
  • X-height : Distance from baseline to meanline. ( Height of lowercase letters)


Parts of letterforms.



Letterforms were having different parts and each parts have its own name.
  • Arm : Horizontal stroke that unattached on one or both ends (can see in letters T & E)
  • Stem : Major vertical or diagonal stroke in letterform
  • Terminal : End of any stroke that does not close with serif
  • Stroke : Any linear elements within a letterform
  • Shoulder : Curved stroke projecting from a stem
  • Tail : Diagonal stroke or loop at the end of letter ( can be seen in letters R & j)
  • Ascender : Stroke on lowercase letter rises above the meanline.
  • Descender : Stroke on lowercase letter fall below the baseline.
  • Leg : Lower Diagonal Stroke ( Letter K)
  • Eye : Enclosed part ( Letter e)
  • Spine : Central Curves Stroke ( Letter S)
  • Apex : Peak of triangle (Letter A)
  • Hairline : Thinnest stroke within a typeface that has stroke of varying weights
  • Fillet : Contoured edge connects the serif and stem
  • Bowl : Curved stroke enclosing the counter form of a letter
  • Loop : Curved stroke enclosing the bottom form of a letter ( Letter g)
  • Ear : Small stroke from the upper right side of the bowl of letter (Letter g)
  • Link : Stroke connect bowl and loop ( Letter g)
  • Serif : Short stroke extend at upper and lower ends at an angle 
  • Counter : Negative space which fully or partially enclosed by a letterform.
  • Spur : The point at the end of a curved stroke ( Smaller than serif) 


Week 2



Type Matters !
By: Jim Williams


This book is good as reference as it shares the tips to improve the looks of typography as well as  the example and explanation is quite easy to understand. So, I have read about legibility and readability from this book. After reading, I understand that legibility is the quality of being clear enough to read or when the characters are easily read while readability is the quality of being legible or decipherable.To be a good typographer, we need to know how to arrange type as to produce graceful and orderly page so that the reader's eye won't get tired easily when reading it. There are two examples in this book to show legibility and readability.

For the first example, 14/16 pt Adobe Garamond Pro range left to 121 mm with a 16pt line space between paragraphs. It shows both legible and readable with this setting. Readers can understand the paragraph better with this setting as the word is clear enough to read. 



Setting shows both legible and readable.


While for the second example, the setting is 14/12pt Swiss Extra Compressed BT range left to 140 mm. The minus leading results in clash. The closed-up inter-character spacing (now too tight), the type size, the bold condensed sans serif typeface over this wide measure and the lack of paragraphs all contribute to the poor legibility and readability of this setting. With this setting, readers' eye get tired easily as the word is too tight. It is hard for reader to read all those word faster and easy compared to the first example.



Setting shows poor legibility and readability .










Week 3


The Complete Typographer (2nd Edition)
By: Will Hill

According to the author, the term of typography is usually used to describe :
  • forms of typographic work that included the use of fewer words at larger scale.
  • differentiate the work form editorial typographic and the placing of the continuous text.
Example : Corporate identify, book jackets, packaging, fascias and motion graphics.

Display typeface draw upon a wide and colourful range of sources and idioms and not limit by the considerations of legibility and page economy that inform the design of text faces. It reflects a wide range of vernacular sources, including signwriting, woodletter type, script and calligraphic traditions and the many forms of the hand-rendered letter.


Week 4
       


Draw Your Own Fonts
By: Tony Seddon

This book is easy and simple to read. It included introduction to hand lettering, developing a skill set, tracing and tampering, and also understanding letterforms. According to the author, it's important to understand how the letterforms work. As a little knowledge you have on letterforms will allow you to talk the talk with your colleagues about the various elements and characteristic of it. It is important to observe the consistent standards such as x- and cap-heights when creating full character set for hand-drawn typefaces. Your work will like a high school project compared with the professional commission if you failed to give the basics structure for your letterforms. Even if the hand-drawn faces represent the free form, they should still be structured and consistent.


Week 5


Lettering & Type 
By: Bruce Willen and Ellen Lupton

This week, I read about the lettering process from Lettering & Type. I got to know that it is not easy to produce perfect set of letter. If want to do so, it requires a lot of practise by writing quickly until perfected. When creating lettering or type, designers start their design by multiple sketch form first. As the sketch reaches certain level of refinement, the letter are sculpt or digitalised. Letter process is slow and meticulous. It can take hours, days or weeks for a designer to complete it.


Week 6

 


















Exploring Typography (2nd Edition)
By: Tova Rabinowitz Deer

For this week, I have read about form and content from the chapter of layout design aspects. According to the author, the term of layout refers to the way that a designer place objects and text in a page to create a design. It is important for designers to make conscious decisions about each element for every layout as these decisions will influence whether or not the audience is able to receive your message through it. The effective layout will help your audience to : notice and decide to examine your design, find the information they are seeking, understand what you are trying to present and convey through your design.

The designer must consider the relationship between the form and the content of the layout in order to create  an effective layout.  A  layout's form refers to the way it looks while a layout's content refers to the message and information that the designers wanted to conveyed through his/her design. Design form has its characteristic like balance, unity, contrast, colour, value and also texture. In contrast, content presented in the form of text, symbols or images. Both form and content convey meaning, so the designer make decisions about this relationship to their design.

Comments