Typography // Task 1 Exercises

September 02, 2021

Typography // Task 1 Exercises

25/8/21-22/9/21 Week 1-5

Chan Siew Ni #0352518 #BDCM

Typography Task 1: Exercise 1&2

LECTURES

Week 1: I am actually missed the first class so it's hard to catch up everything but I will try to do it very soon. I have watched the recording and we have two lecturers , Mr Vinod and Dr Charles. During the first class, Mr Vinod gave us a brief on how to setup our e-portfolio. He also mentioned that we must update our blog weekly so that we can track our progress.

Week 2: Mr Vinod ask us to put our words design last week under the post. When the classes start, Mr Vinod and Dr Charles start to check our exercise and gave some comments on it. Then, Mr Vinod separated into a few small groups so that we can discuss about we exercise and give comment on our friend's exercise. I got lots of advise and I have already wrote it down to be improve after this. After 15 minutes, We went back to the main room and Mr Vinod and Dr Charles start to check on our blogs.

Week 2 Lecture 1

Typography: Development/Timeline

1)Early Letterform Development : Phoenician to Roman

Figure 1:Evolution from Phoenician Roman

Methods: i. Scratching into wet clay using sharpened stick
ii. Craving into stone using a chisel

Figure 1.1:Direction of the writing (boustrophedon)

The Greeks changed the direction of writing from right to left then left to right and they called it 'boustrophedon'

2) Hand Script from 3rd-10th century C.E

Figure 1.2: Square capitals, 4th/5th century

Method: The reed pen has to held at an angle approximately 60°

Figure 1.3: Rustic capitals, Late 3rd-Mid 4th Century

Rustic capitals: A compressed version of square capitals
Rustic capitals is faster and easier to write but in the same time it's also slightly harder to read

Figure 1.4:Roman cursive , 4th century

Reserved for documents of some intended performance and everyday transactions for speed
Roman cursive is the beginning of what we refer to as 'lowercase letterform'.

Figure 1.5: Uncials , 4th-5th century

Uncia: a twelfth of anything in Latin
Uncials: Letter that are one inch(one twelfth of foot) high
Uncials incorporated some aspect of the Roman cursive hand (A,D,E,H,M,U,Q)
More readable compare than rustic capitals

Figure 1.6:Half-uncials , 500

The formal beginning of lowercase letterforms
Replete with ascenders and descenders

Figure 1.7: Caloline miniscule, 925

Charlemagne: the first unifier of Europe
He introduced uppercase letter, lowercase letter , capitalization and punctuation(The standard for calligraphy for a century).

Figure 1.8: Blackletter(Textura) ,1300

"Everyone has their own style of writing"

Regional variations upon Alcuin's script came after the dissolution of Charlemagne's empire.
In northern Europe ,Blackletter/Textura gained popularity
In southern Europe, Rotunda(a rounder more open hand writing) gained popularity
In Italy, humanistic script is based on Alcuin's miniscule

Figure 1.9&1.10:Johann Gutenberg, Mainz, 1455, 42 line bible

Johann Gutenberg: who invented the modern day printing , good at engineering, metalsmithing and chemistry
Johann Gutenberg developed a mechanism where printing can be done faster.

Figure 1.11: Development of typefaces from 1460-1531

Figure 1.12: Development of typefaces from 1572- 20th century

3)Text type classification

Figure 1.13: Blackletter , 1450

The earliest printing type
Based upon the hand-copying style that were used for books in northern Europe

Figure 1.14: Oldstyle , 1475

Based upon the lowercase forms used by Italian humanist
The uppercase letterforms found inscribed on Roman ruins
The forms migrated across Europe, from Italy to England
Example fonts: Bembo Caslon Dante Janson..etc

Figure 1.15:Italic, 1500

The first italics were condensed and closed-set to allow more words per page
Italics were soon cast to complement roman forms

Figure 1.16: Script, 1550

Attempt to replicate engraved calligraphy forms
It has always enjoyed wide acceptance
Range from the formal and traditional to the casual and contemporary
Example fonts: Kuenstler Script,Mistral , Snell Roundhand

Figure 1.17: Transitional, 1750

A refinement of 'oldstyle' forms
Thick and thin relationships were exaggerated and bracket were lightened
Example fonts: Baskerville, Bulmer, Century, Time Roman

