Week 1- 5

Date: 01/04/2017-18/04/2017 (week 1-5)

Chalani Tharanga Wanigasekara (0329562)
Typography and hypertextuality
Exercise 

---

Lecture 1

We were given a briefing about module outline, introduce about assignments and about typography such as western calligraphy (did it as group works). My group chose ITC Edwardian Script.
1. Western calligraphy
The art of writing and penmanship as practiced in the Western world, especially using the Latin alphabet (but also including calligraphic use of the Cyrillic and Greek alphabets, as opposed to "Eastern" traditions such as Perso-Arabic, Chinese or Indian calligraphy).
2. ITC Edwardian Script
In 1994 (New York), Edward Benguiat designed ITC Edwardian Script, an emotional, lyrical, even passionate calligraphy typeface.Its appearance was influenced by the look of writing with a steel pointed pen, an instrument which can be pushed as well as pulled, and which produces stroke contrast when pressure upon it is varied. The delicate, sophisticated letterforms of ITC Edwardian Script font were drawn and redrawn until the connective elements of the letters were perfected to create the look of true handwriting.

Lecture 2

We were given a lecture about the typography, structure of typography and who can practice/ do it and introduce few famous names who contribute Typography.

1. What is Typography?
The art of writing and penmanship as practiced in the Western world, especially using the Latin alphabet (but also including calligraphic use of the Cyrillic and Greek alphabets, as opposed to "Eastern" traditions such as Perso-Arabic, Chinese or Indian calligraphy).
2. Who can practice/ do typography?
Typography is the work of typesetters (also known as compositors), typographers, graphic designers, art directors, manga artists, comic book artists, graffiti artists, and, now, anyone who arranges words, letters, numbers, and symbols for publication, display, or distribution, from clerical workers and newsletter writers to anyone self-publishing materials. Until the Digital Age, typography was a specialised occupation. Digitisation opened up typography to new generations of previously unrelated designers and lay users, and David Jury, head of graphic design at Colchester Institute in England, states that "typography is now something everybody does." - Wikipedia.com

Font: a font refers to the individual font or weight, orientation, width etc. within the typeface
ie. Georgia bold, Georgia italic, Georgia regular
Typeface: a typeface refers to the entire family of fonts that share similar
ie. Times New Roman, Arial, Georgia, Futura etc.

3.Introduce few famous graphic designers/ typographers

• Paul Rand 

Paul Rand was an American art director and graphic designer, best known for his corporate logo designs, including the logos for IBM, UPS, Enron, Morningstar, Inc., Westinghouse, ABC, and NeXT.

Born: August 15, 1914, Brooklyn, New York City, New York, United States
Died: November 26, 1996, Norwalk, Connecticut, United States
Nationality: American

American Broadcasting Company

International Business Machines

• Shigeo Fukuda

Shigeo Fukuda was a sculptor, graphic artist and poster designer who created optical illusions. His art pieces usually portray deception, such as Lunch With a Helmet On, a sculpture created entirely from forks, knives, and spoons, that casts a detailed shadow of a motorcycle.
Born: February 4, 1932, Tokyo, Japan
Died: January 11, 2009, Mitaka, Tokyo, Japan
Education: Tokyo University of the Arts

• Reza Abedini 

Reza Abedini is an Iranian graphic designer and a visiting Assistant Professor of graphic design and visual culture at the American University of Beirut. He combined modern and traditional themes in his design.

Born: 1967, Tehran, Iran
Education: Tehran University of Art

• Alan Fletcher

 

Alan Gerard Fletcher was a British graphic designer. In his obituary, he was described by The Daily Telegraph as "the most highly regarded graphic designer of his generation, and probably one of the most prolific".
Born: September 27, 1931, Nairobi, Kenya
Died: September 21, 2006, London, United Kingdom

Institute of Directors

• Wolfgang Weingart 

Wolfgang Weingart is an internationally known graphic designer and typographer. His work is categorised as Swiss typography and he is credited as "the father" of New Wave or Swiss Punk typography.

Born: 1941, Germany

• Zuzana Licko 

Zuzana Licko is a Slovak-born American type designer known for co-founding the graphic design magazine Emigre and for creating numerous typefaces, including Mrs Eaves.

Born: 1961, Bratislava, Slovakia

Lecture 3

We were given introduce about letterforms, the fonts and typefaces and comparing typeface.

1. describing letterforms
Letterform is a term used especially in typography to mean a letter,s shape. It is a type of glyph.
Baseline

