Typography/Task 1: Exercises

2.9.2022 - 7.10.2022/Week 1 - Week 6
Sim Jian Xiong (0356498)
Bachelor of Design (Hons) in Creative Media
Task 1: Exercises

LECTURES

Week 1: Typography Development

Early letterform development: Phoenician to Roman

4th century B.C.E - Phoenicians scratched into wet clay with sharpened stick or craved into stone with a chisel
5th century B.C.E - The Greeks changed the direction of writing from right to left into left to right (boustrophedon)
Late 1st Century B.C.E - Etruscan (and then Roman) carvers worked in marble painted letterforms before inscribing them

Hand script from 3rd - 10th century C.E

4th-5th century C.E - Square capitals can be found in written Roman monuments
Late 3rd-mid 4th century C.E - Compressed version of square capitals is developed
4th century - Lowercase letterforms were developed due to writing fast
4th-5th century - Uncials incorporated some aspects of Roman cursive in the shape of A,D,E,H,M,U and Q
C. 500 - A further formalization of the cursive hand mark the beginning of lowercase letters
C. 789 - Charlemagne, the first unifier of Europe since the Romans, issued an edict to standardized all ecclesiastical texts

Text type classification

1450 Blackletter - the earliest printing type, its forms were based upon hand-copying styles that were used for books in northern Europe, e.g. Cloister Black, Goudy Text
1475 Oldstyle - based upon the lowercase forms used by Italian humanist scholars for book copying, e.g. Bembo, Calson
1500 Italic - Echoing contemporary Italian handwriting, the condensed italics allowed more words per page, e.g. All text typefaces have been designed with accompanying italic forms
1550 Script - Originally an attempt to replicate engraved calligraphic forms, e.g. Kuenstler Script, Mistral
1750 Transitional - A refinement of oldstyle forms. Brackets were lightened, e.g. Baskerville, Century
1775 Modern - Represents a further rationalization of oldstyle letterforms, e.g. Bodoni, Bell
1825 Square/Slab Serif - A little variation between thick and thin strokes. Brackets were dropped, e.g. Memphis, Serifa
1900 Sans Serif - Eliminated serifs together, e.g. Gill Sans, Futura, Univers
1990 Serif/ Sans Serif - Includes both serif and sans serif alphabets, e.g. Rotis, Scala

Week 2: Describing Letterforms

Baseline - imaginary line visual base of the letterforms
Median - imaginary line defines the x-height of letterforms
X-height - height of the lowercase "x"
Stroke - any line that defines the basic letterform
Apex(above)/Vertex(below) - point created by joining two diagonal stems
Arm - short strokes of the letterform E, F, L, K, Y
Ascender - portion of the stem of a lowercase letterform that is above the median
Barb - half-serif finish curved stroke
Bowl - a rounded form that describes a counter
Bracket - transition between serif and stem
Crossbar - horizontal stroke that connects two stems in A, H
Crosstroke - horizontal stroke that connects two stems in f, t
Crotch - interior space where two strokes meet in K, V
Descender - stem of lowercase letters below the baseline
Ear - stroke extending from the main stem
Em/en - distance equal to the size of the typeface/half of em
Ligature - when two letterform join together
Spine - curved stem of "S"
Spur - a junction extension of a stroke
Stress - orientation of the letterform indicated by a thin stroke in round form

Week 3: Kerning & Tracking

Fig 1.1 Without and With Kerning, Week 3 (16.9.2022)

Kerning - automatic adjustment of space between letters

Tracking - addition and removal of space in a word or sentence

Week 4: Indicating Paragraphs

Fig 1.2 Leading example, Week 4 (23.9.2022)

If the line space (leading) is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across text.

Example:

Typeface: 10pt

Leading: 12pt (2.5-3 larger than typeface)

Paragraph space: 12pt (maintain cross alignment)

Week 5: Describing Letterforms

Fig 1.3 Baskerville and Univers, Week 5 (30.9.2022)

Both appear symmetrical, but upon closer inspection, they are not
Baskerville has two different stroke widths
Univers has a thinner left slope than its right slope
Both express harmony and individually

Fig 1.4 Helvetica and Univers, Week 5 (30.9.2022)

Both seemingly similar
Helvetica has a longer, exaggerated tail and curve than Univers

Fig 1.5 Contrast, Week 5 (30.9.2022)

Remember, contrast is the most powerful dynamic in design.

Week 6: Different Mediums in Typography

Print type:

needs smooth, flowing and pleasant text, e.g. Caslon, Garamond and Baskerville
good typeface makes reading a breeze

Screen type:

needs to be at least 12pt for suitable reading at arm's length
web safe fonts includes, Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier, Verdana, Georgia, Palatino, Garamond

Static:

only a fraction of potential dynamic properties
have an emotional connection with the readers

Motion:

offers more dramatic opportunities
prepare the audience by evoking a certain mood

INSTRUCTIONS

Task 1: Exercise 1 - Type Expression

Week 1 - Week 4

Phase 1: Sketches

Our first task was to pick and express four words using typography. I've chosen:

Tall
Ring
Freak
Whisper

