Typography (Week 1 - Week 5)

28/03/17 - 25/04/17 (Week 1 - Week 5)
Agnes Cherine Viridiana, (0331332)
Typography
Exercises

---

Lectures :

 

Lecture 1/Tutorial1 (28/03/17 ) : Instructions

Absence

Lecture 2/Tutorial 2 (04/04/17) : Type Structure and Family Type Anatomy

Absence

From what I read in the power point it contain a lil bit of the history, the meaning of typoraphy which is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and adjusting the space between pairs of letters (kerning)-Wikipedia.com and the style and appearance of printed matter. - oxforddictionaries.com . At first those who are typesetters, compositors, typographers, graphic designers, art directors, manga artists, comic book artists, graffiti artists are the one who practices typography but David Jury (head of graphic design at Colchester Institute in England) states that "typography is now something everybody does."

Terminology

• Font : a font refers to the individual font or weight within the typeface, i.e. Georgia Reguler, Georgia Italic and Georgia Bold.
• Typeface : a typeface refers to the entire family of fonts that share similiar characteristic, i.e Georgia, Arial, Times New Roman, Didot and Futura
• Type family : a type family refers to the many wieights within and individual typeface.

Lecture 3/Tutorial 3 (11/04/17) : Typography and Logotype

This is actually should be lecture 3/tutorial 3, but I just came this week because that time there's an issue with my visa application regarding to the supporting letter so my visa didn't come out on time and this is my first week in the Typography class. Today the lecturer start the class with the basic of typography, describing letter form such as baseline, median, x-height, apex, serif, bowl, finial, descender, ascender, link, loop, ear, shoulder, tail, stem, stroke. What is the differents among lowercase, small capital , uppercase, uppercase numerals, lowercase numerals, what is punctuation, miscellaneous characters and ornaments. Describing typefaces and comparing typeface, there is 10 typeface of 500 typefaces used for basic typography. As a beginner typographer, this 10 typefaces are important to learn. Once understand  how to use these faces appropriately and effectively, it will be well prepared to understand and appreciate other typefaces as you encounter them.

Typefaces

Lecture 4/Tutorial 4 (18/04/17) : Typography Development and Timeline

In this section we learn about typography in the beginning to the modern era start from Phoenician to Roman, hand script from 3rd – 10th century C.E, and also text type classification with the year that approximated to the nearest and some examples of the text type.The following typeform classification here, based on one devised by Alexander Lawson only covers the main form of text type:

• 1450 Blackletter. Examples: Cloister Black • Goudy Text
• 1475 Oldstyle. Examples: Bembo • Caslon • Dante • Garamond • Janson • Jenson • Palatino
• 1500 Italic. Since the sixteenth century, virtually all text typefaces have been designed with accompanying italic forms.
• 1550 Script. Examples: Kuenstler Srcipt • Mistral • Snell Roundhand
• 1750 Transitional. Examples: Baskerville • Bulmer • Century • Time Roman
• 1775 Modern. Examples: Bell • Bodoni • Caledonia • Didot • Walbaum
• 1825 Square Serif / Slab Serif. Examples: Clarendon • Memphis • Rockwell • Serifa
• 1900 Sans Serif. Examples: Akzidenz Grotesk • Grotesk • Gill Sans • Franklin Gothic • Frutiger • Futura • Helvetica • Meta • News Gothic • Optima • Syntax • Trade Gothic • Univers
• 1990 Serif/Sans Serif. Examples: Rotis • Scala • Stone

Lecture 5/Tutorial 5 (25/04/17) : Letters

This week we learn about letters, understanding the letters especially the details like some of the letters might looks symmetrical but when you look at it carefully it can be one side is thinner than the other one. We have to care about the font, the different curve at it because sometimes this minor differences are the one that make the font good and special.

---

Instruction

Exercises (20%)

The Brief

Exercises.

Duration of Assignment

4 Weeks (Briefing on Week 1)

DEADLINE

Week 5 (24 Apr 2017)

Description

Throughout the beginning and the middle of the semester, exercises will be prescribed at various phases of the module. These exercises will aid and benefit you in your quest to gain theoretical and practical knowledge in Typography that will inform you and provide you with the necessary experience to take on the module’s projects.