The imaginary line upon which a line of text rests.In most typefaces, the descenders on characters such as g or p extend down below the baseline while curved letters such as c or o extend ever-so- slightly below the baseline.

• Median

The imaginary line defining the x-height of letterforms.
X-heightThe distance between the baseline of a line of type and tops of the main body of lower case letters.

• Stroke

A straight or curved diagonal line.

• Apex/ Vertex 

Apex means the point at the top of a character such as the uppercase A where the left and right strokes meet. And vertex means the outside point at the bottom where two strokes meet.

• Arm 

Short strokes off the stem of the letterform, either horizontal or inclined upward.

• Ascender

This is the portion of minuscule letter in a latin- derived alphabet that extends above.

• Barb

The terminal for a curved capital serif letter.

• Beak 

This is a type of decorative stroke at the end of the arm of a letter, connected to the arm by the terminal.

• Bowl 

The curved part of the character that encloses the circular or curved parts of some letters such as d, b, o, D, and B.

• Bracket 

A curved or wedge-like connection between the stem and serif of some fonts. Not all serifs are bracketed serifs.

• Cross Bar

A stroke that horizontally connects two strokes.

• Cross Stroke

A stroke that crosses over another stroke but doesn’t connect on either side.

• Crotch

The interior space where two strokes meet.

• Descender

The portion of some lowercase letters, such as g and y, that extends or descends below the baseline.

• Ear

A small stroke extending from the upper-right side of the bowl of lowercase g; also appears in the angled or curved lowercase r.

• Em/en 

Is a unit in the field of typography, equal to the currently specified point size.
Em dash is a long dash that indicates either a change of thought or emphasis.En dash is a medium-length dash indicating a range of items or the passage of time.
For instance, one em in 48 points.

• Final

The rounded non- serif terminal to a stroke.

• Leg 

A secondary stroke that extends horizontally or diagonally from the bottom of a letter.

• Ligature 

Two or more letters are joined together to form one glyph or character.

• Link 

A stroke that connects the top and bottom bowls of lowercase double-story g’s.

• Loop 

The lower bowl of a traditionally shaped lowercase g.

• Serif 

Small structural extensions that are at the end of a letter’s horizontal and vertical strokes. Serifs come in a variety of shapes and sizes. Serif also refers to the category name of a font that has serif extensions. 

• Shoulder 

The curved stroke aiming downward from a stem.

• Spine 

The main left to right curving stroke in S and s.The spine may be almost vertical or mostly horizontal, depending on the typeface.

• Spur 

A small pointed extension typically coming off the top or bottom of a vertical stroke that connects to a rounded stroke—oftentimes on a serif lowercase letter.

• Stem 

The stem is the main, usually vertical stroke of a letterform.

• stress 

The axis created by the thick and thin stroke contrast of a letter.

• Swash 

A swash is a typographical flourish on a glyph, like an exaggerated serif. Capital swash characters, which extended to the left, were historically often used to begin sentences.

• Tail 

The curved diagonal stroke at the finish of certain letterforms.

• Terminal 

A stroke ending without a serif.

2.Describing font

• Uppercase 

Capital letters, including certain accented vowels, the c cedila and n tilde, and the a/e and o/e ligatures. 

• Lowercase 

Lowercase letters include the same characters as uppercase

• Small capitals 

small capitals (usually abbreviated small caps) are uppercase (capital) characters set at the same height and weight as surrounding lowercase (small) letters or text figures.

• Uppercase numerals

called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width. They are most successfully used with tabular material or in any situation that calls for uppercase letters.

• Lowercase numerals

known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders. They are best used when ever you would use upper and lowercase letterforms. Lowercase numerals are far less common in sans serif type-faces than in serif.

• Italic

Most fonts today are produced with a matching italic. Small caps, however, are almost always only roman. The forms in a italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.

Punctuation and miscellaneous characters:
Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface. It’s important to be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job.

3.Describing typeface

• Roman

The letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments.

• oblique

conversely are based on roman form of typeface.

• Boldface

Characterized by a thicker stroke than a roman form. Depending upon the relative stroke widths within the typeface, it can also be called ‘semibold’, ‘medium’, ‘black’, ‘extra bold’, or super. In some typefaces (notably Bodoni), the boldest rendition of the typeface is referred to as ‘Poster’.

• Light

A lighter stroke than the roman form. Even lighter strokes are called ‘thin’.