Figure 1.18: Modern, 1775

A further rationalization of 'oldstyle' letterforms
Serifs were unbracketed
Contrast between thick and thin strokes extreme
Example fonts: Bell, Bodoni, Caledonia, Didot , Walbaum

Figure 1.19:Square Serif /Slab Serif,1825

The Brackets were dropped because of the newly developed needs of advertising for heavy type in commercial printing
Example fonts: Clarendon, Memphis, Rockwell, Serifa

Figure 1.20: Sans Serif ,1900

The forms is first introduced by William Caslon IV in 1816 but its use did not become wide-spread
Variation towards humanist forms (Gill Sans)/Rigidly geometric(Futura)
Strokes were flared to suggest the calligraphic origin of the form(Optima)
Sans Serif also referred to grotesque and Gothic
Example fonts: Grotesk , Gill sans , Franklin Gothic...etc

Figure 1.21: Serif/Sans Serif , 1990

A recent development
This style enlarges the notion of a family of typefaces
Example fonts: Rotis , Scala , Stone

Week 2 Lecture 2

Typography: Basic/Describing Letterforms

-Knowing a letterform's component parts make it much easier to identify the typefaces-

Baseline- the imaginary line/the visual base of the letterforms
Median- the imaginary line defining the x-height of the letterforms
X-height-between median and baseline(any typefaces of the lowercase 'x')
Stroke-any line that define the letterforms
Apex/Vertex-the point that created to join two diagonal steams
Arm-short strokes of the stem
Ascender-portion of the stem of a lowercase letterform that is above the median
Barb-the half-serif finish on some curved stroke
Beak-the half-serif finish on some horizontal arms(short strokes)
Bowl-the rounded form=a counter(may be either open or closed)
Bracket-the transition between the serif and the stem
Cross Bar-the horizontal stroke in a letterform that join two steams together(A,H)
Cross Stroke-the horizontal stroke in a letterform that join two steams together(f,t)
Crotch-the interior space where two strokes meet
Descender-the portion of the stem of a lowercase letterform that is below the baseline
Ear- the stroke extending out from the main stem/body of the letterform
Em/en - an en is half size of an em
Finial- the rounded non-serif terminal to a stroke
Leg-short strokes off the stem of the letterform (the bottom of the stroke 'L'/inclined downward 'K' 'R')
Ligature- the character formed by the combination of two and above letterforms
Link- the strokes that connects the bowl(rounded form) and the loop (descender)of a lowercase 'g'
Loop-created in the descender if lowercase 'g'
Serif - the right-angled/ oblique foot at the end of the strokes
Shoulder- the curved strokes that is not part of the bowl ('h' 'n')
Spine-the curved stem of the 'S'
Spur- the extension/the articulates/the junction of the curved and rectilinear stroke
Stem-the significant vertical/oblique stroke
Stress- indicated by the thin stroke in round from ('O' 'e')
Swash-the flourish that extends the strokes of the letterform
Tail- curved diagonal stroke at the finish of letterforms
Terminal-finish of a strokes without a serif

Week 3: Mr Vinod ask us to post our word express that done by adobe illustrator to the facebook post and he start to give some suggestion on our work. After that, He break us into some room and we started to do type expression animation.

Week 3 Lecture 3

Typography: Text/ Tracking: Kerning and Letterspacing

Kerning: automatic adjustment of space between letter
Letterspacing: add space between the letters
Tracking: additional and removal of space in a word or sentence

Figure 3: Without Kerning(Left) , With Kerning (Right)

If there are too much spacing or too less spacing of each word, it may reduce readability of the text.
Designers always letterspace uppercase letters
As a student designer , we are not encouraged to letterspace the word form

Figure 3.1 Differences of tracking

Normal tracking- easier to read

Typography: Text / Formatting Text

Flush left(keep left):

most 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(text on a white page)

Figure 3.2 Flush Left

Centered :

the format imposes symmetry upon the text
assigning equal value and weight to both ends of any line
It transforms field if text into shapes
Harder to read

Figure 3.3: Centered

Flush right (keep right):

The format places emphasis on the end of a line as opposed to its start
Can be useful in situations like captions where the relationship between text and image might be ambiguous without a strong orientation to the right.

