Typography - Task 1: Exercises

4.4.2023-2.5.2023 / Week 01-Week 05
Tan Zhao Yi / 0363285
Typography / Bachelor of Design (Honours) in Creative Media
Task 1 / Exercises

LIST

Lectures

Lecture 1: Introduction of Typography

Typography, as a basic skill that can be used in many fields we will eventually go in, is the creation or animation of typefaces. It is an art to make words legible, readable and appealing when displayed, and achieve visual harmony. It is also considered the style arrangement, appearance of letters, numbers and symbols, and presenting information. Mr. Vinod gave us some articles, involving the "Early Evolution of Roman Letters 1". Over time, three styles of handwriting had appeared, which will be stated below:

Fig 1.1.1. Example of Square Capitals
The first style, which is known as square capitals, was used mostly in formal situations. Their precision and consistency shows that they were drawn attentively.

Fig 1.1.2. Example of Rustic Capitals
After realizing Square Capitals are using too much time and space, scribes started to make it narrower and simpler to draw to save the time and cost of producing documents and books. Fig 1.1.2 shows the second style of Roman Letters after evolving, which is Rustic Capitals. 

Fig 1.1.3. Example of Roman Cursive
Finally, Fig 1.1.3 shows the example of Roman Cursive. It is an ideal way to record business transaction, bookkeeping and similar uses which were not usually intended to be permanent.

Then, Mr. Vinod explains the difference between Font and Typeface.
Font refers to the individual font or weight within the particular typeface. 
Eg. Arial Regular, Arial Bold, Arial Italic.

Typeface refers to the whole family of font or weight that share the similar characteristic. As we can see from the above example, Arial is the typeface. 
Eg. Courier, Georgia, Times.
Lecture 2:  Development of Typography

1. First Letterform Development: Phoenician to Roman
In the early time, writing meant scratching into wet clay with a sharpened stick or carving into stone using a chisel. The uppercase letterforms are the only letterforms for nearly 2000 years. They are a simple combination of straight lines and circles, which was influenced by the writing tools. 
Fig 1.2.1. Phoenician Votive Stele Carthage, Tunisia

Fig 1.2.2. Evolution of Phoenician Letter
Fig 1.2.2 shows that the way we write in terms of Modern Latin and Early Arabic is evolved by Phoenician letterforms.

Phoenician wrote from right to left. 
Greeks developed a writing style called boustrophedon, which wrote left to right. As they changed the writing direction, they also changed the orientation of the letterforms. 
Fig 1.2.3. Evolution of 'A' from Phoenician Letter to Roman Letter

2. Hand Script from 3rd-10th century C.E.
Square Capitals were the written version that was found in a Roman monument. They started to use read pen held at an angle of 60° off the perpendicular, that was the serifs added to the finish of the main strokes.
Fig 1.2.4. Square Capitals

Rustic Capitals are the compressed version of Square Capitals. The pen was held at an angle of approximately 30° off the perpendicular. This also makes them slightly harder to read due to their compressed nature.
Fig 1.2.5. Rustic Capitals

Roman Cursive is normally used for everyday transactions in which forms were simplified for speed. This is also the beginning of lowercase letterforms, as a result of writing uppercase letterforms quickly.
Fig 1.2.6. Roman Cursive

Uncials involved some aspects of the Roman Cursive letter especially for the letters of A, D, E, H, M, U and Q. Some scholars think Uncials refers to letters which are 1 inch (one twelfth of foot) high as 'Uncia' means 12 in Latin. 
Fig 1.2.7. Uncials
Half-Uncials, a further formalization of the cursive hand, which is also the formal beginning of the lowercase letterforms.
Fig 1.2.8. Half-Uncials

Charlemagne used both majuscules (uppercase), minuscules, capitalisation and punctuation which standardise calligraphy in Europe for a century.
Fig 1.2.9. Caloline Miniscule

3. Blackletter to Gutenberg's Type
Blackletter, which also known as textura was used popularly in Northern Europe.
Fig 1.2.10. Blackletter

Johann Gutenberg's type required a different brass matrix or negative impression for each letterform.
Fig 1.2.11. Johann Gutenberg's Type

4. Humanist Script to Roman Type (1460)