• Condense

A version of the roman form, and extremely condense styles are often called ‘compressed’.
Extended: An extended variation of a roman font.

Lecture 4

We were given a lecture about the history of typography.

Typography begins with the invention of writing over 5000 years ago and end with the invention of moveable type in Europe during the 15th century. (1st timeline)
The second timeline covers the long era of the hand press and headset metal types. This period, from Gutenberg's invention of movable type to the end of the 18th century, lasted about 350 years.
The industrial revolution and 19th century are revealed as an era of technological innovation and an outpouring of new typographic forms (3rd timeline)
The 4th timeline begins with the year 1900 and covers the 20th century when type was shaped by the aesthetic concerns of modernism, the need functional communication, and technological progress. In the late 20th century, the digital revolution typography occurred.
In the past books written in hands by monks.
Early letterform development: Phoenician to Roman
Initially writing meant scratching into wet clay with the sharpened stick or carving into stone with a chisel. The forms of uppercase letterforms (for nearly 2000 years the only letterforms) can be seen to have evolved out of these tools and materials. At their core, uppercase forms are the simple combination of straight lines and pieces of circles, as the materials and tools of early writing required.

The Greeks changed the direction of writing. Phoenicians, like other Semitic peoples, wrote from right to left. The Greek developed a style of writing called ‘boustrophedon’ (how the ox ploughs), which meant that the lines of text read alternately from right to left and left to right. As they change the direction of reading they also changed the orientation of the letterforms: Etruscan (and then Roman) carvers working in marble painted letterforms before inscribing them. Certain qualities of their strokes—a change in weight from vertical to horizontal, a broadening of the stroke at start and finish—carried over into the carved letterforms.


Phoenician 1000 B.C.E.               Greek 900 B.C.E.                                                         Roman 100

In 1450, Johannes Gutenberg’s invention became a change of typography. He is a German man who was born in Mines. He invented the printing movable type. And he invented blackletters. ( blackletters has thick vertical lines and thin horizontal lines connectors.)
In the 15th century, invented ‘Roman’ letters by Jenson. Jenson worked mainly in Venice, Italy and he found letters from buildings. His letterforms based on straight lines and regular curves. This letter typeface is the instant success and it spread quickly in Europe.
Italic letters look like a slanted and stylised version of the Roman type. They were created in the late 15th century by Aldus Manutius from IZtaly.
In the 18th century, Caslon ( a British man) invented ‘Old Style’ have fixed serifs and low contrast between thick and thin strokes. And after a few decades later Baskerville invented ‘ Transitional’ have thinner serifs and higher contrast between thick and thin strokes. Later Didot(French name)/ Bodoni (Italian name) invented ‘ Modern’ have very thin serifs and extreme contrast between thick and thin strokes.
William Caslon’s great grandson named William Caslon IV invented ‘Sans-Serif’. Sans-serif letters are really big.
‘Egyptian or Slab Serif’ has really thick serifs and is usually used for titles.
Paul Renner from Germany created a typeface called ‘Futura’ and it’s based on simple geometric shapes. This is calling ‘Geomatric Sans’.
Around the same time, a British man named Eric Gill created a typeface called ‘Gill Sans’that was similar to a Geometric Sans but with gentler, more natural curves and this is called ‘Humanist Sans’.
Helvetica created in Switzerland in 1957. it has simple curves and it is available in many different weights.
In 1450, Johannes Gutenberg’s invention became and explosion. He is a German man who was born in Mines. He invented the printing movable type. And he invented blackletters. ( blackletters has thick vertical lines and thin horizontal lines connectors.)

Gutenberg's Blackletters

In the 15th century, invented ‘Roman’ letters by Jenson. Jenson worked mainly in Venice, Italy and he found letters from buildings. His letterforms based on straight lines and regular curves. This letter typeface is an instant success and it spread quickly in Europe.
Italic letters look like a slanted and stylised version of the Roman type. They were created in the late 15th century by Aldus Manutius from Italy.

Jenson's Roman letters

In the 18th century, Caslon ( a British man) invented ‘Old Style’ have fixed serifs and low contrast between thick and thin strokes.

Caslon's Old style

And after a few decades later Baskerville invented ‘ Transitional’ have thinner serifs and higher contrast between thick and thin strokes.
Later Didot(French name)/ Bodoni (Italian name) invented ‘ Modern’ have very thin serifs and extreme contrast between thick and thin strokes.

