Typography-Task1:Exercises
21.4.2025-25.5.2025 ( week1-week5)
YANG SHUO / 0384037
Typography /Bachelor of Design (Hons) Creative Media / Taylor's University
Task1：Exercises
LECTRUES
week1
Typo _0_IntroductionBy listening to Mr. Vinod's explanation, I learned about the importance of typography in design research.
As a fundamental skill, it has a significant impact in many fields. Good typography is not just about letters; it enhances the appeal of the text and the comfort of reading, determining the effective transmission of information. In addition to the introduction of the principles, Mr. Vinod also introduced us to some related history (e.g. the alphabet). It is worth noting that there is a difference between font and typeface, font is a design of separate characters, and typeface refers to the various families that do not share characteristics.
|
|
figure 0 e.g.
left: Examples of Georgia fonts / right: Examples of typefaces (22 Apr/W1）
|
In this video, Mr. Vinod shows us how to create your own e-portfolio with Blogger, and explains some skills to write HTML and what we need to present in the e-portfolio.
Typo_1_Development
This lecture explores the development of typography over the past 500 years,
highlighting its importance in design and culture. Before that , Mr. Vinod
called on us design students to actively explore and document the
contributions of local designers in the field of typography and design,
rather than just following the study of Western ones.
Before the advent of printing, the tools that were initially used were only
sharp sticks and clay, or chisels and stones. This affects the shape of the
letters and the they are also very simple.
|
|
|
Figure 1.1 Development of early letter forms (22
Apr/W1）
And the Phoenicians wrote from right to left, while the Greeks wrote
in order like the route of an ox ploughing the ground,
called boustrophedon.
Figure 1.2 Boustrophedon (22 Apr/W1）
A change in weight from vertical to horizontal, and the broadening
of a stroke at start and finish.
Figure 1.3 Etruscan carves working in
marble (22 Apr/W1）
Next, Mr. Vinod told us about the development of the writing
style based on history.
Figure 1.4 Text type classification (22 Apr/W1）
week2Typo_3_Text_Part 1
In this lecture, Mr. Vinod introduced the formatting of
text, including kerning, letter spacing, and tracking of the
whole text.
Kerning refers to the automatic adjustment of letter
spacing, but does not equal the distance between letters.
Letter spacing is to increase the space between letters,
while tracking is the overall spatial adjustment within a
word.
Figure 2.1 Some examples of kerning（29
Apr/W2）
This is not always the case, kerning should not be done frequently in large sections of
text, and it is recommended to do so in high-profile text
such as headings. And Adobe InDesign or Illustrator is recommended for text
processing. Especially when designing large amounts of
text that need to be formatted, we can use InDesign.
Next, Mr. Vinod demonstrated some operations using Adobe
InDesign for text formatting.
Figure 2.2 Use of InDesign（29 Apr/W2）
The look of the font, letter spacing, line spacing,
and other stuff can really impact how readers
experience reading. Good design should aim to clearly
get the message across.
Figure 2.3
e.g. Comparison of the use of tracking in
texts（29 Apr/W2）
Common text alignments including： left, center, right, and end-of-point.
When choosing a font, consider its suitability and
readability. The characteristics of different fonts
determine how reasonable they are to be used in the
scene.
Figure 2.4 e.g. Two styles of one wedding invitation（29 Apr/W2）
Mr. Vinod discussed the gray value of text fonts. The
"gray value" of the text should be in the moderate
range. He also explained the effect of x- height on
the readability of the text. Typefaces with a higher
x-height tend to be easier to read, especially in small
fonts, which can affect the efficiency of the text that
needs to be understood.
Figure 2.5 the "x-height"（29 Apr/W2）
Good line spacing is essential for the readability of
text, and it is often necessary to leave enough spacing to
optimize the reading experience. For example, use a type specimen book.
In actual typography, debugging font size,
line spacing, and letter spacing should be
tested in paper output to evaluate the final
result.
Figure 2.5 the type specimen book（29 Apr/W2）
week3Typo_3_Text_Part 2
A method for effective paragraph indication: the
pilcrow symbol is highlighted as a traditional
marker used to indicate paragraph spacing.
Mr. Vinod emphasized the relationship between line spacing
and paragraph spacing to us. Ideally, the paragraph spacing
should be equal to the line spacing value—usually 2-3 points
larger than the point size, to ensure cross alignment. He
then demonstrated this to us using InDesign.
Figure 3.1 Screenshot of the presentation in InDesign(6
May/W3)
Tips for paragraph formatting: Avoid pressing the 'enter'
key twice; instead, define a specific value for paragraph
space. Properly maintaining cross-column alignment is
crucial for text readability.
Next, Mr. Vinod further explained the detailed concepts of
typesetting to us.
1. Leading and Line Space
the difference between leading and line space is that
leading is the distance between the baselines; line space
includes the ascender and descender in its measurement.
Figure 3.2 Leading vs line space(6 May/W3)
2. Indentation and Alignment
They identify paragraphs or sections with minimal ragging
on either side. Indentation should generally match the point
value of the text.
Note: Do not use left alignment when indenting;
right indentation is best used when the text is aligned,
meaning that text should be realigned when
indenting.
3.Orphans and Widows
Orphans and widows are common pitfalls that should be
avoided in text layout. A widow is a single line left at the end of a column,
while an orphan is the first line of a new column that lacks
continuity.
Note： If this is the case, you can adjust the letter
spacing or kerning. But not more than three times.
Figure 3.3 The orphans and widows (6
May/W3)
4. Highlighting Text
If you want to highlight some information in the text, you
can use italics, bold, color changes, or box elements around
the text. （But when changing colors, one should still avoid overly
bright colors like yellow.）
Another way to highlight text is to place a colored
background behind it. When highlighting text by placing a colored background
behind it, maintaining the left reading axis of the text
can ensure optimal readability.
Figure 3.4 Highlighting text (6 May/W3)
5. Headline within Text
Emphasize the basic structure of information in the text
and explain the correct format for titles and
subtitles:
Figure 3.5 Headline within Text(6 May/W3)
6. Cross Alignment
Aligning the titles and headings with the text types can
enhance the architectural structure of the page while
expressing a complementary vertical rhythm.
week4Typo_2_Basic
The knowledge learned in this lecture is helpful for our
final assignment, so it has been scheduled for this
week. Next is a further understanding of typography.
1. Describing letterforms
Baseline : The imaginary line the visual base of
the letterforms.
Median: The imaginary line defining the x-height
of letterforms.
X-height: The height in any typeface
of the lowercase 'x'.
Figure 4.1 Baseline， median and
x-height(13 May/W4)
Stroke: Any line that
defines the basic letterform.
Apex / Vertex: The point created by joining two
diagonal stems .apex above and vertex below)
Arm: short strokes off the stem of the
letterform. (horizontal: E, F, L; inclined upward: K, Y)
Ascender: the portion of the stem of a
lowercase letterform that projects above the median.
Barb: the half-serif finish on some curved
stroke.
Beak: the half-serif finish on the same
horizontal arms.
Bowl: the rounded form that describes a
counter.
Bracket: the transition between the serif and
the stem.
Figure 4.2 Barb, beak, bowl and
bracket (13 May/W4)
Cross Bar: the horizontal stroke in a
letterform that joins two stems together.
Cross Stroke: the horizontal stroke in a
letterform that joins two stems together.
Crotch: the interior space where two strokes
meet.
Descender: the portion of the stem of a
lowercase letterform that projects below the.
baseline.
Ear: the store extending out from the main stem
or body of the letterform.
Em/en: originally referring to the width of an
uppercase M, and em is now the distance equal to the
size of the typeface; an en is half the size of an em.
Finial: the rounded non-serif terminal to a
stroke.
Leg: short stroke off the stem of the
letterform .(at the bottom: L; inclined downward: K,
R)
Ligature: the character formed by the
combination of two or more letterforms.
Link: the stroke that connects the bowl and the
loop of a lowercase G.
Loop: the bowl created in the descender of the
lowercase G. (in some typefaces)
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 articulated 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.（ in formal texts, script fonts should not use
capital letters to avoid giving people a bad
visual effect.）
Tail: the curved diagonal stroke at the finish
of certain letterforms.
Terminal: the self-contained finish of a store
without a serif, it may be flat, flared, acute, grave,
concave, convex or rounded as a ball or a teardrop.
(see finial)
2.Font
A basic font family consists of 26 uppercase and
lowercase letters.
Small Capitals Uppercase letterforms draw to the
x-height of the typeface. Small Caps are primarily
found in serif fonts as part of what is often called
expert set.
Figure 4.3 Small capitals (top）(13 May/W4)
Uppercase Numerals: same height as
uppercase letters and are all set to the same
kerning width.
Note: They used with tabular material or
calls for uppercase letters.
Lowercase Numerals: set to x-height
with ascenders and descenders.
Note: used with upper and lowercase
letterforms.
Figure 4.4 Uppercase Numerals ＆Lowercase Numerals(13 May/W4)
Italic: refer back to fifteenth century
Italian cursive handwriting.
Punctuation, miscellaneous characters:
miscellaneous characters can change from typeface to
typeface. And it's important to ensure that all
characters are available before selecting the
appropriate font.
Figure 4.5 Punctuation, miscellaneous characters(13 May/W4)
Ornaments: used as flourishes in invitations
and certificates.
Figure 4.6 Ornaments(13 May/W4)
3. Describing typefaces
Roman: The letterform is so called because
the uppercase forms are derived from inscriptions of
Roman monuments.
Italic: Named for fifteenth century Italian
handwriting on which the forms are based.
Oblique conversely are based on roman form of
typeface.
Boldface: thicker stroke than a roman
form.
Depending upon the relative stroke widths within
the typeface, it can also be called 'semibold',
'medium', 'black', 'extra bold', or super. In some
typefaces (notably Bodoni), the boldest rendition
of the typeface is referred to as 'Poster'.
Light: lighter stroke than the roman form.
Condense: a condensed version of the roman
form.
Compressed: extremely condense styles.
Extended: extended variation of a roman form.
Figure 4.7 Describing typefaces(13 May/W4)
4.Comparing typefaces
In the multitude of rich fonts, what is noteworthy is
not the similarities, but the differences. Apart from
the obvious differences in x-height, the forms exhibit
a wealth of diversity in line thickness, relative
stroke width, and overall feel.
5.End（About further reading）
— Stephen Cole
|
INSTRUCTIONS
TASK 1
Exercise1: Type Expression
For the first task, we were asked to choose 4 words to compose and express.
Come up with a sketch of these 4 words. Those are my words：
HUNGRY
SLEEP
DIVIDE IMPALED
1. Sketches
Before using Adobe Illustrator, we needed to sketch it out.
- HUNGRY : When I see this word, what comes to mind is about food cravings. So I used elements of cutlery and food for the design. At the same time, I tried to combine the game of Pac-Man.
- SLEEP: The word conjures up images of comfortable beds, nights, and unawake states. So I tried a few different styles.
- DIVIDE: When the word is used as a verb, I think of the action of "divide them into small pieces". Separating a word, or cutting each letter apart.
- IMPALED: I think the term has something to do with sharp objects. So I try to show penetration. It would be better if it could reflect a sense of dynamism in the design.
These are my sketches.
(Each column from left to right is "HUNGRY", "SLEEP", "DIVIDE", and
"IMPALED")
|
| Figure 6.1 Sketches (28 Apr/W2) |
2. Digitization
After receiving Mr. Vinod's comments and suggestions, I finally selected four
of the most suitable sketches and digitized them using Adobe Illustrator.
|
Figure 6.2 Screenshot of the creative process(5 May/W3) |
I followed the idea of designing "HUNGRY" in the shape of a bowl in the sketch
and reduced the distortion of the font. For the word "SLEEP", I wanted to show
a staggering look. As for "DIVIDE" and "IMPALED", I used their verb
meanings. I also made some attempts at composition.
At the same time, I also devised some additional words based on previous
experience and cognition.
- HUNGRY, it looks like a set of cookies that have been gnawed a few times by an unfamiliar mouth, and I have left some "scraps" in the corners.
- SLEEP, which I arranged to look like a comfortable bed. There is another form, like a person's thoughts that gradually float when they fall asleep.
- DIVIDE, I noticed that the letter V in the middle is symmetrical and has a very neat cutting feel. So I tried to 'cut' the whole word into two parts from here. The second design is to divide the entire grid in two, so that the words and the background form a complete dichotomy through black and white contrast.
- IMPALED, I originally intended to express the image of words being pierced through by vertical lines in this design, but the resulting effect seems to be unsatisfactory.
Figure 6.3 Some extra word designs(5 May/W3)
There are shortcomings in the above designs, and it is still necessary to
learn from experience and continue to adjust.
- Final type expression:
|
|
Figure 6.4 Final Type Expression -JPEG(5 May/W3)
|
Figure 6.5 Final Type Expression (PDF)(5 May/W3)
3. Animate Type Expression
I chose the word 'hungry' to represent various tribes because I think it
is the most vivid one in the typography I designed.
Q:How to depict a bowl full of food, steaming hot?
Life experience tells me that food generates steam when
heated, which is light and ethereal. As the steam rises slowly, it spreads and gradually dissipates. I plan to use
this as one of the entry points for creating the animation. The shape of the
steam is similar to smoke, so I found reference images online.
|
| Figure 6.6 Steam shape reference diagram(12 May/W4) |
The animation with just steam is somewhat monotonous. So I wanted to create
variations about 'bowl'. I use a color gradient from light to dark to reflect
the bowl being heated.
| Figure 6.7 First Practice | (12 May/W4) |
Next, I imported them into Photoshop.
I quickly discovered a problem: the animation was not smooth, especially
the rising steam. After analyzing and searching online for guidance, I decided
to solve this issue by adding more frames and adjusting the steam's movement
trajectory.
|
||
|
Figure 6.8 Adjusted presentation effect
|
Re-import the PS script. The issue of animation not being smooth has improved.
|
|||
|
- The final expression:
|
| Figure 6.9 The final expression(12 May/W4) |
In this task, we will start learning how to edit text using InDesign.
1. Kerning and Tracking
We are assigned to use the given 10 fonts in In Design to write our names.
Then, we will do some kerning on them. I tried different styles, and I found
that each font has its more suitable font size, letter spacing, and slant
degree. Combining them to achieve the best effect.
|
Figure 6.10 Text formatting with kerning(19 May/W5)
Next, I learned the skills of editing text in InDesign by watching the
series of lecture videos released by Mr. Vinod. Then I started to practice on my own.
|
| Figure 6.11 Process in InDesign(19 May/W5) |
Then I adjusted the font style, letter spacing, and page layout, added
illustrations, and performed text cross-alignment. I hope to maintain a sense
of simplicity and beauty while adhering to the norms.
I found an image related to the text content on Printrest and embedded it into
the layout.
|
|
|
The final expression is as follows. I explored different layouts. The
difference between them lies in the starting position of the main text.
|
|
|
In the week 6 class , Mr. Vinod suggested that I increase the font size of
the body part a bit. Through adjustments, I found that changing the
font size and letter spacing made the title less dense, reducing the feeling
of weightlessness on the entire page compared to the previous version.
- Final Text Formatting Layout
|
|
Figure 6.14 Final text formatting（JPEG）(19 May/W5) |
|
|
|
Figure 2.16 Final
text formatting layout (PDF) (19 May/W5)
Formatting Details
HEAD LINE
- Typeface: Adobe Caslon Pro
- Font/s: Adobe Caslon Pro Bold
- Type Size/s: 18 pt
- Leading: 22 pt
- Paragraph spacing: 0
BODY
- Typeface: Adobe Caslon Pro
- Font/s: Adobe Caslon Pro Regular
- Type Size/s:10 pt
- Leading: 11 pt
- Paragraph spacing: 11 pt
- Characters per-line: 58
- Alignment: left justified
- Margins: 20mm top +left + right，45 mm bottom
- Columns: 2
- Gutter: 10 mm
FEEDBACK
Week 1
General Feedback： First, I created my own electronic portfolio and
set up a blog as required. Learn the course objectives and
requirements of typesetting. Four singles were selected
for the sketch.
Week 2
General feedback： We accepted the professor's comments and suggestions
on the sketches. And learn how to turn it into digital
design.
Special feedback： Several designs are well done. Other sketches have
problems with over-distorting letters and relying on
graphics. Make the words concise and visually
impactful.
Week 3
General feedback： We commented on the assignments. There are some issues
to avoid, such as misuse of fonts and composition issues.
Evaluate and summarize the electronic design of words in
AI, and then revise them on the spot.
Special feedback： I used the wrong font. The bowl shape of the word
"hungry" can be done with a clipping mask. "divide" can
add a repeating effect to make the picture richer. "sleep"
is not up to par and needs to be redone. There are no
problems with "impaled".
Week4
General feedback： Because it is a public holiday, Mr. Vinod gave
feedback on the animation type assignment during the
online meeting.
Special feedback： There is no problem with static form expression. In
dynamic form expression, I can choose to optimize the
representation of 'steam'. Let it appear one after
another, and then gradually fade away.
Week5
General feedback： Comments were made on the text layout assignment,
emphasizing key points for attention.
Special feedback： The overall layout is correct, but an improvement that
can be made is the font size of the main text, which could
be increased by one or two points for easier
reading.
REFLECTIONS
Week 1
General Feedback： First, I created my own electronic portfolio and
set up a blog as required. Learn the course objectives and
requirements of typesetting. Four singles were selected
for the sketch.
Week 2
General feedback： We accepted the professor's comments and suggestions
on the sketches. And learn how to turn it into digital
design.
Special feedback： Several designs are well done. Other sketches have
problems with over-distorting letters and relying on
graphics. Make the words concise and visually
impactful.
Week 3
General feedback： We commented on the assignments. There are some issues
to avoid, such as misuse of fonts and composition issues.
Evaluate and summarize the electronic design of words in
AI, and then revise them on the spot.
Special feedback： I used the wrong font. The bowl shape of the word
"hungry" can be done with a clipping mask. "divide" can
add a repeating effect to make the picture richer. "sleep"
is not up to par and needs to be redone. There are no
problems with "impaled".
Week4
General feedback： Because it is a public holiday, Mr. Vinod gave
feedback on the animation type assignment during the
online meeting.
Special feedback： There is no problem with static form expression. In
dynamic form expression, I can choose to optimize the
representation of 'steam'. Let it appear one after
another, and then gradually fade away.
Week5
General feedback： Comments were made on the text layout assignment,
emphasizing key points for attention.
Special feedback： The overall layout is correct, but an improvement that
can be made is the font size of the main text, which could
be increased by one or two points for easier
reading.
Experiences
In Task 1, I was introduced to Adobe Illustrator for the first time. It
is an interesting yet challenging job. The process of turning sketches
into digital form is a bit complicated. I greatly benefited from Mr.
Vinod's suggestions on the sketches, which helped me avoid mistakes during
the digitization process. Creating GIF animations was the most challenging
for me, as I needed to carefully observe to identify problems and
continually adjust to achieve a good effect. The second task involved text
layout in InDesign. I found this task to be slightly easier compared
to the previous one, but the requirements are more strict, and there is
relatively less room for creativity.
Observations
I find it a bit more difficult for me to use Adobe Illustrator than it
is to sketch. Due to my lack of skills in using the software, I often
had difficulty bringing my ideas to life in my designs. And it's important that my design highlights the words themselves, rather than
adding too many elements to convey the meaning. This is a deficiency that
I need to improve. If the previous task was creativity-driven, I believe
this task requires more attention to detail. I think this is a very
important typesetting skill.
Findings
In Task 1, I found font design to be a very practical and enlightening
lesson. It allows me to better visualize the meaning of words. Before
taking this course, I always based on my own experience and aesthetic
preferences to complete the layout, but I neglected some of the more
important things ：A perfect design should be both simple and figurative, which is elegant
and interesting. I will pay more attention to compliance in the next study. I also found
an important step that I think is crucial: thinking about the task before
executing it. This is something I've overlooked. This can lead to low
learning efficiency, often resulting in more effort with less effect.
Conducting a global thinking process before starting allows me to
understand the task requirements better, so I can grasp the details more
accurately during the learning process and achieve satisfactory
results.
FURTHER READING
The VIGNELLI CANON
Massimo Vignelli
The book I chose for further reading at this stage was THE VIGNELLI CANON by
Massimo Vignelli.
I picked this book because I already knew a bit about the author, and I thought it would be great for someone like me who’s just starting out in design. I’ve always heard people say, “Design isn’t something you can just make up—you have to go out and find inspiration.” That’s why I want to learn more outside of class. Sure, there’s a lot of design advice on social media, but most of it just copies the same boring, commercial styles. As a beginner in graphic design, I often feel confused and not sure if I’m doing things right. That’s exactly why I needed a real expert to guide me—and it is the reason why I ended up picking up this book.
I picked this book because I already knew a bit about the author, and I thought it would be great for someone like me who’s just starting out in design. I’ve always heard people say, “Design isn’t something you can just make up—you have to go out and find inspiration.” That’s why I want to learn more outside of class. Sure, there’s a lot of design advice on social media, but most of it just copies the same boring, commercial styles. As a beginner in graphic design, I often feel confused and not sure if I’m doing things right. That’s exactly why I needed a real expert to guide me—and it is the reason why I ended up picking up this book.
|
| Figure 7.1 The cover of The Vignelli Canon |
I have read some of the theories in the first half of the book in depth, and
here are some summaries and my impressions.
The book mentions three aspects of design: Semantics, Syntactics and
Pragmatics.
- Semantics: Design begins with the search for essential meaning, and every element should have a reason to exist. As the author says, I think it's important to understand the content and meaning of the design project. Every element of the design should serve the core, rejecting useless and redundant content. Design serves people, and a good design should be based on the connotation it is given, effectively conveying the idea, rather than fabricating it out of thin air. (e.g. American Airlines logo Figure 7.2 left)
- Syntactics: Emphasizing the organizational principles of design elements. It is the grammar of the design, which determines the arrangement and combination of fonts, images, grids, spacing, and proportions, and it is these appropriate combinations that allow the design to communicate information accurately and efficiently as a harmonious whole. (e.g. New York subway map Figure 7.2 right)
- Pragmatics: Focus on the functional realization of the design in reality. The author emphasizes that the design must withstand the challenges of real-life situations. To a certain extent, practicality should be prioritized over aesthetics. So a good design that has both will stand the test of time, and classics will always have value.
|
| Figure 7.2 American Airlines logo and New York subway map |
- Does this hold true in all contexts?
I guess it's not absolute. A lot of times design should be geared towards users and give them the best possible experience. Admittedly, we need to move away from "cheap and vulgar" designs, but sometimes it's necessary to reach out to the masses to understand their needs and preferences. I don't think the aesthetic of the designer and the public eye are mutually exclusive, and perhaps the balance between the two can lead to better design.
Of course, I'm just a fledgling newcomer and may have a misunderstanding of
the author's philosophy, and the above is just my opinion after reading this
part.
This theory is especially applicable in today's environment of information
overload, helping us to maintain clarity in complex projects. I believe
these three elements have given me great inspiration. Perhaps they can help
me get rid of restlessness on the path forward.
评论
发表评论