28.3.2022 - 26.4.2022 (Week 1 - Week 5)
Teo Javin 0349352
Typography
Lectures
Week 1 Lecture 1: This week is our first physical class led by Mr. Vinod. Not
much teaching and more briefing about our assignments and exercises. Mr. Vinod
also held an ice-breaking session where students toss a paper ball around and
whoever it lands onto has to introduce himself/herself.
Figure 1.1 Example of the ice-breaking game
Week 1 Lecture
Early letterform development: Phoenician to Roman
People used to scratch letters or fonts they wanted into wet clay with a
sharpened stick or carve into a rock with a chisel for the past 2000
years.
Uppercase letters consist of a simple combination of straight
lines and pieces of circles, as the materials and tools of early writing
required.
Figure 2.1 Phoenician fonts and their reading direction
Hand script from 3rd - 10th century C.E.
The Greeks changed the direction of writing as the figure above stated.
Phoenicians, like other Semitic people, wrote from right to left. As they
change the direction of reading, they also changed the
orientation of the letterforms.
Figure 2.2 Rustic capitals
Rustic capitals were compressed versions of square capitals, allowing as
much as twice the amount of words can be inserted onto a sheet of
parchment and is easier to write. However, they are harder to read due to
their compressed nature.
Figure 2.3 Cursive version of the capitals
Rustic capitals were mostly used for intended performances, but the
common folk uses them in cursive for simplicity and speed, creating
lowercase letterforms.
Uncials incorporated some aspects of Roman fonts, especially in the forms
of A, D, E, H, M, U and Q. Uncials are thought of as small letters and
easier to read than rustic capitals.
Figure 2.4 Uncials
2000 years after the birth of the Phoenician alphabet, half-uncials are
entitled as the formal lowercase letterforms.
Figure 2.5 Half-uncials
Charlemagne, the eldest son of Pepin the Short issued an edict to standardize all texts in 789. He then gave his
task to Acluin of York, Abbot of St Martin of Tours and rewrote the
texts using majuscules, minuscules, capitalization and punctuation
which set the standard for calligraphy for a century.
Figure 2.6 Texts rewritten by the monks
Text type classification
Figure 3.1 1450 Blackletter
Figure 3.5 1750 Transitional
Figure 3.7 1825 Square Serif/ Slab Serif
Figure 3.8 1900 Sans Serif
Figure 3.9 1990 Serif/ Sans Serif
Week 2 Lecture
Basic/ Describing Letterforms
Figure 4.1 Anatomy of a
letterform
Baseline- A line serving as a basis.
Median- A line that defines the x-height of the letterforms.
X-height- The distance between the baseline and the mean line of
lowercase letters in a typeface.
Stroke- Main body of a letterform.
Apex/ Vertex- A point at the top of a character where 2 strokes
meet.
Arm- A stroke of a character that does not connect to another
stroke.
Ascender- The top stroke of an alphabet.
Barb- The terminal for a curved capital serif letter.
Beak- The half-serif finish on some horizontal arms.
Bowl- The curved part of a character that encloses the circular or
curved parts of an alphabet.
Bracket- A curved connection between the stem of an alphabet.
Cross Bar- The middle horizontal stroke of the alphabet "A" and
"H".
Cross Stroke- The middle horizontal stroke of the alphabet "t" and
"f".
Crotch- The angle formed where 2 strokes meet inside a glyph.
Ear- The small stroke that extends outwards from a lowercase "g".
Em/en- Distance equal to the size of the typeface, en = half the size
of em.
Finial- A tapered or curved end.
Ligature- Occurs when two or more graphemes or letters are joined to form a single
glyph.
Link- A small curved stroke that connects the bowl and loop of a
double-story.
Serif- A small line or stroke regularly attached to the end of a larger
stroke in an alphabet.
Week 3 Lecture
Text/ Tracking: Kerning and Letterspacing
Kerning is the overall spacing between letters. It is
used to make the text visually more appealing and less cramp.
Figure 5.1 Example of using kerning
Tracking is the adjustment of vertical spacing between
letters.
Figure 5.2 example of tracking
Text Formating
Flush Left- Formats the text to hug the left side of a text
box.
Centered- Formats the text to stay on the center of a text box.
Flush Right- Formats the text to hug the right side of a text box.
Justified- Formats the text to hug both sides of a text
box.
Week 4 Lecture
Figure 6.1 Difference between leading and line spacing
Line spacing- Space between each line in a paragraph.
Leading- Space between adjacent lines of type.
Line of type- width of a block of text.
<iframe
src="https://drive.google.com/file/d/1QSKX8sTA24TjJLV6REjCQVSCwY82HJJb/preview"
width="640" height="480" allow="autoplay"></iframe>
Exploration
Task 1 Exercise 1: Type Expression
We are tasked to create 3 expressive fonts that resembles the 4 words we
chose. For me, I picked Coughm Squeeze, Grow and Explode.
Figure 7.1 Typography sketch of "Cough and Squeeze"
Figure 7.2 Typography sketch of "Grow and Explode"
I then used Illustrator to further refine my best 4 type expressions in a
template given by Mr. Vinod.
Figure7.3 Draft for Word Expression
Feedback from Mr. Vinod includes: Explode- need more weight
Grow- drop the angle, make it horizontal
Cough- don't distort it
Figure 7.4 Final submission for Word Expression
After this, I have to pick 1 of these 4 words to proceed into a short
animation (GIF). I used Illustrator to draw out each frame by using
the Creating Outline to turn the font into an individual image.
Moreover, I did not know the Divide tool from
Pathfinder exists, so I split the words bit by bit with the
Lasso tool... boy do I love making things harder for me.
Figure 7.5 Artboard for Type Expression
Figure 7.6 Using the Lasso Tool to move the pieces
After hours of the painful process, I finally finished my artboard. I then
import them into Photoshop to start the animation. I place the frames in
other and readjusted each frame's timing to make it as smooth as possible.
Figure 7.7 Timeline of Type Expression
Futhermore, I added a small ending transition to make the animation start
and end smoothly, I stretched (Frame 15-17) the text when they
are falling to show speed and squashed them (Frame 19) when they
landed on the imaginary ground, then bounce back up and transit back to
the beginning frame.
Figure 7.8 The text was stretched to show speed
Figure 7.9 The text was squashed and reverted back to its original
resolution to show a sense of elasticity
Lastly, I exported it into a GIF and it is done.
FINAL RESULT
Figure 7.10 PDF version of Type Expression
Figure 7.11 GIF of "explosion"
Text Formatting Exercise
We were tasked to "beautify" the given passage.
Figure 8.1 The given
passage
These are the layouts that I was exploring.
Figure 8.2 Draft 1
Figure 8.3 Draft 2
Figure 8.4 Added the title
Figure 8.5 Final draft for Type Formatting
I decided to use this as my final as it shows more of a golden ratio, even
though the "by John Doe" text is not in the golden ratio, I insert it
there because it looks well ordered.
FINAL RESULT
Figure 8.6 Final PDF of Text Formatting
Font : ITC Garamond Std
Typeface : ITC Garamond Std Book
Font size : 60 pt, 24 pt, 9 pt
Leading: 13pt
Paragraph Spacing: 10pt
Average characters per line : 50 ~ 60
Alignment: Left Justify
Margins : 12.7mm (top, left, right), 12.7mm (bottom)
Columns : 2
Gutter (for columns) : 5mm
Feedback
Type Expression
Explode- need more weight
Grow- drop the angle, make it horizontal
Cough-
don't distort it
GIF- Add more movement; make it jiggle as a
build-up for the text to "explode".
Reflections
Experience- Overall it was great. I've learnt alot about typography with
Mr.Vinod in this 5 weeks. His lectures are entertaining and he always tries
his best to keep us on track.
Observation- Mr.Vinod's lectures are entertaining and he always tries his
best to keep us on track.
Findings- I would expect the contents to be harder, however the info that
Mr.Vinod convey to us are simple and useful.
Further Reading
Figure9.1 typographic design: form and communication
This book has helped me in understanding the history of typography. Furthermore, it provides the complete anatomy of a type font. Moreover, it also taught me to use the golden ratio in a text format. Lastly, it shows me how to use column grids to align the text.
%20%5BRecovered%5D.png)
Comments
Post a Comment