Bodoni's modern

William Caslon’s great grandson named William Caslon IV invented ‘Sans-Serif’. Sans-serif letters are really big.
‘Egyptian or Slab Serif’ has really thick serifs and is usually used for titles.
Paul Renner from Germany created a typeface called ‘Futura’ and it’s based on simple geometric shapes. This is calling ‘Geomatric Sans’.

Paul Rennar's Futura

Around the same time, a British man named Eric Gill created a typeface called ‘Gill Sans’that was similar to a Geometric Sans but with gentler, more natural curves and this is called ‘Humanist Sans’.
Helvetica created in Switzerland in 1957. it has simple curves and it is available in many different weights.

gill Sans

Lecture 5

We were given a lecture about letters.
In the below photo is an uppercase letter has two different stroke weights of the Baskerville stroke form; that each bracket connecting the serif to the stem has a unique arc.

The uppercase letter forms may appear symeetrical, but the width of the left slope is thinner than the right stroke. Baskerville and univers demonstrate the meticulous care a type desginer takes to create letterform that are both internally harmonious and individually expressive.

Maintaining x- height
The curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Recognizing specific letterforms is developing a sensitivity to the counterform- 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.
Lowercase ‘r’ that have no counters per se.
One of the most rewarding way to understand the form and counter of a letter is to examine them in close detail. The examinations also provide a good feel for how the balance between form and counter is achieved and a palpable sense of letterform’s unique characteristics. It also gives you a glimpse into the process of letter-making.

---

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. (1week).

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( horizontal, Vertical and circular )

The things I used:
1. Graph Paper (A4 size, 2mm square 20cm x 80 cm)
2. Calligraphy pen 2.0 /3.0 ( Flat nib and diagonal nib)- I used 2.0 diagonal nib pen

How I made:
Firstly, we took three graph papers for draw types of lines and circles and drew using by pens which are above mentioned.

figure1: Graph Paper (A4 size, 2mm square 20cm x 80 cm)

figure2: calligraphy pens 2.0/3.0 (I used 2.0 non- flat nib)

figure3: horizontal line

figure4: vertical line

figure5: circular

figure6: failure

Exercise 2 (Calligraphy letter writing)

the things I needed:
1. Graph Paper (A4 size, 2mm square 20cm x 80 cm)
2. Calligraphy pen 2.0 (non-flat nib)
3. A4 Clear Paper (landscape position)

How I made:
Firstly, prepare three graph papers, A4 Paper, and one 3.0 calligraphy pen. And then, write alphabet A-Z which are lowercase. (Example: from A to J on graph paper and continue in other graph papers). Next, choose a quote which is fit 3lines maximum 4 words in each line.

figure1: Graph Paper (A4 size, 2mm square 20cm x 80 cm)

figure2: calligraphy pen 2.0 (non-flat nib)

figure3: round calligraphy a-j

figure4: round calligraphy k-r

figure5: Round calligraphy s-z

figure6: calligraphy quote

figure 7 : practice work of Quote

figure 8: practice works

Exercise 3 (Making name GIF)

the things I needed:
1.Graph Paper (A4 size, 2mm square 20cm x 80 cm)
2.Calligraphy pen 2.0 (non-flat nib)
3.Adobe Softwares (Illustrator, Photoshop, after effects)

How I made:
Firstly, I drew my name in different styles in the graph paper took a photo of it for trace using Adobe Illustrator. Saved it as PNG after the trace.

1st GIF➜ I opened 9 artboards (arranged by row)and fixed traced artwork in different angles. Then exported it (use artboard, revolution 72pi). Next opened it on Adobe Photoshop (297 x 210, white background for the new page). then made GIF. Finally, saved in 'save for web'.
2nd GIF➜ Firstly, opened the name artwork png file in after effects (HDTV1080 25, colour white, frame rate 25)and made the GIF

figure1: Graph Paper (A4 size, 2mm square 20cm x 80 cm)

figure2: calligraphy pen 2.0 (non-flat nib)

figure3: practice paper

figure4. trace the name (Adobe Illustrator)

figure5: artboards(Adobe Illustrator)

figure6: process of GIF (2nd- Adobe Photoshop)

figure7: the process of 2nd GIF(Adobe After effects)

figure8: GIF (1st)

Exercise 4 (making GIF)

Things I used:
1. A4 sheet
2. A pencil ( I used 2B pencil)
3. Adobe softwares ( illustrator, photoshop)