5. Dutch Printing (1600)
Text Type Classification
  • 1450 Blackletter: form based upon hand-copying styles (Eg. Cloister Black)
  • 1475 Oldstyle: based on lowercase forms used by Italian humanist scholars for book copying and uppercase forms found inscribed on Roman ruins (Eg. Bembo)
  • 1500 Italic: condensed and close-set, soon cast to complement roman forms
  • 1550 Script: attempt to replicate engraved calligraphic forms (Eg. Mistral)
  • 1750 Transitional: refinement of Oldstyle form, achieved in part for casting and printing (Eg. Time Roman)
  • 1775 Modern: a further rationalization of old style letterforms, serifs are unbracketed and extreme contrast between thick and thin strokes
  • 1825 Square Serif / Slab Serif: heavily bracketed serif, little variation between thick and thin stroke (Eg. Serifa)
  • 1900 Sans Serif: Eliminated serifs (Eg. Futura)
  • 1990 Serif / Sans Serif: enlarge notion to include both serif and sans serif alphabets (Eg. Rotis)
Lecture 3: Text Part 1

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

Fig 1.3.1. Text with and without Kerning

Fig 1.3.2. Normal Tracking, Tight Tracking and Loose Tracking
The way of tracking might increase the difficulty of reading. When we add letterspacing, we are breaking the counter form, which reduces the readability of the particular word or sentence.

2. Text Formatting
A. Flush Left
This format closely mirrors the asymmetrical experience of handwriting. They start from the same point and ends wherever the last word of the line ends.
Fig 1.3.3. Flush Left Text
B. Centered
This format imposes symmetry on the text, assigning equal value and weight to both ends of any line. It transforms fields of text into shapes.
Fig 1.3.4. Centered Text
C. Flush Right
This format places emphasis on the end of a line as opposed to its start. It can be useful when the text should create relationship with the image.
Fig 1.3.5. Flush Right Text
D. Justified
This format imposes symmetry on the text. It is achieved by the addition or removal of spaces between words, and sometimes, between letters.
Fig 1.3.6. Justified Text
When setting the type field, keep reminded the major point -- clear, appropriate presentation.
If you see the type before you see the word, change the type. Different typefaces suit different messages.

i) Type Size: Text should be large enough to be read easily.
ii) Leading: Don't set texts too tightly, that confuses reader's eyes. Don't set texts too loosely, that distracts readers mind.
iii) Line Length: Shorter lines require less leading. A good rule of thumb is to keep the length between 55-65 characters.

Type Specimen Book
A type specimen book is printed pages that shows samples of typefaces in various different sizes. It provides a reference of type, type size, type leading, type line length etc. 
Fig 1.3.7. Sample of Type Specimen Sheet

Fig 1.3.8. Contrast between Texts
In Fig 1.3.8, on the left is an ideal text of having middle grey value, however on the right, it is a series of stripes.
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.
Lecture 4: Text Part 2

Indicating Paragraphs
There are several options for indicating paragraphs.
 
A. Pilcrow - ¶
Fig 1.4.1. Pilcrow
Instead of creating paragraph spaces, the writers usually use a pilcrow to indicate paragraph space.
 
B. Line Space
Fig 1.4.2. Line Space
If the typeface is in 10pt, the paragraph space should ideally be 2.5pt-3pt larger. This maintains cross-alignments across columns of text. Don't just press 'Enter' twice while creating line space.
 
C. Standard Indentation
Fig 1.4.3. Standard Indentation
Generally, the indent is in the same size of the text of line spacing. Indent too much will creates too much ragging on the left. Indentation is to save spaces in newspaper to reduce the cost of printing pages. 
 
D. Extended Paragraphs
Fig 1.4.4. Extended Paragraph
Extended paragraphs creates wide columns on text, sometimes used on academic writing.
E. Widows and Orphans
Fig 1.4.5. Widows and Orphans
Widow: A short line of type left alone at the end of a column of text.
Orphan: A short line of type left alone at the start of a new column.
We should avoid this way for indicating text to ensure there is no single word left at the end of that particular paragraph.

F. Highlighting Text
Different kinds of emphasis requires different kinds of contrast. 
Ways of highlighting text:
  • Italic
  • Change the colour of text (Black, Cyan, Magenta)
  • Differentiate by using larger body and increase the boldness
  • Change the typeface and increase the boldness
While changing the typeface, sometimes we will have to adjust the point size.
Fig 1.4.8. Changing Point Size
To ensure visual cohesion of text, reduce aligned figures, usually known as numbers, or all capital acronyms embedded in text by 0.5.
  • Placing a field of colour at the back of text
  • Placing certain typographic elements (bullets, quotation marks)