All exercises prescribed are to be completed and documented (labelled, clean, clear & concise) in your ePortfolio and Hardcopy portfolio respectively.

The exercises are as follows:

1. Calligraphy
2. Lettering
3. Type Expression

Calligraphy: You will choose a calligraphic hand (Round Hand, Black Letter, Uncial). You will complete the prescribed exercises (vertical lines, horizontal lines, circular lines and letters a–z). Upon completion of the prescribed exercises, you shall write a small 3 or 4 line passage/poem. You have 2 weeks for this exercise; it is to be done in class and at home. (2 weeks).

Lettering: Draw out the letters of your name (first name or nick-name). Try to capture your personality or character in the design of the letters. Using the appropriate software, animate the drawn out letters while ensuring the animated gif stays withing the character and personality. (1 week).

Type Expression: You will be given 6 words to compose and express. You will be given a set of typefaces to work with. Through iteration, use the appropriate typeface and compose the letters in a manner that allows meaning of the word to become visible. (1 week).

Requirements

To complete and to showcase mastery in the exercises prescribed in its various forms over the 13-week period. This process is repeated for all 8 weeks. The work is compiled logically and chronologically in an A3 clear sheet folder and documented on the students’ eportfolio.

Submission

1. Exercises to be documented in an A4 Clear Sheet folder, logically and chronologically. The works must be labelled and dated.
2. Eportfolio posts at the end of the assessment task labelled and dated, with images captured well and in good light in so that the works are pleasing to the eye and legible.

Objectives

1. An appreciation and understanding for the evolution of Typography.
2. An appreciation of the skills sets and mental discipline required in Typography
3. To develop the necessary technical skills and sensibilities for typographic communication.

---

Exercise 1, 2 & 3

Material and Tool :

1. Graph Paper (A4 size, 2mm square 20cm x 24 cm)
2. 2.0 or 3.0 Calligraphy Pen Flat nib or Diagonal Nib (I use 3.0 with diagonal nib)
3. Ruler
4. A4 size Clear Paper
5. Any kind of Pen and Pencil
6. Eraser
7. Adobe Illustrator and Adobe Photoshop

Step by Step :

For the writings:

1. Prepare 4 graph papers.
2. Hold your calligraphy pen with 45 degree angle and start making the vertical line, horizontal line and circular in one paper.
3. Next, in a new paper write the alphabet from A to Z in lowercase with the calligraphy pen and still hold it with 45 degree angle.
4. Choose a quote which fit maximum 3 lines 4 words in one line.
5. Write down your quote with the calligraphy pen in the graph paper.
6. Prepare your A4 clear paper in landscape position.
7. Draw lines in the clear paper for a guide to write your quote in the middle.
8. Start writing your quotes.

Graph Paper (A4 size, 2mm square 20cm x 24 cm)

Ruler, 3.0 Diagonal Nib Calligraphy Pen, Normal Drawing pen, Pencil, Eraser

Vertical,Horizontal and Circular Line

Calligraphy A to P

Calligraphy Q to Z

Calligraphy quote in graph paper

Calligraphy quote in clear paper

Drawing name logo and animation:

1. Draw a sketch for our own name that describe your personality.
2. Take a photo of it and place it on your Adobe Illustrator.
3. You can use pen tool or brush tool in Adobe Illustrator to trace your drawing and save it.
4. Create a New File with 72 dpi, arranged by row ( → ), and type on how much art boards you'll need (I use 16)
5. Make your GIF as a chronology in every artboards.
6. Export as PNG and don't forget to tick on use artboards.
7. Open Adobe Photoshop.
8. Click File - New (width : 297 , Height : 210 (A4 size in mm), Resolution 72 pixel/inch) and click Ok.
9. Click File - Script - Load File into stack - select all files that you made in Adobe Illustrator.
10. Click Windows - Timeline - Create frame animation.
11. Add frame as many as your artboard and set up all the time to 0.2 second.
12. Click first frame - turn off all layer - turn on 1st layer - click 2nd frame - turn of 1st layer - turn on 2nd layer - etc.
13. Change "once" into "forever".
14. File-Export-Save of Web-GIF(I turn of the transparency)-Type your file name-Change the Format into Images Only-Save.

