Typography Task1：Exercises
22/4/2024-27/5/2024( week1-week5)
FANG YAOYUE/0372006/Typography/Bachelor of Design (Honours)in Creative Media
Task(Exercises/Project1)
LIST:
INSTRUCTIONS
LECTURES
FEEDBACK
REFLECTION
LECTURE LIST
INSTRUCTIONS:
https://drive.google.com/file/d/19LYuVBUOHcvkR938jJ7VrM9W5qmUjwVc/view?usp=sharing
LECTURES:
Lecture 1:Typo_0_Intrroduction:
In the lecture, Mr. Vinod introduced us to typography. This is my first
class since I started university. I learned a lot of new knowledge in just
two hours, Mr Vinod told us explained that Typography is the act of
creating typefaces. Printing from calligraphy to digitalization has
experienced 500 years, typesetting fonts, and design fonts are every
design student must learn.
Font design can be seen everywhere in our lives. Font design is used in
animation, advertising design, posters, books, magazines, and so on.
Font: refers to the individual font or weight within a typeface, I.e.:
Georgia Regular, Georgia Italic, and Georgia Bold or Frutiger Light,
Roman.
1. Early letterform development: Phoenician to Roman
Fig.1.1:Font
Fig.1.2:Typrface
Lecture 2:Typo_1_Development:
In lecture 2, we learned about the development and timeline of typefaces.
1. Early letterform development: Phoenician to
Roman: Initially writing meant scratching into wet clay with a
sharpened stick or carving into stone with a chisel. The forms
of uppercase letterforms (for nearly 2000 years the only
letterforms) can be seen to have evolved out of these tools
and materials. At their core, uppercase forms are a simple
combination of straight lines and pieces of circles, as the
materials and tools of early writing required.
Fig.2.1:Phoenicians' votive stele Carthage
This is timeline:
The Greeks changed the direction of writing. Phoenicians,
like other Semitic peoples, wrote from right to left. The
Greek developed a style of writing called ‘boustrophedon’
(how the ox plows), which meant that the lines of text read
alternately from right to left and left to right. As they
changed the direction of reading they also changed the
orientation of the letterforms:
2. Hand script from 3rd - 10th century C.E.:
Etruscan (and then Roman) carvers worked in marble painted
letterforms before inscribing them. Certain qualities of
their strokes—a change in weight from vertical to
horizontal, a broadening of the stroke at start and
finish—carried over into the carved letterforms.
Fig.2.4:Late 1st century B.C.E.
2. Hand script from 3rd – 10th century C.E.: square
capitals were the written version that can be found in
Roman monuments. These letterforms have serifs added to
the finish of the main strokes.
Fig.2.6:4th or 5th century: Square Capitals
A compressed version of square capitals, rustic capitals allowed for twice as many words on a sheet of parchment and took far less time to write. The pen or brush was held at an angle of approximately 30° off the perpendicular. Although rustic capitals were faster and easier to, they were slightly harder to read due to their compressed nature. Paper is also constantly updated.
Fig.2.7Roman Cursive (4th century)
Late 3rd – mid 4th century: Rustic capitals
Fig.2.8:4th century: Roman cursive
Both square and rustic capitals were typically reserved
for documents of some intended performance. Everyday
transactions, however, were typically written in cursive
hand in which forms were simplified for speed. We can see
here the beginning of what we refer to as lowercase
letterforms.
Uncials incorporated some aspects of the Roman cursive
hand, especially in the shape of the A, D, E, H, M, U, and
Q. ‘Uncia’ is Latin for a twelfth of anything; as a
result, some scholars think that uncials refer to letters
that are one inch (one-twelfth of foot) high. It might,
however, be more accurate to think of uncials simply as
small letters. The broad forms of uncials are more
readable at small sizes than rustic capitals.
By this time the letter had taken its first shape and
people began to use it widely.
Fig.2.9:4th – 5th century: Uncials
A further formalization of the cursive hand,
half-uncials mark the formal beginning of lowercase
letterforms, replete with ascenders and descenders,
2000 years after the origin of the Phoenician
alphabet. The letters in the picture can be clearly seen.
Letter q letter a letter b letter c is already in
shape.
Flg.2.10 :left: Uncials (4th-5th century);
right:
Half-uncials (C.500)
3. Blackletter to Gutenberg's typeC. 500: Half-uncials:
Charlemagne, the first unifier of Europe since the
Romans, issued an edict in 789 to standardize all
ecclesiastical texts. He entrusted this task to Alcuin
of York, Abbot of St Martin of Tours. The monks rewrote
the texts using both majuscules (uppercase), miniscule,
capitalization and punctuation which set the standard
for calligraphy for a century.
Flg.2.11 :Caloline miniscule (C. 925)
C. 925: Caloline miniscule
3.Blackletter to Gutenberg’s type: With the
dissolution of Charlemagne’s empire came regional
variations upon Alcuin’s script. In northern Europe,
a condense strongly vertical letterform know as
Blackletter or textura gained popularity. In the
south, a rounder more open hand gained popularity,
called ‘rotunda’. The humanistic script in Italy is
based on Alcuin’s miniscule.
.jpeg)
Flg.2.12 :Blackletter (1300)
c. 1300: Blackletter (Textura)
Gutenberg’s skills included engineering,
metalsmithing, and chemistry. He marshaled them
all to build pages that accurately mimicked the
work of the scribe’s hand – Blackletter of
northern Europe. His type mold required a
different brass matrix, or negative impression,
for each letterform.
Flg.2.13 :42 line bible, Johann Gutenberg,
Mainz
4. Text type classification
Flg.2.14:
1. Tracking: Kerning and
Letterspacing:| Text type classification |
Lecture 3:Typo_2_Text_P1 :
Kerning
.png)
The automatic adjustment of space between
individual letterforms. Kerning is usually
adjusted in headlines.
Without kerning and with
kerning
Tracking
The addition and
removal of space in a word or a
sentence. It is usually adjusted in
large paragraphs of text.
Normal tracking is easy to read and suitable to use in a large number of texts.
Loose tracking and tight tracking reduce the readability and recognizability of the pattern that formed the words. People tend to recognize the counterform of the space between the stokes when reading, thus they are not suitable to apply in a large number of texts.
Flg.2.15:
Normal tracking, tight tracking and
loose tracking
However, loose tracking can be used in
headlines but in uppercase
letterforms. Uppercase letterforms
can stand on their own,
while lowercase letterforms require
the counterform created between letters
to maintain the line of reading.
2. Formatting Text (Alignment):
Flush left is the
most natural text formatting that
closely mirrors the asymmetrical
experience of handwriting. Each line
starts at the same point but ends
wherever the last word ends. The spaces
between words are consistent, creating
an even gray value in the type. However,
this format creates ragging, a jagged
shape formed by each end line on the
right.
Centered imposes symmetry upon the text,
assigning equal value and weight to both
ends of any line. It transforms fields
of text into shapes, thus it is
important to amend the breaks so that
the text does not appear too jagged.
This format is suitable to apply to a
small number of texts such as
captions.
Flg.2.16:
Flush left and Centered
Flush right emphasises the end of a line as
opposed to its start. It can be
useful in situations (like
captions) where the relationship
between text and image might be
ambiguous without a strong
orientation to the right.
Justified imposes a symmetrical shape on
the text like centering. It is
achieved by expanding or
reducing spaces between words
and letters. This format can
occasionally produce 'rivers' of
white space running vertically
through the text, which are the
gaps between the words. Careful
attention to line breaks and
hyphens is required to avoid
this problem.
.png)
Flg.2.17:
Flush right and
Justified
3. Texture:
It is important to consider
the different textures of
the typefaces. A
type with a relatively
generous x-height or
relatively heavy stroke
width produces a darker mass
on the page than a type with
a relatively smaller
x-height or lighter stroke.
Sensitivity to these
differences in colour is
fundamental for creating
successful layouts.
Flg.2.18:
Anatomy of a
typeface
The differences in gray
values can be seen in
different typefaces. A
typeface with a middle
gray value would be the
best in a particular
layout.
Flg.2.19:
Different typefaces
show the different
gray values
4. Leading and
Line Length:
Type size should be large
enough to be readable
at arm's length.
Leading refers to the
space between adjacent
lines of the
typeface.
Flg.2.20:Tight leading and
loose leading
Flg.2.21:
| Different leading in Adobe Jenson typeface |
Line
length is the
number of
characters in a
line. A good
rule of thumb is
to keep the line
length between
55-65
characters.
Flg.2.22:
| 60 characters of line length |
5. Type
Specimen
Book:
A type
specimen book
shows samples
of typefaces
in various
different
sizes. It is
used as an
accurate
reference for
the outcomes
of a typeface
in terms of
type size,
leading, line
length, etc,
helping in
deciding the
right type to
use.
Flg.2.23 :Sample
type
specimen
sheet
Compositional
requirement:
Text
should
create a
field that
can occupy
a page or
a screen.
An ideal
text
should
have a
middle
gray
value.
It is useful to enlarge the 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. If the outcome is on a printed page, it is best to print out an actual page to look closely at the details. If its outcome is on screen, then the judging type on screen is accurate.
It is useful to enlarge the 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. If the outcome is on a printed page, it is best to print out an actual page to look closely at the details. If its outcome is on screen, then the judging type on screen is accurate.
Lecture4:Typo_3_Text_P2:
1.
Indicating
Paragraphs:
There
are
several
options
for
indicating
paragraphs:
The ‘pilcrow’ (¶)
A
holdover
from
medieval
manuscripts
seldom
use
today.
It is
one of
the
hidden
characters
or blue
indicators
that
helps in
formatting
large
amounts
of text.
Flg.2.24:
The ‘pilcrow’
Line
space
(leading*)
Paragraph
space
should
be
the
same
as
the
line
space
to
ensure
cross-alignment
across
columns
of
text.
Line
space is
the
space
from
the
baseline
of
a
sentence
to
the
descender
of
the
next
sentence.
Leading is
the
space
between
two
sentences.
*As
design
students,
we
should
use
the
name
leading
in
typography.
Flg.2.25:
left:
paragraph
space;
right:
line
space
vs
leading
Indentation
Standard
indentation
is
the
indentation
of
the
first
line
in
a
paragraph,
the
ident
is
the
same
size
of
the
line
spacing
or
the
same
as
the
point
size
of
the
text.
The
method
of
extended
paragraphs
creates
unusually
wide
columns
of
text.
Flg.2.26:
left:
standard
indentation;
right:
extended
paragraph
indentation
2.
Widows
and
Orphans:
The
unpardonable
gaffes
in
formatting
text
are
widows
and
orphans.
A widow is
a
short
line
of
the
type
left
alone
at
the
end
of
a
column
of
text.
It
can
be
avoided
by
creating
a
force
line
break
before
or
adjusting
the
tracking
of
the
line
before
to
let
the
last
word
in
the
second
last
line
moves
down
to
the
last
line.
An orphan is
a
short
line
of
the
type
left
alone
at
the
start
of
a
new
column.
It
could
be
avoided
by
adjusting
the
length
of
the
column.
Flg.2.27
Widow
and
orphan
3.
Highlighting
Text:
Examples
of
highlighting
text:
Use
the
same
typeface
but
different
fonts
(Italic,
Bold)
or
colour
Flg.2.28:Use
bold sans
serif
Note
that
a
sans
serif
font
usually
is
slightly
larger
than
a
serif
font
in
the
same
point
size.
In
this
example,
the
sans
serif
font
(Univers)
has
been
reduced
by
0.5
pt
to
match
the
x-height
of
the
serif
typeface.
Flg.2.29:Place a field of colour
Place typographic elements (such as bullet points)
Flg.2.31:Using
of
quotation
marks
4.
Headline
within
Text:
There
are
many
kinds
of
subdivisions
within
the
text
of
a
chapter.
The
following
visuals
have
been
labelled
(A,
B
and
C)
according
to
the
level
of
importance.
A
head indicates
a
clear
break
between
the
topics
within
a
section.
Examples:
Flg.2.32:A
head
B
heads are
subordinate
to
A
heads,
they
indicate
a
new
supporting
argument
or
example
for
the
topic
at
hand.
Examples:
Flg.2.33:B
head
Flg.2.34:C
head
5.
Cross
Alignment:
Cross-aligning
headlines
and
captions
with
text
type
reinforce
the
architectural
sense of
the
page—the
structure—while
articulating
the
complimentary
vertical
rhythms. In
some
cases,
cross-align
can be
maintained
by
doubling
the
leading
space of
the text
type to
be used
as the
leading
of the
headline
type. The
example
shows
one line
of
headline
type
cross-aligns
with two
lines of
text
type.
Flg.2.35:
Cross
alignment
Lecture
5:Typo_Tect_4_Basic:
1.
Describing
letterforms:
- Baseline: the imaginary line at the 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'
- Stroke: any line that defines the basic letterform
- Apex / Vertex: the point created by joining two diagonal stems
- 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
- 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
- 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)
Flg.2.36:
| Describing letterforms |
2. The Font:
-
Uppercase
and Lowercase
-
Small Capitals:
uppercase
letterforms
drawn to the
x-height of the
typeface
Flg.2.37:
Small capitals (top)
- Uppercase Numerals (lining figures): same height as uppercase letters and are all set to the same kerning width
- Lowercase Numerals (old style figures or text figures): set to x-height with ascenders and descenders
-
| Flg.2.38:Uppercase numerals and lowercase numerals |
- Italic: refer back to fifteenth century Italian cursive handwriting
- Punctuation, miscellaneous characters: can change from typeface to typeface. It is important to ensure that all the characters are available in a typeface before choosing the appropriate type
- Ornaments: used as flourishes in invitations and certificates
.png)
| Punctuation, miscellaneous characters and ornaments |
3.
Describing
typefaces
Different
typefaces
and their
relative
stroke
widths
typefaces
- Roman:
an
uppercase
form
that
is
derived
from
inscriptions
of
Roman
monuments
Book: lighter stroke in roman - Italic:
based
on the
fifteenth
century
Italian
handwriting
Oblique: based on a roman form of a typeface - Boldface:
thicker
stroke
than a
roman
form
Semibold, Medium, Poster, Black - Light:
lighter
stroke
than
the
roman
form
Thin: even lighter strokes - Condense:
a
condensed
version
of the
roman
form
Compressed: extremely condense styles - Extended: extended variation of a roman form
Flg.2.40:
| Describing typefaces |
4.
Comparing
typefaces:
We are to use
the 10 typefaces
below throughout
this module.
These 10
typefaces
represent 500
years of type
design. Each
typeface gives
different
feelings, it is
important for us
to understand
these typefaces
well and choose
the right
typeface for
conveying
messages in a
particular
work.
Flg.2.41:
| 10 typefaces |
Lecture
6:Typo_5_Understanding
1.
Understanding
letterforms:
The
uppercase
letterforms
below
suggest
symmetry,
but in fact,
it is not
symmetrical.
The
asymmetrical
letterforms
below are
both
internally
harmonious
and
individually
expressive.
Baskerville stroke
form: two
different
stroke
weights can
be easily
seen
Univers stroke
form: a
close
examination
shows that
the width of
the left
slope is
thinner than
the right
stroke
Flg.2.42
| left: Baskerville 'A'; right: Univers 'A' |
The
complexity
of each
individual
letterform
is neatly
demonstrated
by
examining
the
lowercase
‘a’ of two
seemingly
similar
sans-serif
typefaces—Helvetica
and
Univers. A
comparison
of how the
stems of
the
letterforms
finish and
how the
bowls meet
the stems
quickly
reveals
the
palpable
difference
in
character
between
the
two.
|
Flg.2.43 left: Helvetica 'a'; right: Univers 'a' |
2.
Maintaining
x-height:
X-height
generally
describes
the size
of the
lowercase
letterforms.
Curved
strokes,
such as
in ‘s’,
must
rise
above
the
median
(or sink
below
the
baseline)
in order
to
appear
to be
the same
size as
the
vertical
and
horizontal
strokes
they
adjoin.
Flg.2.44:
| Lowercase maintaining x-height |
3.
Form
and
Counterform
(Counter):
The
space
describes,
and
often
contained,
by the
strokes
of the
form.
When
letters
are
joined
to
form
words,
the
counterform
includes
the
spaces
between
them.
Counterform
has
the
same
importance
as the
letterforms
as it
helps
to
recognize
the
shape
of the
letters
and
assure
the
readability
of the
words.
Flg.2.45:
| Form and counterform |
We could examine the counterform of letters by enlarging each letter and analysing them. It could give us a glimpse into the process of letter-making.
Flg.2.46:Form and
counterforms
4.
Contrast:
The design
principle of
Contrast is also
applied in
typography. The
simple contrasts
produce numerous
variations:
small+organic /
large+machines;
small+dark /
large+light,
etc.
Flg.2.47:
| Contrast in typography |
Lecture 7:
Typo_6_Screen&Print:
TYPOGRAPHY
IN
DIFFERENT
MEDIUM
In the past,
typography
was viewed
as living
only when it
reached
paper. No
changes were
made once a
publication
was edited,
typeset and
printed.
Today,
typography
exists not
only on
paper but on
a multitude
of screens.
Typography
is not only
controlled
by designers
as it is
subject to
many unknown
and
fluctuating
parameters,
such
as operating
system, system
fonts,
the device and
the screen itself.
Print
Type vs
Screen
Type
1.
Type
for
Print
The type was
designed
intended for
reading from
print long
before we
read from a
screen.
Designers
should
ensure the
text is
smooth,
flowing and
pleasant to
read.
Typefaces
for print:
Caslon,
Garamond,
Baskerville,
Univers
(characteristics:
elegant and
intellectual,
highly
readable at
small font
size)
Flg.2.48:
| Type for print |
2. Type for
Screen:
Typefaces intended
for use on the web
are optimized and
often modifies to
enhance
readability and
performance
on-screen in a
variety of digital
environments.
Examples of
adjustments:
taller x-height or
reduced ascenders
and descenders,
wider letterforms,
more open counters
heavier thin
strokes and
serifs, reduced
stroke contrast,
modified curves
and angles, etc.
Another important
adjustment: more
open spacing
(especially for
smaller sizes
typefaces)
All the
adjustments were
made to improve
character
recognition and
overall
readability in
non-print
environments (web,
e-books, e-readers
ad mobile
devices).
There are
typefaces
specifically
designed for
screens such as
Verdana and
Georgia due to the
insufficiencies in
the clarity of
typefaces and
screen resolution
in the past.
Flg.2.49:
| Type for screen |
3. Hyperactive Link / Hyperlink
A hyperlink is
a word,
phrase, or
image that you
can click on
to jump to a
new document
or a new
section within
the current
document.
Hyperlinks can
be found on
nearly all web
pages. Text
hyperlinks are
normally blue
and underlined
by
default.
4. Font
Size for
screen
16-pixel text on a
screen is about
the same size as
text printed in a
book or magazine,
accounting for
reading distance.
Printed text is
typically set at
about 10 points
within the reading
distance of a few
inches away, while
at least 12 points
within the reading
distance of arm's
length, which is
about the same
size as 16 pixels
on most
screens.
|
Flg.2.50 Font size on screen (left) vs print (right) |
5. System
Fonts for
Screen /
Web Safe
Fonts
Each device
comes with its
own
pre-installed
font selection
which is
largely based
on its
operating
system.
Windows, macOS
and Google's
own Android
system have
their own
system font.
Each system
font may
differ a
little bit and
not be
compatible
with each
other.
However, this
is no longer
an issue as it
has been
solved to
avoid
inconvenience.
Web safe fonts
appear across
all operating
systems. They
are a small
collection of
fonts that
overlap from
Windows to Mac
to
Google.
Web safe
fonts: Open
Sans, Lato,
Arial, Times
New Roman,
Times, Courier
New, Courier,
Verdana,
Georgia,
Palatino,
Garamond.
6. Pixel
Differential
between
Devices
The text on
screens in
different
devices (PCs,
tablets,
phones and
TVs) differs
in size and
proportion
because of the
different-sized
pixels of the
screens. Even
within a
single device
class, there
will be a lot
of
variation.
Flg.2.51
| Pixel Differential between Devices |
Static vs
Motion
1.
Static
Typography
Static
typography
is not
limited to
minimal
characteristics
such as bold
and italic
in
expressing
words. It
can also
create
movements
and motions
in a dynamic
way.
|
Flg.2.52 Static typography |
2.
Motion
Typography
Motion
typography
is
introduced
around
since the
1960s when
feature
films
started
using
animated
opening
titles
instead of
static
text.
Alfred
Hitchcock's North
by
Northwest (1959)
is
credited
as the
first
feature
film to
extensively
use
kinetic
typography.[1] While
Matt
Woolman
and Jeff
Bellantoni
introduced
a
comprehensive
survey of
motion
typography
in the
book Type in
Motion:
Innovations
in
Digital
Graphics.[2]
Today,
motion
typography
is widely
used in
various
forms of
animation
and motion
graphics.
The type
is often
overlaid
onto music
videos
and
advertisements,
often set
in motion
following
the rhythm
of a
soundtrack. On-screen
typography
has
developed
to become
expressive,
helping to
establish
the tone
of
associated
content or
express a
set of
brand
values.
Class
Summary
-
WEEK 1
-
This week, Mr Vinod taught me a lot about design. When designing a font, it should be combined with the meaning of the word itself, otherwise it will lose the meaning of design.
-
My draft in the first week did not combine effectively with the meaning. I just changed the words on the basis of the teacher's patience to teach me, tutoring me, this week's homework I have a great breakthrough. Mr Vinod thank you very much.
- WEEK 2
- In this week's class, Mr max commented on everyone's homework and gave me some encouragement. I know that I still have a lot of shortcomings.
- Now I can combine the meaning with the picture. A good design must be combined with meaning. What's more, the picture quality I uploaded is particularly low. I don't know why, but I will solve the picture quality problem this week.
TASK 1:
Exercise 1 -
Type
Expression
we were given
seven words to
make type
expressions.
We are
required to
choose four
words from
these seven
words:Time,Swim,Open,Spark,Swing,Dash,Kick.
To combine the
meaning of
graphics and
words, do not
use too complex
elements, you
can use some
points and lines
to help express,
as far as
possible with
the computer to
make some.
Fig. 1.1 Type expression sketches, Week1(23/4/22024)
Fig. 1.2 Type expression sketches, Week1(23/4/22024)
Fig. 1.3 Type expression sketches, Week1(23/4/22024)
Fig. 1.4 Type expression sketches, Week1(23/4/22024)
swim:I used a
small man
to fit
words into
the
freestyle.
open:I used
the
three-dimensional
form to
make the
word feel
three-dimensional.
dash:I used a
lot of
wavy
elements
into the
words,
I didn't
combine
the
meaning of
the
words
spark:I used
some
elements
of fire,
but I
didn't
understand
them very
well.
2.
Digitisation:
In class, Mr
max taught us
a lot of
software
operation
methods.
Besides, I
like to study
software in
daily life, so
I quickly
digitized the
draft and
listened to Mr
Vinod's words.
I combined the
meaning of
words and
graphics that
I did not do
in the first
week and
improved them
this
week.
|
Fig.
1.5Rough
digitisation
work,
Week
2
(1/5/2024) |
|
Fig.
1.6Rough
digitisation
work,
Week
2
(1/5/2024) |
|
Fig.
1.7Rough
digitisation
work,
Week
2
(1/5/2024) |
|
Fig.
1.8Rough
digitisation
work,
Week
2
(1/5/2024) |
|
Fig.
1.9Rough
digitisation
work,
Week
2
(1/5/2024) |
I
incorporate
a lot of
flame
elements
into the
word
"spark".
I create
four
images
by
combining
flame
and
word.
Figure 3
and
Figure 4
display
the
aftermath
of the
flame's
burn and
the
sensation
of words
being
scorched
by it.
2.open:
|
Fig.
1.10Rough
digitisation
work,
Week
2
(1/5/2024)
We
all
think
of
opening
doors
and
boxes
when
we
hear
the
word
"open".
I've
incorporated
door-opening
elements
into
all
four
words,
except
for
Figure
3.
You
can
see
these
elements
in
each
design.
I
decided
to
remake
the
first
draft
instead
of
just
revising
it.
3.time
|
Fig.
1.11Rough
digitisation
work,
Week
2
(1/5/2024)
4.swim:
Fig.
1.12Rough
digitisation
work,
Week 2
(1/5/2024)
I
used
two
main
elements,
the
first
is a
small
person
swimming
and
the
second
is a
fish,
the
wave
formed
by a
person
swimming
under
the
freestyle
in
Figure
1. In
Figure
3 and
Figure
4, the
elements
of
fish
appear
respectively.
In
Figure
3, w
is the
tooth
of a
shark,
and i
is the
eye of
a
shark.
Sharks
are
also
closely
related
to
swimming.
Week
3:Digitisation
improvement
Mr.
Max
has
been
very
helpful
and
supportive
in
class
this
week.
He's a
kind
and
patient
teacher.
He was
the
first
one to
see
the
inspiration
in my
swim
design,
and it
felt
great
to be
recognized
for my
efforts.
He
also
gave
me
some
suggestions
for
improvement,
like
keeping
it
simple
and
incorporating
relevant
elements.
I also
realized
that I
made a
mistake
by not
using
the
teacher's
provided
design
for
the
fonts,
so I
improved
on
that.
Fig.
1.13Rough
digitisation
work,
Week
3
(8/5/2024)
swim:I'm
going
to
break
down
the
word
swim.
spark:I
used
a
lot
of
flame
elements
and
put
a
lot
of
flame
into
the
spark
font.
open:The
word
"open"
is
the
word
I
am
most
satisfied
with,
giving
people
a
sense
of
the
space
of
opening
the
door.
time:i
used
the
element
of
a
clock,
which
has
always
been
associated
with
time
and
turned
part
of
the
word
I
into
a
clock.
Homework
experience:
Fig.
1.14Rough
digitisation
work,
Week
3
(8/5/2024)
When
doing
homework,
I
found
a
lot
of
interesting
tools,
from
the
beginning
did
not
understand
anything,
to
now
can
play
relatively
smooth.
For
example,
like
a
clock,
to
make
a
hollow
circle,
you
can
cut
one
circle
off
the
other
circle
and
use
the
shape
generator
tool.
Another
example
is
the
door
frame
can
use
the
rectangular
tool,
and
then
use
the
scissors
tool
to
cut
off
the
excess.
The
fire
can
be
very
complicated
to
make,
you
have
to
manage
the
layers,
black
flame
on
layer
1,
gray
on
layer
2,
white
on
layer
3,
and
then
wipe
out
the
shape
you
want.
Final
Task
1
-
Exercise
1:
Type
Expressions:
Fig.
1.15Rough
digitisation
work,
Week
4
(13/5/2024)
This
is
my
final
animation
assignment,
and
why
do
I
do
this,
because
I
do
the
word
open,
people
always
think
of
opening
the
door.
I
want
to
use
animation
to
simulate
the
work
of
a
doorknob
to
open
the
door,
rotate
it
to
the
right
for
one
week,
and
combine
this
animation
with
the
meaning
of
the
words.
Fig.
1.16Rough
digitisation
work,
Week
4
(13/5/2024)
This
week,
I
managed
to
blend
the
font
and
meaning
together
better.
I
incorporated
the
fish
element
into
the
word
"swim,"
Mars
into
the
word
"spark,"
and
kept
"open"
and
"time"
the
same.
In
the
end,
I
decided
to
turn
"open"
into
an
animation.It
was
my
first
time
making
animation,
which
was
a
big
challenge.
Even
though
I
had
no
experience
with
animation,
I
followed
Mr.
Vinod's
video
step
by
step.
In
the
end,
I
created
a
more
coherent
and
satisfying
animation.
Thanks
to
Mr.
Vinod
and
Mr.
Max
for
their
help,
I
managed
to
perfect
my
font.
Animation:
Fig.
1.17Rough
digitisation
work,
Week
4
(13/5/2024)
I
put
the
word
"open"
in
the
top
left
corner,
then
turned
it
around,
and
finally
the
animation
was
done.Animating
was
both
interesting
and
satisfying.
Even
though
it
took
a
lot
of
time,
I
finally
saw
the
font
moving,
and
the
sense
of
accomplishment
was
amazing.
Final
Animated
Type
Expression
Fig.
1.18Rough
digitisation
work,
Week
5
(23/5/2024)
This
week,
Mr.Vinod
and
Mr.Max
gave
me
some
suggestions,
I
can
slow
down
the
speed
and
stop
at
the
last
second
to
let
everyone
see
the
words
clearly,
I
have
made
improvements
according
to
the
teacher's
suggestions.
If
there
is
anything
that
can
be
improved,
I
hope
the
teacher
can
bring
it
up.
TASK
1:
Exercise
2
-
Text
Formatting
For
Exercise
2,
we
have
to
create
a
final
layout
of
text
formatting,
working
with
typefaces,
type
size,
leading,
line
length,
etc.
Before
that,
we
have
to
learn
and
work
with
kerning
and
tracking.here is some points that reminded by Mr Vinod in the tutorial videos:
- Point size in A4 and A3 is normally 8-12 points.
- Line length need to be between 55-65 points.
- Text Leading (2, 2.5, 3 points larger than font size)
- While adjusting the kerning of text in Adobe Indesign (ALT+ Arrow), maximum 3 presses.
- Hyphenation can be used but limit the number of hyphen.
- Ctrl+Shift+ < or > to adjusting font size.
- No Widows / Orphans
To achieve cross alignment:
- Edit: Preferences > Grid > Increment every: 11pt > View threshold: 50%
- Right click the column > text frame options > Baseline options > Offset: Leading > General: Align: Top
- While adjusting the leading, the unit should only be doubled to ensure crross alignment. E.g: 11pt to 22pt, 44pt etc.
1.
Kerning
and
tracking
exercise
We
are
assigned
to
work
with
kerning
and
tracking
our
name
using
the
10
typefaces
provided.
We
are
allowed
to
use
different
fonts
and
type
sizes
in
a
typeface.
Fig.
1.20
Text
formatting
with
and
without
kerning,
Week
5
(23/5/2024)
Fig.
1.19
Text
formatting
with
and
without
kerning,
Week
5
(23/5/2024)
2.
Layout
exercise:
We
are
to
create
a
final
layout
using
the
texts
given
and
work
with
the
text
formatting
setting.
Black
and
white
photography
should
be
added
to
the
layout
with
a
caption.
Throughout
this
exercise,
we
could
have
a
better
understanding
of
text
formatting
and
be
more
sensitive
to
the
details
in
creating
a
good
layout.
I
created
two
layouts
for
this
exercise,
both
are
in
two
columns
and
left
aligned,
but
in
different
typefaces.
Fig. 1.21Text Formatting draft Design
Fig. 1.21Text Formatting draft Design
Fig. 1.22Text Formatting draft Design
Fig.
1.24Text
Formatting Design with grid（JPEG)
Fig. 1.25Text Formatting Design with grid(PDF)
1.26Text Formatting Design(JPEG)
Fig. 1.27Text Formatting Design(PDF)
Formatting Details:
HEAD LINE
Font/s: ITC New Baskerville Std Bold Italic (Headline), ITC New Baskerville Std Roman (Subheadline), ITC New Baskerville Std Bold (Byline)
Font/s: ITC New Baskerville Std Bold Italic (Headline), ITC New Baskerville Std Roman (Subheadline), ITC New Baskerville Std Bold (Byline)
Type Size/s: 54 pt (Headline), 36 pt (Subheadline), 14pt (Byline)
Leading: 64.8 pt (Headline), 44 pt (Subheadline), 16.8 pt (Byline)
Paragraph spacing:-
Leading: 64.8 pt (Headline), 44 pt (Subheadline), 16.8 pt (Byline)
Paragraph spacing:-
BODY
Font/s: Univers LT Std 55 Roman
Font/s: Univers LT Std 55 Roman
Typ Size: 9pt,
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 45
Alignment: Left aligned
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 45
Alignment: Left aligned
Margins: 12.7 mm top+left + right, 50mm bottom
Columns: 3
Columns: 3
FEEDBACK:
Week1
Fig. 1.1 Type expression sketches
General feedback
In the first week, I used ai and procreate to make a lot
of sketches, and I chose dash, open, spark and swim to do
my homework.
Specific feedback
we were given seven words to make type expressions. We
are required to choose four words from these seven
words:Time,Swim,Open,Spark,Swing,Dash,Kick.
To combine the meaning of graphics and words, do not use
too complex elements, you can use some points and lines to
help express, as far as possible with the computer to make
some.
Week2
Fig.1.5Rough digitisation work
|
|
General feedback
Mr.Vinod told me that my font did not incorporate the
meaning of the font, but changed the structure and shape
of the font.
Specific feedback
In class, Mr max taught us a lot of software operation
methods. Besides, I like to study software in daily life,
so I quickly digitized the draft and listened to Mr
Vinod's words. I combined the meaning of words and
graphics that I did not do in the first week and improved
them this week.
Week3
Fig. 1.14Rough digitisation work
General feedback
Last week, I used AI to digitize all my fonts, but
I forgot to use the ten fonts provided by the
teacher. It's a mistake I won't make again. However,
after playing around with it, it's turned out to be
a very interesting font that's combined with
meaning.
Specific feedback
When doing homework, I found a lot of
interesting tools, from the beginning did not
understand anything, to now can play relatively
smooth. For example, like a clock, to make a
hollow circle, you can cut one circle off the
other circle and use the shape generator tool.
Another example is the door frame can use the
rectangular tool, and then use the scissors tool
to cut off the excess. The fire can be very
complicated to make, you have to manage the
layers, black flame on layer 1, gray on layer 2,
white on layer 3, and then wipe out the shape
you want.
Week4
Fig. 1.15Rough digitisation work
General feedback
This week, I determined the final four word
designs, and I am most satisfied with open and
time. The open design gives people a sense of
space, and I decide to make it into an
animation.
Specific feedback
I
put
the
word
"open"
in
the
top
left
corner,
then
turned
it
around,
and
finally
the
animation
was
done.Animating
was
both
interesting
and
satisfying.
Even
though
it
took
a
lot
of
time,
I
finally
saw
the
font
moving,
and
the
sense
of
accomplishment
was
amazing.
The
process
of
creating
font
animation
in
Photoshop
is
really
fascinating,
and
it's
my
favorite
thing
to
do.
It's
quite
laborious
to
make
a
word
move,
but
I
really
enjoy
it.
I
think
the
final
result
is
good,
but
I'm
aware
that
I
still
have
some
issues.
If
Mr.
Vinod
and
Mr.
Max
have
any
suggestions,
I'll
be
happy
to
make
corrections.
Week5
Fig.
1.18Rough
digitisation
work
General
feedback
This
week,
we
learned
a
new
design
software
in
class.
I
think
its
interface
is
different
from
the
AI
and
PS
we
learned
before.
We
used
this
software
to
format
fonts.
Specific
feedback
Typography
should
pay
attention
to
its
own
font,
size
and
spacing,
to
do
every
detail
to
the
bit,
design
is
continuous
improvement
and
continuous
innovation.
Only
by
doing
small
things
well
can
we
make
progress.
In
this
class,
I
also
finished
part
of
my
homework.
Mr.Vinod
and
Mr.Max
were
very
patient
to
answer
my
questions.
This
is
my
final
animation
assignment,
and
why
do
I
do
this,
because
I
do
the
word
open,
people
always
think
of
opening
the
door.
I
want
to
use
animation
to
simulate
the
work
of
a
doorknob
to
open
the
door,
rotate
it
to
the
right
for
one
week,
and
combine
this
animation
with
the
meaning
of
the
words.
This
week,
Mr.Vinod
and
Mr.Max
gave
me
some
suggestions,
I
can
slow
down
the
speed
and
stop
at
the
last
second
to
let
everyone
see
the
words
clearly,
I
have
made
improvements
according
to
the
teacher's
suggestions.
If
there
is
anything
that
can
be
improved,
I
hope
the
teacher
can
bring
it
up.
REFLECTION:
Experience
This is a new stage of my life, and the five weeks of going up
and down have given me an unprecedented experience. Every
week, I finish the homework on time, with the quality and
quantity guaranteed, and strive to be the first to hand in the
homework. However, this is indeed a little pressure, but it is
the driving force for me to move forward. In my spare time, I
would look at the homework of my classmates and read the
videos sent by Mr.Vinod repeatedly. I would also communicate
with Mr.Max about my own problems and perplexities in every
class. As long as every step is in accordance with the
requirements, there are problems in time to propose
corrections, I think it is not difficult to learn design.
Observations
I found that ai this software is not like the plane software I
knew before, in ai you have to divide the layer, to determine
the font size, to ensure that there is no problem in placing
and exporting. The ten fonts given by the teacher also need to
be imported into ai, and then go to the search bar to find
their own, and the production of animation ps is the same, to
divide the layers, and need to adjust the timeline, the order
of each picture is a new attempt, I enjoy it.
Findings
Five weeks of study may seem short, but I learned something
that was never involved in middle school or high school.
Letters and words are essential elements in life. We can find
them in schools, shopping malls, restaurants and hospitals.
Good design and good typography can give new life to words and
leave a deeper impression on people, which is exactly the
meaning of our study. I often communicate with Mr.Max in
class. He is a very patient and gentle teacher, and I take his
suggestions one by one, and he always answers questions I
don't understand. Since the beginning of the sketch, I have
repeatedly encountered various problems, such as not combining
the meaning of words and not using the font given by the
teacher, but the teacher patiently teaches me. This makes me
full of enthusiasm for learning. Every time I submitted my
homework very early, I started to do the homework assigned by
the teacher as soon as I got home. I am a perfectionist and I
will not give up until I do a good job, no matter in study or
life. Font design is a new challenge, and I treat every font
with my heart. I will try harder to do my best.
FURTHER READING
Massimo Vignelli is a well-known Italian designer in the field
of graphic design and industrial design. He wrote this book for
designers to enhance their knowledge of graphic design,
including the rules, criteria and guidelines, also the
typographic principles.
This book is divided into two parts - The Intangibles and The
Tangibles. I have read through the "Semantics" in Part One: The
Intangibles, one of the three aspects of Design (Semantics,
Syntactics and Pragmatics) that are important to Vignelli.
Semantics
Semantics defines as the study of reference, meaning and truth
by Wikipedia. While semantics in design is the search for the
meaning in whatever we have to design, we have to understand the
subject in all aspects and design something that has a reason
for being, meaning and purpose.
Semantics is an important component of the natural process of
design, we have to do enough research to best understand the
meaning of designing a thing, and what the purpose is, then only
we can create a great design based on our understanding.
Design that has no meaning and is done for no reason is
prohibited. Vignelli considers that as criminal since it is visual
pollution that is degrading our environment just like other types
of pollution.
评论
发表评论