G. Headline within Text
In the following visual there have been labelled (A, B, C) according the information sequences. A typographer have to make sure that these heads clearly signify to the reader the relative importance of text and to their relationship to each other.
Fig 1.4.9. Samples of Headings 
Fig 1.4.10. Samples of Sub-headings
Fig 1.4.11. Samples of Sub-subheadings

H. Cross Alignment
Fig 1.4.12. Cross Alignment 
Lecture 5: Basic

Describing Letterforms
  • Baseline: The imaginary line at the base of letterform
  • X-height: The height of  'x' in any typeface
  • Median: The imaginary line defining the x-height of letterform
  • Stroke: Any line that defines the basic letterform
  • Apex / Vertex: Point created by joining two diagonal stems
  • Arm: Short strokes off the stem of the letterform
  • Ascender: The portion of the stem of a lowercase letterform that projects above the median
  • Descender: The portion of the stem of a lowercase form that projects below the baseline
  • Barb: The half-serif finish on some curved stroke
  • Beak: The half-serif finish on some horizontal arms
  • Bowl: Rounded form that describes a counter, opened or closed
  • Bracket: Transition between the serif and stem
  • Cross Bar: The horizontal stroke that joins two stems together (Eg. A, H)
  • Cross Stroke: The horizontal stroke that joins two stems together (Eg. f, t)
  • Crotch: The interior space where two strokes meet (Eg. K, V)
  • Ear: Stroke extending out from the main stem or body of the letterform
  • Em: The distance equal to the size of the typeface
  • En: Half of the em
  • Finial: Rounded non-serif terminal to a stroke
  • Leg: Short stroke off the stem of letterform
  • Ligature: Character formed by the combination of two or more letterforms
  • Link: Stroke connecting the bowl and the loop of a 'g'
  • Loop: Bowl created in the descender of the 'g' in some typefaces
  • Serif: Right-angled or oblique foot at the end of the stroke
  • Shoulder: Curved stroke that is not part of a bowl
  • Spine: Curved stem of the S
  • Spur: Extension the articulates the junction of the curved and rectilinear stroke
  • Stem: The significant vertical or oblique stroke
  • Stress: The orientation of the letterform, indicated by the thin stroke in round forms
  • Swash: The flourish that extends the stroke of the letterform
  • Tail: The curved diagonal stroke at the finish of certain letterforms
  • Terminal: The self-contained finish of a stroke without a serif
The Font
  • Uppercase
  • Lowercase
  • Italic
  • Punctuation, Miscellaneous Characters
  • Small Capitals: Uppercase drawn to the x-height of the typeface
  • Uppercase Numeral: Numerals with same height as uppercase letters
  • Lowercase Numeral: Numerals set to x-height with ascenders and descenders
  • Ornaments: Used as flourishes in invitation or certificates
Describing Typeface
  • Roman: Uppercase forms are derived from inscription of Roman monuments
  • Italic: Oblique conversely are based on roman form of typeface
  • Boldface: A thicker stroke than the roman form
  • Light: A lighter stroke than the roman form
  • Condense: A version of roman form, often called 'compressed'
  • Extended: An extended variation of a roman form
Fig 1.5.1. Describing Typeface

Comparing Typeface
Fig 1.5.2. Comparing Typeface
Lecture 6: Understanding
  • Comparison of letterform
  • Maintaining the x-height
  • Form / Counterform
  • Contrast in various variations: small+organic / large+machined
Fig 1.6.1. Contrast in Text
Lecture 7: Screen and Print

Print Type
  • ensure text is smooth, flowing and pleasant for reading
  • common typeface: Caslon, Garamond, Baskerville
Screen Type
  • enhance readability and performance onscreen in a variety of digital environments
  • important adjustment - typefaces intended for smaller size is more open spacing
  • hyperlink / hyperactive link
  • font size for screen: commonly 16 pixels
  • system fonts for screen / web safe fonts: Lato, Ariel, Times, Courier etc.
  • pixel differential between devices
    Fig 1.7.1.Pixel Differential Between Devices
Static VS Motion
Static Typography: billboards, poster, magazines etc.
Motion Typography: music videos and advertisement
INSTRUCTIONS


Task 1: Exercise 1 - Type Expression

