04/04/2023- (week 1 - week 5)
3. Text Type Classification
Fig 2.1 Kerning
Grey vakue: text on a white page,
compositional requirement, ideal text to
have a middle gray velue.
B heads: Indicates a new supporting arguments or example for the topic at hand. Should not interrupt the text as strongly as A heads do.
5. Croes
Alignment
Italic:
Refers
back to
fifteeth
century
Italian
cursive
handwriting.
Ornaments: Used as flourishes in invitations or certificates. Usually provided as a font in a larger typeface familu(Adobe Caslon Pro).
4.
Comparing
Typefaces
Typo 5 Understanding
2.
Maintaining
x-height
X-height: 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.
3.
Form/Counterform
We
could
examine
the
counterform
of
letters
by
enlarging
each
letter
and
analysing
them.
4.Contrast
CLASS SUMMARY
Task 1：Excersize Type expression
Fire: Fire is flame, fire, which I associate with heat, and
then fire can make type melt, or be illusory, and fire in my case is illusory,
without substance, without a way to extinguish it.
Fig. 1.1.1 Type expression sketches (Fire), Week 1 (4/4/2023)
3. Animation
Final Animated Type Expression
In Exercise 2 we need to learn to create a final layout using Adobe Indesign, addressing different areas of text formatting such as type selection, text size, line spacing, line length, paragraph spacing, forced line breaks, hyphenation, alignment, word spacing, widows and orphans and cross-alignment. We need to watch the lecture videos and complete the exercises based on them.
Text Formatting 2/4: Font Size, Line-Lenght, Leading & Paragraph
Spacing
Font size(for A4): 8 to 12 pt.
Text Formatting 3/4: Alignment, Paragraph Spcing, Text Fields &
Ragging
Text Formatting 4/4 Cross Alignment & Baseline Grid
Maintain cross alignment
Exercise results:
Typography is a constantly evolving discipline that provides a concise
and comprehensive overview of the information, vocabulary, tools, and
methods used in effective typography design practices.
The first chapter presents in the form of a timeline, from the development of handicrafts to machinery and then to digital practice, which is divided into five parts:
Part 2:
Part 4:
Liang Lina 0347076
Bachelor of Design (Honours) in Creative Media and Typography
Typography
task 1(Exercises)
LECTURES
Typo 0 Introduction
In this lecture, Mr. Vinod introduced what will be studied throughout the
module and also how typography is widely used in all industries. Mr. Vinod
said that there are many different styles of type and typography and that
this is mainly due to personal style.
Typographic terminology: font and typeface
Font: refers to the individual type or weight in a font.
Fig. 1.1 Font
Typeface: the entire family of fonts/weights that share
similar characteristics/styles.
Fig. 1.2 typeface
Typo_1_Development
1. Early alphabetic development: from Phoenician to Romance
languages
Writing: scratching in the clay with a sharp stick or carving
into stone with a chisel.
Arabic and modern Latin can be read from the Phoenician alphabet.
Fig. 1.3 carving into stone with a chisel
Fig. 1.4 Evolution from Phoenician letter
When the Greeks changed the way they read, they also changed the
direction of the letter forms.
Fig.1.5 Boustrophedon style of writing
Etruscan (and then Roman)Quality of their strokes: a change in
weight from vertical to horizontal, a broadening of stroke at start
and finish.
Fig. 1.6 Letter forms drawn in marble by the Etruscans and
Roman Cava
Fig. 1.7 Evolution from Phoenician to Roman
2. Hand seript from 3rd-10th century C.E.
Square capitals: written version that can be found in Roman
monuments and squares. The letter forms are held at a 60 degree vertical angle at the
end of the stroke using a reed pen.
Fig. 1.8 5th century B.C. square capitals
Rustic capitals: vertical angle of 30 degrees, similar to
compressed square capitals.
Fig.1.9 Late 3rd - mid 4th century rustic capitals
Cursive handwriting: for speed, the beginning as a
lowercase form.
Fig.1.10 4th century Roman cursive
Uncials: combines some aspects of the Roman cursive hand, e.g.
H,U,M,Q. Smaller letters, suitable on smaller sizes.
Fig.1.11 4th - 5th century uncials
Half-moon field: further formalization of the cursive hand,
formal beginning of the lower-case letter form.
Fig.1.12 C.500 half-uncials
Charlemagne, the first homogenizer of Europe since the
Romans, decreed in 789 that:
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.
Fig.1.13 C.925 Caroline miniscule
Black letters: condensed strong vertical letter
forms.
Rotunda: popular more round and open.
Fig.1.14 C.1300 Blackletter (Textura)
Gutenberg: the press includes engineered metalwork and
chemistry in order to accurately imitate the pages worked
by the scribe's hand.
Fig.1.15
Fig. 16 42 lines of the Bible
3. Text Type Classification
Fig.1.17 Text type classification
Typo_2_Text(Part 1)
1. tracking: Kerning and Letterspacing
Tracking: Addition and removal of space in word or
sentence.
Kerning: Automatic adjustment between letters.
Letterspacing； Adding spaces between letters.
Normal Tracking-Loose Tracking-Tight tracking.
Fig. 2.2 Normal Tracking
2. Text Formatting
Flush Left: Each line starts at the same point but ends
wherever the last word on the line ends. Spaces
between words are consistent throughout the text,
allowing the type to create an even gray
value.
Fig. 2.3 Flush left
Centered: imposed symmetry upon the text.
Fig. 2.4 centered
Flush Right: emphasise on the end of a line
and opposed its starts.
Fig. 2.4 Flush Right
Justified: Imposes a symmetrical shape
on the text, achieved by expanding or reducing spaces
between words and, sometimes, between
letters.
Fig. 2.5 Justified
3. Texture
Sensitivity to these differences in
colour is fundamental for creating successful
layouts.
Fig. 2.6 Anatomy of a typeface
Fig.2.7 Different typefaces with different
grey values
4. Leading and Line Length
Text Size: Text type should be large
enough to be read at arm's length
Line spacing: the spaces between
typefaces.
Set too densely will result in vertical
eye movement and the reader will tend to
lose track. Set too loosely will create a
streaky pattern and cause the reader to
become distracted.
Fig. 2.8 2.9 Leading and line length
Line length: Number of characters in a
line, a good rule of thumb is to keep the
line length between 55-65 characters.
Extrenely long or short line lengths
impair reading.
5. Type Specimen Book
A type specimen book shows samples of
typefaces in various different sizes. Its
to provide an accurate reference for type,
type size, type leading, type line length,
etc.
Fig. 2.10 Sample type specimen
sheet
Typo-3-Text(Part 2)
1. Indicating Paragraphs
Picrow: A holdover from medieval
manuscripts seldom use today.
Fig. 3.1 Pilcrow
Line spacing (leading): If the
spacing is 12 pt, the paragraph
spacing is also 12 pt. This
ensures cross-alignment across
text columns.
Fig.3.2 Line space
Fig. 3.3 Line soace
vs leading
Standard Indentation: the indent is
the same size of line spacing or
same as siza of text.
Fig. 3.4 Standard indentation
Extended paragraphs: create unusually wide
columns of text.
Fig. 3.5 Extended paragraphs
2. Windows and Orphans
Widows: short line of type
alone at the end of a column of
text.
Orphans: short line of type
alone at the start of new
column.
Fig. 3.6 Windows and Orphans
3. Highlighting Text
Italic/Bold/Colour (Same Typeface)
Fig. 3.6 3.7
3.8 Italic/bold/colour
Different
typeface
Fig 3.9 Different
typeface
Placing a field of
colour
Fig. 3.10 field of
colour
Quotation
Marks/Bullets
Fig. 3.11
Quotation
marks/bullets
4. Headline
with Text
A
heads:
Indicates a
clear break
between the
topics within
a
section.
Fig. 3.12 A
heads
B heads: Indicates a new supporting arguments or example for the topic at hand. Should not interrupt the text as strongly as A heads do.
Fig. 3.13
B
heads
C
heads:
Highlights
specific
facets of
material
within B
head text.
Don't
interrupt
the flow
of
reading.
Fig.
3.14 C
heads
Cross
aligning
headlines
and
captions
with text
type
reinforces
the
architectural
sense of
the
page—the
structure—while
articulating
the
complimentary
vertical
rhythms.
Fig.
3.15 Cross
alignment
Typo 4 Basic
1.Describing
letterforms
Baseline:
imaginary
line the
visual
base of
letterforms.
Median:
Imaginary
line
defining
the
x-height
of
letterforms.
X-height:
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: 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
sa,e
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 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
siza
of the
typeface;
an en
is
half
the
siza
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
characterformed
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
bowl.
Spine:
The curved
stem of
the
S.
Spur: The
extension
that
articulated
the
junction
of the
curved
and
rectilinear
stroke.
Stem: The
signidicant
vertical
or
oblique
stroke.
Stress: The
orientation
of the
letterform,
indicated
by the
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).
<iframe
src="https://drive.google.com/file/d/1TTy3jKW_GJdo78Cz7jqww6MYkIqjHVml/preview"
width="640"
height="480"
allow="autoplay"></iframe>
Fig.
4.1Describing
letterforms
-
PDF
2.The
Font
Type family:
There are
many
different
faces and
many
different
fonts.
Tont: Bold,
regular,
extended,
semi
bold.
Upperase
and
Lowercase.
Fig.
4.2 Upperase
and
Lowercase
Small
Capitals:
Uppercase
letters
drwan to
X-height
of the
typeface.
Fig. 4.3
Small
capitals
Uppercase
Numerals:
Same
height
of as
uppercase
letters.
Lowercase
Numerals:
Numerals
set to
x-height
with
ascenders
and
descenders.
Fig.
4.4 Uppercase
and Lowercase
Numerals
Fig 4.5
Italic
Punctuation,
Miscellaneous
Characters:
It is
important
to ensure
that all
the
characters
are
available
in a
typeface
before
chooseing
the
appropriate
type.
Fig.
4.6 Punctuation,
Miscellaneous
Characters
Ornaments: Used as flourishes in invitations or certificates. Usually provided as a font in a larger typeface familu(Adobe Caslon Pro).
Fig.
4.7 Ornaments
3.
Describing
typefaces
Roman:
Uppercase
forms
are
derived
from
inscriptions
of Roman
monuments.
A
slighter
lighter
stroke
in roman
is known
as
'Book'.
Italia: Named
for 15th
century
Italian
handwriting
on which
the
forms
are
based.
Oblique
conversely
is based
on the
room
form of
typeface.
Boldface:
Characterized
by a
thicker
stroke
than a
roman
form. It
can also
be
called'semibold',
'medium','black','extra
bold',
or
super.
Light: A
lighter
stroke
than
roman
form.
Even
lighter
strokes
are
called
'thin'.
Condense: A
version
of the
roman
form,
and
extremely
condense
style
are
often
called
'compressed'.
Extended: An
extended
variation
of a
roman
font.
Fig.
4.8
Describing
typefaces
Beyond
the
gross
differences
in
x-height,
the
forms
display
a wealth
of
variety,
in line
weight,
relative
stroke
widths
and in
feeling.
The Rs
display
a range
of
attitudes,
some
whimsical,
some
stately,
some
mechanical,
others
calligraphic
some
harmonious
and some
awkward.
Fig.
4.10
Comparing
typefaces
1.
Letterforms
Uppercase'A':
Baskerville,
Univers. The
capital
letter
forms
indicate
symmetry,
but
the
fact
that
they
are
not
symmetrical,
both
forms
demonstrate
the
meticulous
care
that
the
type
designer
took
to
create
internally
harmonious
letter
forms
and
personal
expression.
Baskerville: Each
bracket
that
connects
the
liner
to
the
stem
has
a
unique
and
distinctive
curved
shape.
Univers: The
width
of
the
slope
on
the
left
is
thinner
than
that
on
the
right.
FIG.
5.1
Baskerville
Fig.
5.2
Univers
Lowercase
'a':
Helvetica
VS
Unviers: 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.
Fig.
5.3 Helvetica
VS
Unviers
X-height: 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.
Fig.
5.4 Maintaining
x-height
Counterform
(or
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.
How
well
are
the
counters
handled
determines
how
well
the
words
hang
together—how
easily
we
can
read
what’s
been
set.
Fig.
5.5
Form
and
Counterform
Fig.
5.6 Understanding
from
and
counterform
The
simple
contrasts
produce
numberous
variations:
small,
organic;
large,machined;
small,
dark;
large,light;
etc...
Fig.
5.7
Countrast
Typo 6 Screen
&
Print
1.
Print
Type
vs
Screen
Type
Type
for
Print:
Type
was
designed
intended
for
reading
from
print
long
before
we
read
from
screen.
The
text
should
be
smooth,
flowing
and
pleasant
to
read.
Ex:
Caslon,
Garamond,
Baskerville(elegant,
intellectual,
highly
readable
at
small
font
size)
Fig.
6.1
Type
for
print
Type
for
Screen:
typefaces
intended
for
use
on
the
web
are
optimized
and
often
modified
to
enhance
readability
and
preformance
onscreen
in
a
variety
of
digital
environments.
A
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
for
some
designs,
more
open
spacing(for
smaller
size
type
faces,
helps
to
improve
character
recognition
and
overall
readability
in
non-printing
environments.)
Fig.
6.2
Type
for
screen
Hyperactive
Link
/
Hyperlink:
A
word,
phrase,
or
image
that
you
can
click
on
to
jump
to
a
new
document
or
a
new
section
within
the
current
document.
Found
in
nearly
all
Web
pages.
Text
hyperlinks
are
normally
blue
and
underlined
by
default.
Font
Size
for
Screen:
16-pixel
text
on
a
screen
is
about
the
same
size
as
text
printed
in
a
book
or
magazine;
this
is
accounting
for
reading
distance.
Because
we
read
books
pretty
close-often
only
a
few
inches
away-
they
are
typically
set
at
about
10
points.
If
you
were
to
read
them
at
arm's
length,
you'd
want
at
least
12
points,
which
is
about
the
same
size
as
16
pixels
om
most
screens.
Fig
6.3
Font
size
for
screen(left)
VS
print(right)
System
Font
for
Screen
/
Web
Safe
Fonts:
Each
device
comes
with
its
own
pre-installed
font
selection
which
is
largely
based
on
its
operating
system;
Web
safe
fonts
appear
acroses
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,
Helvetica,
Times
New
Roman,
Rimes,
Courier
New,
Courier,
Verdana,
Georgia,
Palatino,
Garamond.
Pixel
Differential
between
Devices:
The
screens
used
by
our
PCs,
tablets,
phones
and
TVs
are
not
only
different
sizes,
but
the
text
you
see
on-screen
differs
in
proportion
too,
because
they
have
different
sized
pixels.
Fig.
6.4
Pixel
differential
between
devices
2.Static
VS
Motion
Static
Typography:
Static
Typography
has
minimal
characteristics
in
expressing
words.
Traditional
characteristics
such
as
bold
and
Italic
offer
only
a
fraction
of
the
expressive
potential
of
dynamic
properties.
Fig.
6.5
Static
typography
Motion
Typography:
Temporal
media
offer
typographers
opportunities
to
'dramatize'
type,
for
letterforms
to
become
'fluid'
and
'kinetic'.
Motion
graphics,
particularly
the
brand
identities
of
film
and
television
production
companies,
increasingly
contain
animated
type.
Fig.
6.6 "Seven"
(1995)
title
credits
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/16O6B2Dj5_F10feNFSoQEjH5gfbsLKrcd/preview"
width="640" height="480" allow="autoplay"></iframe>
CLASS SUMMARY
Week 1: In the first week, our teacher asked us to join the
typography module group on FACEBOOK so that we could easily know the latest
news of typography in class through the module group. We downloaded 10 fonts
from Mytimes and will be using them throughout the rest of the term. In class,
the teacher showed us a video introducing the e-portfolio, asked us to create
a blog and explained the module information booklet to us, after which we
started to choose words to design. Finally, the teacher gave us a brief
overview of the homework we had to do before the second week.
Week 2: In the second week, the teacher showed us a lot of
his work, design work, photos, and font design, the process to the result, and
I learnt a lot from it. Afterwards, the teacher asked us to provide our own
font design for the previous week on Facebook and he gave us feedback and
pointed out the shortcomings. I realised from the other students' work that
everyone had a lot of interesting points to make. We then filled in the google
form with our feedback.
Week 3: In the third week, as soon as we started class, our
teacher checked our blogs and realised that there were many shortcomings in my
blog that should be corrected in time, based on the blogs I had observed. We
then continued with feedback on the previous week's homework, we selected four
to post on Facebook and Mr. Vinod commented on them, and needed to show
digital versions of the words.
Unfortunately, something went wrong with mine and after the teacher's critique
and explanation, as well as observing other students' work, I needed to make
corrections. And we were told what we should do in week four and what we
needed to show him to complete based on the video.
Week 4: In the fourth week, Mr.Vinod first asked us to
present our work from the previous week, which was a GIF of sorts, the final
result of which was an animation of a type expression. After the feedback,
Mr.Vinod gave us 30 minutes to make some adjustments to the word frame
animation and then re-present it to Mr.Vinod for advice.
In the second half of the course, Mr.Vinod looked at some of the students'
blogs and gave feedback and suggestions, which I learnt a lot from.
Task 1：Excersize Type expression
MR Vindos gave us a few words, I chose dissipate, crush, fire and sick
and rain.
1. Sketches :
Crush: The first things that comes to mind is "shattering", as
type can be broken like a physical object, or crushed by an object, or
otherwise distorted.
Fig. 1.1.1 Type expression sketches (Crush), Week 1 (4/4/2023)
Dissipate: Dissipate in my
case means to disappear, to dissipate, or even to swallow, so I used
special effects and made a font fade to express "dissipate", as well as
a dissipate effect and a swallow effect.
Fig. 1.1.1 Type expression sketches (Dissipate), Week 1
(4/4/2023)
Sick:
Sick, I used band-aids, as well as a stethoscope, swabs, and
thermometer to create the design, and I turned the "I" into a
band-aid, swab, and part of a stethoscope. I turned the 'C' into the
ear of the stethoscope and the swab. I made the "K" into a
thermometer.
Fig. 1.1.1 Type expression sketches (Sick), Week 1 (4/4/2023)
2. Digitisation:
After the second week, I chose crush, dissipate, fire and
sick. In this step I made a small change, I made the crush
graphic elements bigger and added more graphic elements, but
Mr.Vindo said that this was not correct. So I have re-made the
change below.
Fig.2.1.1 Attempts on digitising (11.4.2023 - Week 2)
Fire: In version 2, I redesigned the fire after the
teacher's comments from the previous week. Without changing the font
itself, I used the pen tool to draw the shape of the fire in each font
and added a flame to the head of the "I" to emphasise the character of
the fire.
Fig.2.1.21 'Fire' digitisation process (18.4.2023 - Week 3)
Water: Because of the re-choice of the font, I gave
serious thought to how Water should look. I thought that Water was
fluid and could go anywhere, so I chose to separate the top half of
Water from the bottom half, changing the transparency of the top
half to make the word look like a 'cup'. "I then added a few drops
of water to the 'W' and 'r' to emphasise the character as a
container.
Fig.2.1.22 'Water' digitisation process (18.4.2023 - Week
3)
Rain: For rain, I wanted to turn the lowercase 'I' into
an umbrella and add the raindrops, a simple umbrella, and I thought
the 'I' would protect the a and n from the rain. So I twisted the
font and distorted it.
Fig.2.1.23 'Rain' digitisation process (18.4.2023 - Week 3)
Rain: Because Rain has too many graphic elements, so after consulting
with the teacher, I redesigned Rain, and I chose another font to
deal with this word. I did not change the size of the word to
make it look Like a tree, or an umbrella to keep out the wind
and rain, and then add a few raindrops at the end.
Fig.2.1.31 'Rain' digitisation process (24.4.2023 - Week
3)
Sick: Regarding sick, I thought it was sick, so I
wanted to design the 'K' as a thermometer, where the 'ic' was chosen
in lower case to look more comfortable, and then the 'K' was The 'K'
was then twisted so that it became a thermometer and then its
temperature was raised to indicate sickness.
Fig.2.1.24 'Sick' digitisation process (18.4.2023 - Week
3)
After listening to Mr.Vindo's advice, I re-selected my words and
redesigned and adjusted the words I had chosen. The "I" in Rian
becomes an umbrella, the bottom half of the font in Water becomes a
bucket, the font in Fire is burning and Sick becomes a
thermometer.
For version 3.0, I changed my Rain and Sick, the Rain I thought of
as "raindrop" and the lowercase "r" as an umbrella.
Fig.2.1.2 Attempts on digitising (18.4.2023 - Week 3)
Fig.2.1.3 Attempts on digitising (1) (24.4.2023 - Week 3)
Final Type Expressions
Fig. 2.2 Final type expressions-JPEG (24.4.2023-week 4)
Fig. 2.3 Fianl Type expressions - PDF (24.4.2023-Week 4)
After the final type expressions had been decided and digitised, we had
to choose one of them to make a Gif. At the end of week 3, Mr.Vinod asked
us to watch his video tutorial in which he showed how to make frame
animations using adobe illustrator and abode photoshop and how to export
GIF files.
Firstly, I chose the word 'Water' to create a GIF animation, and
following the steps in the video, I created the first version of the
'Water' water animation.
Fig.3.1.1 First attempt of animation of “Water”(18.4.2023 - Week 3)
There are total 12 time frames in the second attempt for the
word“Water”，and the step diagram drwaing inside adobe illustrator.
Fig.3.1.2 Animation timeline
After receiving feedback from Mr.Vinod, I modified the GIF by removing the
connection between each font in Adobe illustrator to make each word more
independent.
Fig.3.1.3 Second attempt of animation of “Water”(25.4.2023 - Week 4)
No change has been made to the frame rate, wihch is still 12 fps, but I
set a delay of 0.1seconds above the last frame.
Fig.3.1.4 Animation timeline
TASK: EXERCISE 2- TEXT Formatting
In Exercise 2 we need to learn to create a final layout using Adobe Indesign, addressing different areas of text formatting such as type selection, text size, line spacing, line length, paragraph spacing, forced line breaks, hyphenation, alignment, word spacing, widows and orphans and cross-alignment. We need to watch the lecture videos and complete the exercises based on them.
Text Formatting 1/4 Kerning & Tracking
Fig. 4.1.1 Without
kerning
Fig 4.1.2 With kerning 1
Fig 4.1.3 With kerning
(25.4.2023 - Week 3)
Font size(for A4): 8 to 12 pt.
No. of characters in one line length: 55 to 65 characters.
Leading:
1. Body text: +2 to 3 points of the typeface point size(depends on the
typefaces).
2. Header: double point sizes of leading for body text.
Paragraph spacing: same with leading
Fig. 4.1.4 Font Size, Line-Lenght, Leading & Paragraph Spacing
Tracking: +3/-3 to reduce ragging (line).
Alignment: Left align (preferred) or justify (use hyphenation to/and
aviod rivers)
Fig. 4.1.5 Alignment, Paragraph Spcing, Text Fields & Ragging
Maintain cross alignment
Avoid widows and orphans
Fig 4.1.6 Cross Alignment & Baseline Grid
Formal Exercise
I followed the tutorial to do the steps above and now started the
steps I wanted, but this time I expected it to be a little more
difficult because of the ADOBE INDESIGN version, I had a long search
for hyphenation, but luckily I found it at last.
Here I tried to change the font, return the size of the words and
adjust the margins, I hope I can make a comfortable page.
The process:
Fig. 4.17 process
Final Text Formatting
After the advice given by Mr. Vinod in class, I revised layout 2 in
class and chose layout 2 as the final layout.
Fig. 4.22 Final exercise (02.05.2023- week 5)
<iframe
src="https://drive.google.com/file/d/1nF0mTaTBbqMfaNFA0q_Pu0FVSres1PXb/preview"
width="640" height="480" allow="autoplay"></iframe>
<iframe
src="https://drive.google.com/file/d/1n5FMB4db3OaP5ohJ-BRgxy0ztzvXSbLr/preview"
width="640" height="480" allow="autoplay"></iframe>
FEEDBACK
Week 1
General:
Specific:
Week 2
GeneralFeedback: Reduce the use of graphic elements by
sketching before making.
Specific Feedback: I have used the fonts provided by Mr.
Vinod, but perhaps too many filters have distorted them, trying to convey as
much as possible through the fonts themselves, rather than being too graphic
and digital, and experimenting with as many ideas as possible. Make as many
sketches as you can to keep thinking about what to de with the font before
making it in AI/Ohotoshop.
Week 3
Questions:
1. Do the expressions match the meaning of the words?
2. Are the expression well crafted (crafting/lines/shapes)?
a. Do they sit well on the art-board
b. Are the composition engaging? Impactful?
3. Are there unnecessary non-objective elements present?
4. How can the work be improved?
1. Do the expressions match the meaning of the words?
2. Are the expression well crafted (crafting/lines/shapes)?
a. Do they sit well on the art-board
b. Are the composition engaging? Impactful?
3. Are there unnecessary non-objective elements present?
4. How can the work be improved?
General Feedback: In this lesson the teacher sampled some
blogs to review and commented on the quadrille font work left over from the
previous lesson.
Specific Feedback: Although I used the teacher's font, my font
has too many graphic elements, too many drawing and deformation elements,
which is incorrect.
Week 4
General Feedback: This animation needs a little change, go
ahead and change it from adobe illustrator.
Specific Feedback: Mr.Vinod suggested that I remove the
links between each letter, as they don't look harmonious enough, and that it
would look more comfortable to reanimate the frames after removing them.
Week 5
Question:
1. Is kerning ang tracking appropriately done?
2. Does the font size correspond to line-leading¶graph
spacing.
3. Is the alignment choice controlled well?
4. Has the ragging been controlled well?
5. Has cross-alignment been established using base-line
grids?
6. Are widows and orphans present?
GeneralFeedback: You need to choose images that are relevant to the text, avoid images with
text, avoid widows and orphans, and ensure that paragraph spacing is stable
and word spacing is stable.
Specific Feedback: My image is too big and there is not enough room to explain the image, it
looks crowded and my caption is not allowed here. I need to readjust.
REFLECTIONS
Experience: In these three weeks, having completed two exercises,
fonts and text formatting, and having watched the video posted by Mr
Vinod, but which I haven't had time to blog about yet, these exercises
helped us to learn a lot about the basics, for example: types of
expression, a very distinctive challenge, the stage from sketching to
digitising to animation. We had to complete the task bit by bit and follow
the range of fonts provided by the teacher without over-distorting or
over-graphicising.
As my sketching and digitising was done on the computer, but the actual
implementation was a bit different for me, for me I still learnt a lot
through the teacher's videos and became more familiar with IIIUSTRATION
and PHOTOSHOP, which I believe will be very useful for me in the rest of
the course. With Mr vinod advice, we learnt a lot each week and expanded
our horizons from the designs and ideas of our classmates.
Observation: In these five weeks, I have observed following Mr
In Vinod's lectures and classes, I learned a lot about Adobe Photoshop and
Adobe Illustrations, as well as using typesetting software. I have
observed that our attitude towards learning and towards homework should be
serious, and studying diligently can yield rewards.
Findings: In these five weeks of practice, I have received
feedback and realized that typesetting is about arranging our own personal
style and techniques for letters or words, which can be expressed through
meaning. When letters/words are displayed, they are easy to understand and
attractive. And in practice, I found that there are several key
information in typesetting: font, spacing, line spacing, tracking,
alignment, and so on, which can make typesetting design more attractive.
FURTHER READINGS
Fig5.1
This book has a total of 13 chapters, including the history of
typesetting and a series of content such as Anatomy, Legibility, and
Typographic Grid.
Chapter 1: The Evolution of Typography
The first chapter presents in the form of a timeline, from the development of handicrafts to machinery and then to digital practice, which is divided into five parts:
Part 1:
The history treated in the first section of the timeline predates
typography. It begins with the invention of writing over five thousand
years ago and ends with the invention of movable type in Europe during the
middle of the fifteenth century.
Fig 5.2 The Invention of words
Part 2:
The second section covers the long era of the handpress and hand-set metal
types. This period, from Gutenberg’s invention of movable type to the end
of the eighteenth century, lasted about 350 years.
Fig 5.3 From the mid 15th century to the end of the 18th century
Part 3:
In the third section, the Industrial Revolution and nineteenth century
are revealed as an era of technological innovation and an outpouring of
new typographic forms.
Fig. 5.4 The nineteenth century and the Industrial Revolution: 1800–1899
CE
The fourth section begins with the year 1900 and covers the twentieth
century, a time when type was shaped by the aesthetic concerns of
modernism, the need for functional communication, technological progress,
and the digital revolution in typography.
Fig. 5.5 Typography in the twentieth century: 1900–2000
Part 5:
The final section showcases typographic design in the twenty-first
century, as it expands to mobile devices and embraces the many
possibilities afforded by digital production.
Fig：A new century and millennium begin: 2000 CE
Comments
Post a Comment