Typography - Task 1: Exercises
.png)
Aw Wen Chia / 0368828
Typography / Bachelor of Design (Honours) in Creative Media
Task 1: Exercises 1 & 2
TABLE OF CONTENTS
1. LECTURES
Week 1:
Development of Typography:
Fig 1.1: The first form of writing was scratching a sharpened stick
into wet clay. The evolution of letterforms was deprived from the
Phoenicians.
Fig 1.2: The way Greeks wrote.
Fig 1.3: In the late 1st century B.C.E. Etruscans used a
paintbrush to mark the stones before craving it, therefore there are visible
strokes on the carved stone.
Fig 1.4: The evolution of letterforms from
Phoenician in 1000 B.C.E. to Greek in 900 B.C.E. to
Roman in 100 B.C.E.
Hand script from 3rd - 10th century C.E.
Fig 1.5: In Roman monuments during the
4th or 5th century, square capitals can be found. The
letterforms have serifs at the end of the main strokes.
Fig 1.6: In the late 3rd to mid-4th century, there were rustic
capitals, a compressed version of square capitals, it allowed twice as many
words per sheet of parchment and took less time to write. Square and rustic
capitals were used in documents.
Fig 1.7: Roman Cursive hand was used for everyday transactions in
4th century Rome, it was used for speed and marked the beginning of
lowercase letterforms.
Fig 1.8: In the 4th to 5th century, Uncials were used as it was more
readable at small sizes compared to rustic capitals. Uncials incorporated
Roman Cursive.
Fig 1.9: During C.500, half-uncial began lowercase letterforms, 2000
years after the Phoenician alphabet.
Fig 1.10: In C.925, Calpine miniscule Monks rewrote text using
majuscules (uppercase), miniscule, capitalization and punctuation. It became
the standard for a century.
Timeline:
.png)
2) Leading: Not too tight or loose
3) Line Length: 55 - 65 characters (not words)
Ways to Highlight Text in Paragraphs:
Headline within Text:
A Headlines:
C Headlines:
Cross Alignments:
Apex / Vertex: The point created by joining 2 diagonal stems (apex above and vertex below).
Small Capitals:
Fig 1.12 and Fig 1.13: The timeline of the Humanist script to
Roman-type timeline.
Text type classification:
All the pictures and information were taken from Typo_1_Development.
Week 2:
Typography: Text / Tracking: Kerning & Letterspacing:
Kerning: Automated adjustments of space between letters.
Fig 1.23, Kerning
Letterspacing: Added spaces in between letters.
Tracking: There are 3 types of Tracking; Normal Tracking,
Loose Tracking & Tight Tracking.
Fig 1.24, Letter Tracking
Counterform: The black spaces between white spaces in
letterforms.
Fig 1.25, Counterform
.png)
Fig 1.26, Types of letter arrangements
Things to consider while setting a text type:
1) Type Size: Large enough to read at arm's length
(between 8-12)
2) Leading: Not too tight or loose
3) Line Length: 55 - 65 characters (not words)
The majority of the pictures and information were taken from Typo_3_Text_P1.
Week 3:
Typography: Indicating Paragraphs
Fig 1.27, Paragraphs Indication
Things to avoid while typing:
Fig 1.28, Widow & Orphan
Fig 1.29, Ways to Highlight Text in Paragraphs
A Headlines:
Fig 1.30, A Headlines
B Headlines:
Fig 1.31, B Headlines
Fig 1.32, C Headlines
Fig 1.33, Cross Text Alignments
The majority of the pictures and information were taken from Typo_4_Text_Part 2.
Week 4:
Typography: Basic / Describing Letterforms
Letterpart terminology, also known as Lexicon.
Baseline: The imaginary line at the visual base of the
letterform.
Median: The imaginary line defining the x-height of
letterforms
X-height: The height in any typeface of the lowercase "x".
Fig 1.34, Baseline, Median, X-height
Stroke: Any line that defines the basic letterform.
Fig, 1.35, Stroke
Apex / Vertex: The point created by joining 2 diagonal stems (apex above and vertex below).
Arm: Short strokes off the stem of the letterform.
Ascender: The portion of the stem of a lowercase letterform that
projects above the median.
Barb: The half-serif finish on some curved strokes.
Beak: The half-serif finish on some horizontal arms.
Bowl: The rounded form that describes a counter. The bowl may be
open or closed.
Bracket: The transition between the serif and the stem.
Cross Bar: The horizontal stroke in a letterform that joins two
stems together.
Cross Stroke: The horizontal stroke in a letterform that joins 2
stems together.
Crotch: The interior space where 2 strokes meet.
Descender: The portion of the stem of a lowercase letterform that
projects below the baseline.
Ear: The stroke extending out from the main stem or body of the
letterform.
Em/en: The width of an uppercase M, and em is now the distance
equal to the size of the typeface.
Finial: The rounded non-serif terminal to a stroke.
Leg: Short stroke off the stem of the letterform
Ligature: The character formed by the combination of 2 or more
letterforms.
Link: The stroke that connects the bowl and the loop of a
lowercase G.
Loop: In some typefaces, the bowl is created in the descender of
the lowercase G.
Serif: The right-angled or oblique foot at the end of the
stroke.
Shoulder: The curved stroke that is not part of a bowl.
Spine: The curved stem of the S.
Spur: The extension that 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 Fonts:
Uppercase: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Lowercase: a b c d e f g h i j l n m o p q r s t u v w x y z
Fig 1.35, Small Capitals
Uppercase Numerals:
Fig 1.36, Uppercase Numerals
Lowercase Numerals:
Fig 1.37, Lowercase Numerals
Types of Fonts/Typefaces:
1) Italic vs Roman
2) Boldface vs Light
3) Condense vs Extended
Comparing Typefaces:
Fig 1.38, Different Typefaces
The majority of the pictures and information were taken from Typo_2_Basic.
2. INSTRUCTIONS:
3. TASK 1 / Exercise 1 - Type Expression
Compose and express the 4 words of your choosing using any of the 10
typefaces provided.
The words I chose
were explode, tangle, chop and wind.
Sketches:
.jpg)
Fig 3.1, Sketches of Type Expression (3.10.2024)
Type expression 1 took me the longest time as it was my first attempt. I
quite like 4 and 6 however there were readability and vertical space
problems. I would probably explore type expressions 1, 3, 10 and 12 more
for further digitalization.
I used Adobe Illustrator for it.
Fig 3.2, Digitalization of words (5.10.2024)
I followed my sketch pretty closely, however, I did make a few changes and added some minor illustrations to some of the words.
After my feedback, I improved on the words for the final time.
FINAL Type Expression
-01.jpg)
Fig 3.3, Final Type Expression (7.10.2024)
-02.jpg)
Fig 3.4, Other Type Expression
Fig 3.5, Final Type Expression
After the finalization of the text, I started the animation proses using
Adobe Illustrator and Photoshop.
I chose the word explode as I liked the word.
Fig 3.6, Animation (13.10.2024)
After getting feedback from my tutor, I improved my animation.
Fig 3.7, Proses of making the animation (14.10.2024)
FINAL Animation Type Expression
Fig 3.8, Final Animation Type Expression (14.10.2024)
TASK 1/ Exercise 2 - Text Formatting
Kerning and Tracking
For this task, we needed to use Kerning and Letter Spacing to
help us with formatting texts.
I started by typing my name in 10 different fonts and Kerning them.
Fig 3.9, Letter Formatting
Layouts
After finishing my name layout, I started on text alignment using Adobe
Indesign.
Fig 3.10, Processes of Text Formatting (24.10.2024)
While exploring Indesign further, I tried out some layouts.
Fig 3.11, Different Layouts (24.10.2024)
After experimenting and asking my tutor and friends I decided to pick number
5 for further editing for the final outcome. By making sure it is the
appropriate amount of characters, kerning, and letter spacing, I finished up
text formatting.
FINAL TEXT FORMATTING LAYOUT
HEAD LINE
Typeface: Bembo Std
Font/s: Bembo Std Bold Italic
Type Size/s: 60 pt
Leading: 36 pt
Paragraph spacing: 0
BODY
Typeface: Bembo Std
Font/s: Bembo Std Regular
Type Size/s: 10 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 56
Alignment: left justified
Margins: 40 mm top, 49.389 mm bottom, 18 mm left + right
Columns: 2
Gutter: 6 mm
Fig 3.12, Final Text Formatting Layout (25.10.2024)
Fig 3.13, Final Text Formatting Layout (PDF) (25.10.2024)
Fig 3.14, Final Text Formatting Layout with grids (25.10.2024)
Fig 3.14, Final Text Formatting Layout with grids (PDF)
(25.10.2024)
4. FEEDBACK
Week 1:
General feedback: A great start on the module, made me excited for
what is coming.
Week 2:
General feedback: The sketches I did were all good with only a few
issues.
Specific feedback: The type expression for "chop" was all good,
"tangle" had some issues with the readability and vertical spaces, "wind"
was all okay but I had to be careful with the word orientation, and
"explode" was also alright however I lack ideas as I only made 2.
Week 3:
General feedback: The idea was alright but it needs working
on.
Specific feedback: "Explode" should have more emphasis on the
explosion, "wind" could have more of the word and ditch the leaf as it
makes the "i" look like a paintbrush. The illustration on "Chop" should be
smaller and "Tangle" is alright.
Week 4:
General feedback: The 4 words were good, however the animation was
lacking.
Specific feedback: I chose the words explode to animate, the
animation was decent but incomplete, and my tutor advised me to make the
words completely explode instead of stopping mid-explosion.
Week 5:
General feedback: I had a lot of problems with the
paragraph.
Specific feedback: The paragraph I had was too cramped, with no room
to breathe. The photo also did not connect to the paragraph, and finally, my
text did not align with the grids and columns.
5. REFLECTIONS
Experience
My experience with Typography was an emotional roller coaster. On the first
day, we were tasked with doing a list of things, which was not that much.
However, our 8:00 a.m. class did not help my motivation. The tasks we were
given were okay and helped me expand my knowledge of Typography. It also
made me realise that a lot of the text in my life that I quickly glanced
through probably had a lot of thought put into it. It made me appreciate
bodies of text and typography a lot more.
Observations
The way my tutor gives feedback is by projecting all of our work onto a
screen and giving advice from there. This gives me a chance to see my other
coursemates' work and see how people interpret the same things differently,
in this case, words. I also observed my tutor's preferences and reasoning
behind the tasks. For example, why we were given only 10 typefaces to work
with because it make us look at the tiny details.
Findings
As I stated in my observation, Typography made me look at the small details
that not a lot of people notice. It also made me aware that different
typefaces have different meanings and can be interpreted differently. This
course also helped me navigate through Adobe Illustrator, Photoshop and
Indesign.
6. FURTHER READINGS
Fig 6.1, Typographic Design: Form and Communication (2015)
For further readings, I decided to read the book shown above. I started reading the first 10 pages of the book which documents the timeline of letterforms. It is similar to the lecture on Week 1.
Fig 6.2, Typographic Design: Form and Communication (2015)
(Page, 50)
I then read pages 50 and 51 of the same book, which discussed the text's
readability and legibility.
Fig 6.3, Typographic Design: Form and Communication (2015)
(Page, 62, 63, 64)
I followed that up by reading pages 62, 63 and 64 to see the recommended way of making a paragraph to help me with my task about text alignment.
.png)
.png)
Comments
Post a Comment