For Exercise 1, we were given seven words to choose four of them in class, which I have selected:
  • speed
  • shatter
  • melt
  • kill 
We are limited to only 10 Typefaces which is Bembo, Bodoni, Font Lab 5, Futura, Gill Sans, ITC Garamond, ITC New Baskerville, Janson Text LT, Serifa and Univers LT.

1. Sketches
Fig 2.1.1. Type Expression Sketches, Week 1 (11.4.2023)

For Fig 2.1.1, these are my sketches that have been drawn by hand. To be honest, it is quite hard for me to follow the exact typefaces by hand drawing. After the feedback section in class, I had been reminded that I should not use so much graphical elements like melt #1 #2 and speed #1 #2 #3. 

2. Digitalization

Fig 2.2.2. Rough Digitalization Work, Week 2 (17.4.2023)

I have given many tries for each word and Fig 2.2.1 shows some of my rough digitalisation work. I redo the work for the word 'Melt' and 'Speed'. The word 'Speed' should be more active to express the movement. I came out some other design for all the four words, and made some improvement for the word 'Shatter' following the feedback given by Mr. Vinod. 

A. Speed
Fig 2.2.2. "Speed" Digitalisation Progress, Week 2 (17.4.2023)
I was thinking to make some scratches to express the movement. Then, I realised the oblique letterform can express the meaning well too.
B.Melt
Fig 2.2.3. "Melt" Digitalisation Progress, Week 2 (17.4.2023)
For the word 'melt', at first, I drew some liquid under it to express the progression of melt, however, I found it was popularised so I decided to start it over. I changed it as the whole word is melting, rather than just the bottom part.
C. Kill
Fig 2.2.4. "Kill" Digitalisation Progress, Week 2 (17.4.2023)
There is not much progression for "kill" because I'm quite satisfied with the sketches. Therefore, I just chose my favourite sketch and digitalised it. I made the sword bigger and longer to singularise it.
D. Shatter
Fig 2.2.5. "Shatter" Digitalisation Progress, Week 2 (17.4.2023)
I've made some changes after the peer feedback section. Instead of making the 'T's work like a tool that shatters the other letter, they shattered as they do.

Final Digitalisation Work

Fig 2.2.6. Final Digitalisation Work (JPG), Week 2 (17.4.2023)

 
Fig 2.2.7. Final Digitalisation Work (PDF), Week 2 (17.4.2023)
Fig 2.2.6 and Fig 2.2.7 shows my final digitalisation work, which was after the whole process I had stated. I choose the one which is my favourite for each words. 

3. Animation    
   Fig 2.3.1 First Attempt at animating 'Melt', Week 3 (23.4.2023)
At my first try of animating 'Melt', I only use five art boards just to roughly see their effects. Obviously, it is not enough and make it seems like lagging.
      
Fig 2.3.3. Second Attempt at animating 'Melt', Week 3 (23.4.2023)
At my second try, I created more art boards to make it melt smoother. The M's melting part is uneven because I was trying to make it seems like liquid.

    
Fig 2.3.4. Third Attempt at animating 'Melt', Week 3 (23.4.2023)
At my third attempt, I wanted to make it melts down the art board. I added a few more art board to create the melting process.

Final Animation of Type Expression 'Melt'

Fig 2.3.5. Final Animation of Type Expression 'Melt', Week 3 (23.4.2023)
Fig 2.3.5 shows my final animation of type expression 'Melt'. After the peer feedback section, I decided to create more frames to show the word is melting more obviously. This GIF contains a total of 22 frames.
Task 1: Exercise 2 - Text Formatting

1. Kerning and Tracking
We were given 5 lecture videos to watch for this exercise.
At first, I practised kerning and tracking my name by using the 10 fonts provided.


Fig 3.1.1. Without Kerning, Week 4 (30.4.2023)


Fig 3.1.2. With Kerning, Week 4 (30.4.2023)

Fig 3.1.3. With Kerning (2), Week 4 (30.4.2023)

2. Layout
After watching the lecture playlist, I started doing the layout exercise with the text provided.
Fig 3.2.1. Layout Progress, Week 5 (1.5.2023)

Fig 3.2.2. Layouts, Week 5 (1.5.2023)
Fig 3.2.2 shows my layout works after kerning and tracking. I found out hard to adjust the weight and length between letters while remaining the visual harmony because some of the words will separate from line to line. Other than that, I need to avoid the appearance of the widow and orphan too. 