Figure 3.4: Flush Right

Justified(Centering):

This format imposes a symmetrical shape on the text
Achieved by expanding or reducing spaces between words and letter(sometimes)
The resulting openness of lines can produce ‘rivers’(gaps) of white space
Careful attention to line breaks and hyphenation to ament this problem

Figure 3.5 : Justified

Designer tent to set type one way or another depending on several factors:

Personal preference
Prevailing culture
The need to express play important roles

Typographer’s first job--clear, appropriate presentation of the author’s message
If you see the type before you see the words, change the type

Typography: Text / Texture
It is important to understand how different typefaces feel as text
Different typefaces suit different messages
A good typographer has to know which typeface best suits the message
When X-height is bigger than ascender and descender, it is more readable

Figure 3.6: Anatomy of A Typeface

Typography: Text/ Leading and Line Length
The goal in setting text type: easy, prolonged reading

Type size: large enough to be read easily at arm length (imagine yourself holding a book in your lap)
Leading: text that is set too tightly encourages vertical eyes movement , the reader can easily loose his / her place
Line length: shorter lines require less leading. The best line length is to keep between 55-65 characters

Typography: Text/Type Specimen Book
-A type specimen book shows samples of typefaces in various different sizes. It also provides an accurate reference for type, type size, type leading, type line length.
-Without it, no one can make a reasonable choice of type
-You can only determine choice on screen when its final version is to read on screen
-Compositional requirement: Text should create a field that can occupy a page or a screen. Having a middle gray value is important.

Figure 3.7: Sample Type Specimen Sheet

It is often useful to enlarge type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below. Look closely at an actual print out of your work. Unless you are designing for screen, then judging type on screen is accurate.

Week 3 Lecture 4

Typography: Text / Indicating Paragraphs

There are several options for indicating paragraphs. First of all, ‘pilcrow’ (¶), a holdover from medieval manuscripts

If your text size is 10pt, ideally the leading (line space) will be 12pt-13pt

Hence if the leading (line space) is 12pt, then the paragraph space is 12pt too

This ensures cross-alignment across columns of text

As a typographer we use term leading

Figure 4: Line spacing vs leading

In indent is the same size of the line spacing/ the same point size of your text

Indentation is best use when the text is justified

Figure 4.1: Standard indentation

The method of extended paragraph below creates unusually wide columns of text

Figure 4.2: Extended paragraph

Typography: Text/ Widows and Orphans
-Designers must take great avoid the occurrence of it
A widow: a short line of type left alone at the end of a column of text
An orphan: a short line of type left alone at the start of new column
The only solution to widow: rebreak your line endings through out your paragraph so that the last line of any paragraph is not noticeably short

Figure 4.3: Widow and Orphan

Typography: Text/ Highlighting Text

Figure 4.4: Method example 1, Italic

Figure 4.5: Method example 2 , bold

Figure 4.6: Method example 3, change typeface and bold

Figure 4.7: Method example 4, change text colour

If you change the typefaces make sure to reduce aligned figures (numbers) / all capital acronyms embedded in text by .5 to ensure visual cohension of the text

Figure4.8: Univers vs Times

Figure 4.9: text vs number

Adding a grey box is another method to highlight the text but remember to maintain the left reading axis (right example) of the text ensures readability is at the best

Figure 4.10:Method example 5,adding grey box

Sometimes it is necessary to place certain typographic elements outside the left margin of column of type (extending as opposed to indenting) to maintain a strong reading axis

Figure 4.11:Method example 6, place element outside the left margin

Quotation marks like bullets can create a clear indent
Prime is not a quote but due to the limited number of keys they were substituted

Figure 4.12: Quotation marks, Prime(top)

Typography: Text/Headline within Text
A head: a clear break between the topics within a section. A head is set larger than the
text, in small caps and in bold.

Figure 4.13: A head

B head: subordinate to A head. B head indicate a new supporting argument or example for the topic.

Figure 4.14: B Head

C head: although not common, highlights specific facets of material within B head text.

They not materially interrupt the flow of reading. Remember to space twice (M space)

between C head and the beginning of the text.

Figure4.15: C Head