Fig 1.6 Type Expression Sketches, Week 2 (8.9.2022)

I mainly played around with perspectives to show height
I was thinking either a ring shape or a ring of a bell
To me, the word means unusual, wild or out of place.
I tried to make the word as small and soft as possible

Phase 2: Digitalization

We were told to implement our designs in Adobe Illustrator. I've picked my four favourites and began to work.

Fig 1.7 Type Expression Before & After, Week 3 (15.9.2022)

I watched some videos online and learned how to extrude and bevel the words.

Final Submission

Fig 1.8 Type Expression Final Submission JPG, Week 3 (15.9.2022)

Fig 1.8 Type Expression Final Submission PDF, Week 3 (15.9.2022)

Phase 3: Animation

Attempt #1

Today, we were instructed to animate one of our type expression. I picked "TALL" as I have an idea in mind.

Fig 1.9 Frames #1, Week 4 (16.9.2022)

I wanted the word to slowly come out from below like a growing plant, then suddenly it jumps out and lands.

Fig 2.1 Frame Animation #1, Week 4 (16.9.2022)

Attempt #2

I was criticized by my lecturer that my jumping animation is not true to its meaning and I must redo it.

Fig 2.2 Frames #2, Week 4 (23.9.2022)

And so, I was told to create a skew animation of the word to show off its height.

Fig 2.3 Frame Animation #2, Week 4 (23.9.2022)

Final Submission

Fig 2.4 Frame Animation Final Submission, Week 4 (23.9.2022)

Task 1: Exercise 2 - Text Formatting

Week 5 - Week 6

For this task, we need to format our names in the ten typefaces given using Adobe Indesign.

Fig 2.5 Kerning & Tracking Progress, Week 5 (24.9.2022)

Next, we have to edit a document layout.

Fig 2.6 Text Formatting Progress, Week 5 (25.9.2022)

I wanted to make the layout more dynamic by giving the bottom more white space. I've also aligned the text boxes and left some space above for an image.

Fig 2.7 Before & After Text Formatting, Week 5 (25.9.2022)

Fig 2.8 Lecturer's Feedback, Week 6 (30.9.2022)

While my lecturer, Mr. Vinod, complimented on the kerning, my layout needs improving. I'm not supposed to align the text box but the text itself. Since I have so much space at the bottom, why don't I put the title there?

Final Submission

Fig 2.9 Final Submission Text Formatting JPG, Week 6 (1.9.2022)

Fig 3.1 Final Submission Text Formatting PDF, Week 6 (1.9.2022)

Fig 3.2 Final Submission Text Formatting with Guidelines JPG, Week 6 (1.9.2022)

Fig 3.3 Final Submission Text Formatting with Guidelines PDF, Week 6 (1.9.2022)

FINAL LAYOUT FORMAT

HEAD

Font/s: Bembo Std Bold Italic
Type Size/s: 18pt
Leading: 24pt
Paragraph spacing: 12pt

BODY
Font/s: Bembo Std Italic
Type Size/s: 10pt
Leading: 12pt
Paragraph spacing: 12pt
Characters per-line: 2 - 79
Alignment: Align left

MARGINS
Top: 12.7mm
Bottom: 100mm
Left: 12.7mm
Right: 12.7mm
Columns: 2
Gutter: 5

FEEDBACK

Week 2

Specific Feedback: Do not disorientate the word "RING"

General Feedback: Make sure typography is clear and readable

Week 3

Specific Feedback: None

General Feedback: Make sure artwork is exported as 72ppi, not 300ppi

Week 4

Specific Feedback: By making the word "TALL" bouncing up and down does not convey its meaning well. Make a skew animation of it would be much simpler and effective

General Feedback: Watch lecture videos to gain knowledge

Week 5

Specific Feedback: Good use of leading text and bold headline. Work requires more space and alignment

General Feedback: For large amount of body text, do not use Bold, Italic, Condensed

Week 6

Specific Feedback: Submissions are not as instructed, JPG 300ppi and PDF, final submissions are not indicated. Txt Frmt: Please only submit the layout task in the PDF doc – do not include the exercise work, JPG final submission not present. Task 1 incomplete. Competency level: Beginning

General Feedback: None

REFLECTIONS

Experience

The tension in this class is thicker than Futura Bold. My lecturer is very strict, especially on submission formats. I got called out once of twice for not uploading my tasks correctly. Sometimes, I'm afraid of asking questions or clarifications in the class, because that would mean I'm not paying attention.

Observations

For this six weeks, I observed that I learned better by writing down things. It keeps my drowsy brain awake in the morning class. Otherwise, I would've missed some crucial tips or instructions given by my lecturer. Week 6, for example, where I initially did not submit my layout task in the correct format as instructed.

Findings

I realized that by watching the recorded lectures, even though they tend to be long, they refreshed my memory and guided me in my exercises. Knowing that I need some help, perhaps sitting beside Sylvia in class, who knows what she's doing, will help me improve.

Sim Jian Xiong (0356498)

Search This Blog

Typography/Task 1: Exercises

Comments

Post a Comment