Fig 3.3.3. Layouts (2), Week 5 (2.5.2023)
I came out two more layouts and started to kern the words. I changed the image too as the last one is not relevant. To avoid widows and orphans, I gave many tries on changing the font size until I settled for 10. Out of the four, I like the two on the left. After I adjusted the leadings and grids, I decided to go with the layout on the top left.

Final Text Formatting Layout

Head
Font/s: Bodoni 72 Smallcaps
Type Size: 72pt (headline), 12pt (byline)
Leading: 86.4pt (headline), 14.4pt (byline)
Paragraph Spacing: 0pt

Body
Font/s: Janson Text LT Std (body text), Bodoni 72 Smallcaps (caption)
Type Size: 10pt (body text), 7pt (caption)
Leading: 12pt (body text), 8pt (caption)
Paragraph Spacing: 12pt (body text)

Characters per-line: 58
Alignment: Left Justified

Margins: 12.7mm (top, left, right), 50mm (bottom)
Columns: 4
Gutter: 5mm


Fig 3.3.4. Final Text Formatting Layout (JPG), Week 5 (3.5.2023)

Fig 3.3.4. Final Text Formatting Layout (PDF), Week 5 (3.5.2023)
Fig 3.3.4. Final Text Formatting Layout with Grids (JPG), Week 5 (3.5.2023)
Fig 3.3.4. Final Text Formatting Layout with Grids (PDF), Week 5 (3.5.2023)
FEEDBACK

Week 2
Specific Feedback: For the word 'MELT' and 'SPEED', it is too graphical, on a scale of 1-5, I will give myself 2 for the ideas. I should reduce the graphs and make it sustainable without it. The idea of the 'I' in the word 'KILL' became a knife is good, I'll give it 3, just sharpen the blade. For the word 'SHATTER', it will be better if the letter 'T' is shattered too, I'll give it a 3.
General Feedback: It is important for us to match the expressions and the meaning of the word correctly. Don't add too much layer, it complicated. Take the square as a basic, connect it with the words.

Week 3
Specific Feedback: For the word 'SPEED', it doesn't express the most for the meaning of the word. The paths and compositions could be better. It might be better to make it bigger in the art-board. The scratches are not impactful.
General Feedback: We should at least finished three lectures in Week 3. Be aware of the composition of the words.

Week 4
Specific Feedback: The melting process works. Create more frames to make it smoother. General Feedback: Create more frame to make the animation smoother. It requires 24-25 artboard for 1 second of GIF.

Week 5
Specific Feedback: Kern and track the letters. Don't spoil the justified text structure. You can adjust the uppercase letterforms by within 0.5 of size. General Feedback: Don't forget to kern and track the words even it is justified. Use relevant image and choose the appropriate typeface.
REFLECTIONS

Experience
Actually I am feeling quite anxious during classes because I am afraid that I can't provide good design, however the lecturer told us once that most of us does too. We don't have to worry about that. All we have to do is try our best and do more research, sometimes looking at others design helps us very much too.

Observations
I observed that I should straight away start working when the lecturer is guiding us because I can retain the information more effectively. I also noticed that my sketches doesn't really express what I really want, I should draw more by hand.

Findings
I found out that designers should not think too much when they are working. When I am working, I realised that I often express too much on the work, it makes it complicated and reduced the readability.
FURTHER READING

Fig 3.1.1. Asian Typography by Sandu Publication, Week 3 (23.4.2023)

Asian Typography shows over 100 works from Japan, Korea, China, Taiwan, and Hong Kong, which all exhibit extreme innovation. Asian typography emphasises the importance placed on balance and harmony in design. In Chinese and Japanese calligraphy, the placement and size of each stroke are carefully considered to create a visually pleasing composition. This principle extends to other forms of Asian typography, such as the design of logos, posters, and other graphic materials.

Fig 3.1.2. Design School: Type by Richard Poulin, Week 5 (6.5.2023)

This book is divided to three sections: fundamentals, history and practice. Fundamentals includes terminology, analogy of letterforms and typeface classifications. The history part explores from the earliest letterform to nowadays digital fonts. Finally, in the last section, this book provides practical tips for designing with types, including layout, hierarchy, spacing, colour etc.
. · ˚ ✧ Quick Links ✧ ˚ · .

Comments

Post a Comment