Name sketch

Digital

Process in Adobe Illustrator

Process in Adobe Photoshop

First Outcome

Remake Animation

2nd Remake Animation

Exercise 4

Tools and Material :

1. A4 Clear Paper or Graph Paper
2. Pencil
3. Eraser
4. Adobe Illustrator and Adobe Photoshop

Step by step:

1. Sketch in the paper the words Kick, Jump, Sleep. Hunt, Throw, Fart
2. Open Adobe Illustrator and make a New Document (Weight : 297 mm, Height : 210 mm)
3. Click on View-Rulers-Show Rulers
4. Margin the paper by dragging from the rulers at 15mm every side
5. Divide the document into six with 5mm space for every box
6. Put that are words into Adobe Illustrator using a font that describe each words
7. Pick one words that you want to make animated GIF ( I choose Hunt )
8. Create a New File with 72 dpi, arranged by row ( → ), and type on how much art boards you'll need (I use 16)
9. Make your GIF in every artboards
10. Export as PNG and don't forget to tick on use artboards
11. Open Adobe Photoshop
12. Click File - New(Width : 297 , Height : 210 (A4 size in mm), Resolution 72 pixel/inch) and click Ok
13. Click File - Script - Load File into stack - select all PNG files that you made in Adobe Illustrator
14. Click Windows - Timeline - Create frame animation
15. Add frame as many as your artboard and set up all the time to 0.2 second
16. Click first frame - turn off all layer - turn on 1st layer - click 2nd frame - turn of 1st layer - turn on 2nd layer - etc
17. Change "once" into "forever"
18. File-Export-Save of Web-GIF(I turn of the transparency)-Type your file name-Change the Format into Images Only-Save

Sketch

Process in Illustrator

First Digital Outcome

Remake Digital Outcome

HUNT

Process in Adobe Illustrator

Process in Adobe Photoshop

First GIF Outcome

Remake GIF

2nd Remake GIF

---

Feedback

Week 1, 2

For the Horizontal and Vertical Line, good consistency. As for the circular, need more practice because it looks more like oval. The writing is good,neat but the stroke in G letter looks awkward.

Week 3

For the animated name logo. The design is good,but unfortunately it divorce with the animation, can express more of the detail. The lecturer suggest me to redo it so I redo it.

Week 4

We're told that most of our work are still bad because we don't use the time to remake it if we're told to remake it. Mine is not happening so Mr.Vinod suggest to redo it again.

---

Reflection

Experience

Well I actually really like this subject, but I don't really like it when we have to trace and make it into digital one. I choose the Roundhand one because I have ever try that calligraphy type. But then I'll also try both Black Letter and Uncial when I have time to do it. I also try my best to make and remake the animation.

I cannot hide the fact that the week 4 assignment is much much harder than before so this time I didn't procrastinate because from the sketching the lecturer already set the time to finish, time to start animating and so on. We I get back home I finished it but still sitting too long.

Observation

I'm the type of person who really love to procrastinate something, especially when I have no idea what should I do. And both my hands get tired easily, my back really hurts when I sit too long and my body will start shaking when I don't eat or too hungry and tired.

I really need to rest myself when I'm tired so it won't hurt my back again and also the fact that I might get sick if I push myself too much.

Findings

Now I try so hard not to procrastinate, pray when I start to panic because I have no idea what should I do. Rest my hand and back when I'm tired and eat my meal on time.

I know that you'll have to work hard on something no matter how bad is your work, if other people say what a bad art, or look at your art like a trash at least you know you've done the best and next time you'll try to make a better one. I also need to stop overthink something, try with something simple.

---

Reference

Mastering Type The Essential Guide to Typography For Print And Web Design

 

Typography Reference Book

I choose this book not just because it has a lot of pictures and full color but it also contain so much information inside, including the history, type of arts, letters, layers, screen and contain so much examples on the art work that I can you as my reference. I'm bad at reading but for me this book is good for your work reference.