Hierachy= putting together a sequence of subheads(but there's no single way to express hierachy)
Cross aligning can be achieved when the leading of headline is twice of the text

Figure4.16: Cross alignment

Week 4: Mr Vinod ask us to post our Gif animation at the Facebook post then after that he put all of us into a breakout room and ask us to watch the lecture video text formatting 1:4-4:4 and we can ask each others when we face problems. Then, we go back to main room and he ask us to refer to the senior's blog to improve our blog. After that , he gave us some specific feedback on our gif animation.

Week 4 Lecture 5

Typography: Letters/ Understanding letterforms

Figure 5: Uppercase 'A' of Baskerville

-It is asymmetrical, it is easy to see two different stroke weights of the Baskerville stroke form
-Each bracket connecting the serif to the stem has a unique arc

Figure 5.1: Uppercase 'A' of Univers

-This uppercase letter forms may appear symmetrical but actually the width of the left slope is thinner than the right stroke
-Both Baskerville(figure 5) and Univers(figure 5.1) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive

Figure 5.2: Lowercase 'a' of Helvetica(left) and Univers(right)

The complexity of each individual letterforms is neatly demonstrated by examining the lowercase ‘a’
Differences between two letterforms:

1. how the stems of the letterforms finish

2. how the bowls meet the steams quickly reveals the palpable.

Typography: Letters/ Maintaining x-height
x-height: the size of the lowercase letterforms
* Curved strokes such as in ‘s’ must rise above the median/ sink below the baseline to appear to be same size as the vertical and horizontal strokes they adjoin

Figure 5.3: maintaining x-height of each letter

Typography: Letters/ Form/ Counterform
As important as recognizing specific letterforms is developing a sensitivity to the counterform (counter) or the space.
When letters are joined to form words, the counterform includes the spaces between them
How well you handle the counter when you set type = how easily we can read

Figure 5.4: Grey part(letter at above)is the counterform and black part is the letter

grey part(letter at below) is letter and black part is the counterform

To understand the form and counter of a letter is to examine them in close details

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

Figure 5.5: Details of letter 's' Helvetica (left) and 'g' Baskerville(right)

Typography: Letters/ Contrast
The basic principles of Graphic Design apply directly to typography
Contrast- the most powerful dynamic in design
The simple contrast produces numerous variations

Figure 5.6: Contrast examples in typography

INSTRUCTIONS

Task 1: Exercise 1: Type Expressions
Mr Vinod ask us to design some words based on the poll
So here's the result of the poll

Terror (Mandatory)
Error
Melt
Gone
Light
Pour
Shiver

Sketches

Figure 7: Pencil Sketching , 1/9/21

Figure 7.1:Word 'Error' Done by digital sketching, 1/9/21

For the first design, I was trying to make the word flash back left and right and the same idea goes to the second design too.

Figure 7.2: Word 'Light' Done by digital sketching,1/9/21

I like the third one because it feels like really related to the word 'light' . The word 'i' is like a candle brighten the word 'L' and 'g'.

Figure 7.3: Word 'Melt' Done by digital sketching, 1/9/21

The first word design make me think of the ice melting. When I think of what else can be melt , cheese came up my mind so I decided to draw it.

Figure 7.4: Word 'Terror' Done by digital sketching, 1/9/21

The word terror is actually quite hard to think the expression. I decided to change the letter 'o' into a ghost face. I like the second one the most, the 'T' is a sword and 'r' is a gun.

2.Digitalize

Figure7.5: 'Light' done by adobe illustrator , 5/9

The word 'light' I was trying to make it flying because it is too feathery and I added some lines to make it more alike. I choose futura light condensed is because the word has to be thin so that it can fly.

Figure 7.6: Melt done by adobe illustrator , 5/9

The word 'melt' I try to make it is melting like a stair.

Figure 7.7: Terror done by adobe illustrator , 6/9

I draw a hanged man on 'terror' word to make it feel like 'T' is the terrorist and 'e' is the victim.

Figure 7.8: Error done by adobe illustrator, 7/9

I make some effects on the word 'error' and I added a big cross behind it to bring out this is an error.

Final Outcome

Before changes

Figure 8 : Word Express Attempt 1

After the class , Mr Vinod and Dr Charles gave me some feedback so I do some changes on it and this is my final outcome for Task 1.

After changes

Figure 8.1: Terror word after changes , 14/9/21

Figure 8.2: Final Word Expression after changes 22/9

Figure 8.3: Final Word Expression after changes , 22/9/21

I removed the line in the word 'light'. Then, I also make some changes on the word 'Melt' , I reduce the flow and I make the word 'M' looks like it is melting. After that, I removed the hanged man on the word 'Terror' and I draw two guns on the word 'T' to make it like the terrorist holding the guns and the remain words 'error' is the victims. Lastly, I arranged the word 'error' irregular to make it feel like it is wrong and having problems.

Final GIF Animation

Figure 8.3: Gif animation with word 'Melt' , 12/9/21

Figure 8.4 Final Gif after changes, 20/9/21

Task 1 : Exercise 2 : Text Formatting

Figure 4: instruction from module information booklet

Lecture 1:4 Text Formatting Exercise

Figure 9: Text formatting without kerning (in progress), 15/9

Figure9.1 :Text formatting with kerning , 15/9

Lecture 2:4 -4:4 Text Formatting Exercise
Notes From Lecturer:

Font size (8–12)
Line Length (55–65/50–60 characters)
Text Leading (2, 2.5, 3 points larger than font size)
Ragging (left alignment) / Rivers (Left Justification)
Cross Alignment
No Widows / Orphans

Figure 9.2: Progression of text formatting , 15/9/21

Figure 9.3: Layout 1, 15/9/21

Figure 9.4 Layout 2, 15/9/21

Figure 9.5 Layout 3 , 21/9/21

Figure 9.6 Layout 4 , 21/9/21

Fonts: Adobe Caslon Pro (Regular)
Point size: 27pt(heading) , 15pt(sub-heading) , 11pt(body text) , 11pt(caption)
Leading: 13pt(body text), 17pt(sub-heading),29pt(heading)

Paragraph spacing: 13pt/ 3.881mm

Line length: 60

Alignment: Justify with last line aligned left

Final Outcome: Text Formatting

Figure10 :Final text formatting (jpeg) , 23/9

Final Text Formatting (PDF)

FEEDBACK

Week 2:(1/9/2021)
Specific Feedback: I should do more sketches and try to explore a new type of font.

Week 3:(8/9/21)

Specific Feedback: Mr Vinod and Dr Charles both gave me lots of suggestion on my word express attempt 1. For the word 'Light' Mr Vinod ask me to remove the lines. For the word 'error' Dr Charles said that the cross behind is unnecessary. And for the word Terror, the 'hanged man' has been banned. For the word 'melt' Mr Vinod suggest me that the water flow could be lesser and I can add some effects on the word 'M'.

Week 4 :(15/9/21)

General Feedback: Mr Vinod and Dr Charles need us to do more improvement in our blog. We were encouraged to refer the Senior's blog and do some changes. Dr Charles also mentioned that when we are writing feedback we can reflect some important learning points of the process.

Specific Feedback: I show the word express gif making to Mr Vinod and he says that overall is good but I can try to 'melt' the entirely word and I can pause at the last part longer.

Week 5:(22/9)

General Feedback: Mr Vinod says that we must look and understand feedback that given by him and also do changes in the blog and also our exercises.

Specific Feedback: I didn't submit the final jpg of exercise 1-type expression(But now has been updated). Good work on Gif animation . No indication of final submission for task 1 exercise 2, hyphenation has not been turned off and cross alignment not achieved in figure 9.4.

REFLECTIONS

Experience
The lecture is quite interesting because I can see my classmates work and sometimes it can inspire me too. I also feel that I still have so much to learn in this module because I realized that I am not knowing much knowledge of typography.

Observation
I observed that I will notice the word in real life more often after the classes, I will observe their expression and also the fonts too. I also observed that I should really do more further reading to enhance my ideas and also my design. I observed that after added kerning could be a huge change and It can let viewers look at the article more clearer and easier to read.

Findings
I found that my ideas are quite weak and I can’t think much ideas unless I do some research on it. I also found that I need improvement on using Adobe software to do my exercise.

FUTHER READING

Figure 11: Typographic Design: Form and Communication

Authors : Rob Carter , Philip B. Meggs , Ben Day , Sandra Maxa , Mark Sanders
Originally published: 1985

6th Edition

Search This Blog

Chan Siew Ni//0352518