How I made:
Students recommended 6 verbs and drew 6 boxes on the A4 sheet. And then we drew in different styles to represent of verbs and drew it in Adobe Illustrator. Finally, I chose one verb and made a GIF (followed same technique of GIF 1 which is in assignment 3)

figure7: pactice paper

figure 8: Digitalized 6 verbs

figure8: artboards(Adobe Illustrator)

figure9: process of GIF

figure10: GIF

figure11: Failure

---

Feedback 1
The lecturer said that horizontal and vertical lines are good but circular is not good.

Feedback 2
the lecturer said that I have to practice again because the A4 sheet calligraphy is not much better than practice paper.
As an instance letter g is nicely I wrote in the practice paper than the A4 sheet (quote).

Feedback 3
The lecturer said it's divorced because of no meaning and to express more details.

Feedback 4
I made 2 GIF. One is 'jump' and Mr. Vinod said it's too simple and letters are not jumping in one line. So I made another GIF 'kick' and Mr. Vinod and Mr.Shamsul said it was good.

Feedback 5
This time the lecturer gave feedback for e-portfolio and hard copy of portfolio. Overall is good but there were some mistakes of both portfolios. As an instance, letters should big in e- portfolio and re- print the module outline (4 parts per one side)

---

Reflection

Experience 1
I haven't got like this experience before because this is my first-time studying design. before I enroll to this major I learnt drawing from youtube so I did not study from basic of arts. by the way, when I start this major I felt it's difficult however while I'm studying in the class I learnt from basic I felt the confidence of my major.When I got this assignment I thought it's easy because I thought I can use the ruler but suddenly when the lecturer said that cannot use the ruler at that time I was quite confused because drawing lines without using by ruler is quite difficult. I took 3 days to complete this assignment and I failed 2 days. but while I was doing this work I felt my brain and hands are training. so its a good experience to me.

Experience 2
When the lecturer said to write letters I was confused how to write letters from a calligraphy letters because of that pen is not comfortable as the ball-point pen. I chose round hand calligraphy style it is quite easier than i expect. however, I suppose i couldn't write g, c and f very well. I focused more on writing these letters correctly than other letters.

Experience 3
When the lecturer said to draw our name I was confused how to draw.and it should show our character. then I drew some designs of my name. Later when the lecturer said to trace using by illustrator I chose the easiest one.I haven't used adobe Softwares before so this is a good chance to learn.

Experience 4
Firstly, When the lecturer said to make GIF I was shocked because I thought I should make for all verbs however it’s just only for one verb. Secondly, I was struggled to show the meaning of verbs especially, kick and hunt. Thirdly, I wanted to make quick GIF when the lecturer said to go home after the make GIF but it was not good GIF. However, I made a GIF again and I was so happy after I made the 2nd GIF because I felt this time I made a cool GIF.

Observation 1
I realised when I got an assignment I am struggling with my mind about self- organisation. I am facing this problem if I got at least one assignment. I'm thinking that I may not submit my works before the deadline so I am trying to finish my assignment within 3-4 days.

Observation 2
I suppose I developed my self-control when I do like this work. normally, I cannot focus on one thing easily but these calligraphy works helped me to develop my mind-control.

Observation 3
I think I developed self- confidence a little. and these works helpful to me to think in a creative way.

Observation 4
I think I learnt so many techniques of Illustrator and Photoshop softwares.

Finding 1
I found that I have to make time management. because I'm wasting my time a lot for other works and also I have to make self-confidence more (because I didn't study this field so I feel nervous of this subject.) and enjoy the subject.

Finding 2
I think now I have time- management of these works. However, unself-confidence is making me so stressful so sometimes I cannot finish my works quickly. I should make self-confidence of work.

Finding 3
I notice I'm getting anger when I failed the worked. I saw this time a lot it. I should try to control first more than other emotions.

Finding 4
After I made the GIF immediately in the classroom lecturer said it is not a good GIF because of so many mistakes of it. As an instance letters are not jumping in one line and font style is not suitable.

---

Books read throughout the assignment:

Typographic design: form and communication fourth edition

Typographic design: form and communication fourth edition

I learnt more about the history of typography from this book. Written by Rob Carter, Ben Day and Philip Meggs. I understood how letterforms changed before and after Gutenberg's invention.

Typography sketchbook

 Typography sketchbook

I learnt about some typographers and how did they do sketches of typography and also I found more information about Reza Abedini.