LECTURES
Lecture 1-
Introduction
Typo-0-introduction
I watched the video of the lecture (typo-0-intro), in which Mr.Vinod
introduced us to typography, and this lecture give me a deeper
understanding of typography, which we can see in our daily life and use in
various fields, for example, typography is widely used in animation,
application design, web design, logos, etc.
After that ,Mr Vinod explained clearly the differences between font and
typeface,so i understand the difference.
for example
-
Georgia is a font while Georgia Bold is a typeface.
-
Font refers to individual font or weight within a typeface.
-
Typeface refers to the various families that do not share
characteristics.
Briefing
In this lecture, Mr.vinod gave us a detailed introduction on how to
create an e-portfolio and about how to use it to complete assignments, and
secondly Mr.Vinod also showed us information about templates and template
results, and also showed us some of the impressive works of the previous
students.
Lecture 2- Development /Timeline
Typo-1-Development
1.Early letterform development: Phoenician to Roman
In the early days, writing meant scratching into wet clay using a
sharpened stick or carving into a stone using a chisel.
The forms of uppercase letterforms is the only letter form that
has been used for nearly 2,000 years and can be seen to have evolved from
these tools and the forms were mainly built up of straight lines and
pieces of circles.
Figure 1.0 Phoenicians votive stele Carthage
The figure below shows that Modern Latin and Early Arabic
evolved from the Phoenician letters in different ways
Time:
|
Figure 1.1 Evolution from phoenician letter
|
Writing direction
Later,The Phoenician wrote from right to left.The Greeks
would move to a strictly left-to- right writing.And the Greek developed a
style of writing called 'boustrophedon' (how to ox ploughs).Both not use
letter space or punctuations.
|
Figure 1.2 The Greek writing style '
boustrophedon'
|
Etruscan carvers working in marble painted letterforms before
inscribing them. And Increase a change in weight form form vertical
to horizontal.
|
Figure 1.3 Etruscan cavers worke on the marble
|
The following , Mr. Vinod showed us the evolution from
Phoenix to Roman Evolution from Phoenician to Roman
2. Hand script from 3rd -10th century C.E
Square capitals were the written version that can
be found in Roman monuments. These letterforms both have the same
feature ,they have serifs added to the finish of the main
strokes.
Rustic capitalsare a compressed version of square capitals, and this allowed for
twicw as many words on a sheet of parchment and took far less time to
write.Although rustic capitals were faster and easier tp, they were
slightly harder to read due to their compressed nature.
|
Figure 1.4 Square Capitals(4th or 5th century)
|
|
Figure 1.5 Rustic capitals(late 3rd-mid 4th century)
|
Lowercase letterforms develop
Both square and rustic capitals were typically reserved for documents of
some intended performance.But for the sake of speed,daily trasactions are
usually written in cursive script,lowercase letterforms wil start
development.
|
Figure 1.6 Roman cursive
|
Uncials incorporated some aspects of the Roman
cursive hand especially in the shape of the A,D,E,H,M,U and Q.And the
broad forms of uncials are more readable at small sizes than rustic
capitals.
Half- uncials is sign a further formalization
of the cursive hand ,half-uncials mark the formal beginning of lowercase
letterforms,it use ascenders and descenders.
|
Figure 1.7 Half-uncials(C.500)
|
|
Figure 1.7 Uncials(4th-5th)
|
Calligraphy standardization
Charlemagne, the first unifier of Europe since
the Romans.and issued an edict in 789 to standardize all
ecclesiastical text.entrusted Alcuin of York, Abbot of St Martin of
Tours to standardize all ecclesiastical texts. The monks
useing majuscules(upercase),miniscule,capitalization and punctuation which set
the standard for calligraphy for centurey.
|
Figure 1.8 Caloline miniscule(C.925)
|
3. Blackletter to Gutenberg's type
With the dissolution of Charlemagne's empire came regional variations
upon Alcun's script.
In northerm Europe——the Blackletter or textura gained popularity.
In the south——a rounder more open hand gained popularity ,this challed
'rotunda'.
|
Figure 1.9 Blackletter(C.1300)
|
Gutenberg marshaled them all to bulid pages that accurately mimicked the
work of the scribe's hand -Blackletter of northern Europe.And he invented
movable type printing and typesetting, and produced his Bible path in a
high-yield way.
|
Figure 2.0 Johann Gutenberg,Mainz(C.1455)
|
4. Text type classification
|
Figure2.1 Text type classification
|
Lecture 3: Typo_2_Text_P1
1. Tracking: Kerning and Letterspacing
Kerning
The automatic adjustment of space between individual letterforms.
Letterspacing means to add space better lettrs.
|
Figure 2.2 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
not suitable to apply in a large number of texts.
|
Figure 2.3 Normal tracking, tight tracking and loose
tracking
|
However, Losse tracking can be used in headings, but in capital
letters.Uppercase letterforms are draw to be able to stand on their
own, whereas lowercase letterforms require the counterform created between
letters to maintain the line of reading.
2. Formatting Text
Flush left
This format most closely mirrors the asymmetrical experience of
handwriting.Each line starts at the same point but end wherever the last
word on the line end.Spaces between words are consistent throughout the
text. Allowing the type to create an even gray value.
|
Figure 2.4 Flush left
|
Centered
This format imposes symmetry upon the text,assigning equal value
and weight to both ends of any line.It's important to amend line breaks
so that the text does not appear too jagged.
|
Figure 2.5 Centered
|
Flush right
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
It 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.
|
Figure 2.7 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.
|
Figure 2.8 Anatomy of a typeface
|
4. Leading and Line Length
-
Type size:Text type should be large enough to be read easliy at arms
length -imagine yourself holding a book in your lap.
-
Leading: Text that is sec too tightly encourages vertical eye movement; a
reader can easliy loose his or her place. Type that is set too
loosely creates striped patterns that distract the from the material
at hand.
-
Line length:Appropriate leading for text is as much a function of the line
length as it is a question of type size and leading .Shorter lines
require less leading ; longer lines more. A good rule of thumb is to
keep line length between 55-65 characters. Extremely long or short
lines lengths impairs reading.
Lecture 4:
Typo_3_Text_P2
1.Indicating paragraphs
'Pilcrow'a holdover from medieval manuscripts seldom use today.
|
Fig 2.9 the ‘Pilcrow’
|
Line space
Paragraph space should be the same as the line space to ensure
cross-alignment across columns of text.
|
Fig 3.0 line space
|
There is a difference between line space and leading
|
Fig 3.1 line space vs leading
|
Indentation
Will create unusually wide columns of text, which despite
some problems may have strong compositional or functional reasons in
academic writing, but will not be used
|
Fig 3.2 Indentation
|
2. Widows and
Orphans
a widow is a short line of type left alone at the end of a column of text.
An orphan is a short line of type left alone at the start of new column.
|
Fig 3.3 Widows and
Orphans
|
3.Highlighting Text
Use the same typeface but different fonts or colour(but yellow is not
recommended)
Not that sans--serif fonts usaully look larger than serif fonts.
Aligned figures(numbers) or All Capital acronyms embedded in text by .5 as
well,to ensure visual conhesion of the text.
|
Fig 3.4 Highlighting Text
|
4.Headline within Text
The following visuals have been labelled(A, B and C)according to the level
of important.
Subheadings put together equal hierarchy, there is no single way to
express hierarchy in a text, each text has a different way of indicating
different information
|
Fig 3.5 Headline within Text
|
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.
|
Fig 3.6 Cross Alignment
|
Lecture 5:
Typo_4_Basic
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.
- 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)
2. The font
- Uppercase and Lowercase
-
Small Capitals:Uppercase letterforms draw to the x-height of the
typeface.
|
Fig 3.7 Small Capitals
|
-
Uppercase Numerals:Also called lining figures, these numerals are the
same a height as uppercase letters and are all set to the same kerning
width.
-
|
Fig 3.8 Uppercase Numerals
|
-
Lowercase Numerals: Also known as old style figures or text figures,
these numerals are set to x-height with ascenders and descenders.
|
Fig 3.9 Lowercase Numerals
|
-
Italic:The forms in a italic refer back to fifteenth century Italian
cursive handwriting.
-
Punctuation,miscellaneous:They all fonts contain standard
punctuation marks,miscellaneous characters can change from typeface
to typeface.
-
Ornaments: It used as flourishes in invitations or certificates.
|
Fig 4.0 Punctuation,miscellaneous and Ornaments
|
3. Describing typefaces
-
Roman:The uppercase forms are derived from inscriptions of Roman
monuments.
-
Italic: It named for fifteenth century Italian handwriting on which
the forms are based.
- Oblique:It conversely are based on roman form of typeface.
-
Condense:A version of the roman form,and extremely condense styles are
often called 'compressed'.
- Extended:An extended variation of a roman font.
|
Fig 4.1Describing typefaces
|
4. Comparing typefaces
The 10 typefaces mentioned in the following slide represent 500 years of
type design.
Beyond the gross differences in x-height, the forms display a wealth of
variety, in line weight, relative stroke widths and in feeling.
|
Fig 4.2 Comparing typefaces
|
Lecture 6:
Typo_5_Understanding
1. Understanding letterforms
The uppercase letter forms below suggest symmetry. But in fact it is not
symmetrical.It is easy to see the two different stroke weights of the
Baskerville stroke from(below)
More noteworthy is the fact that each bracket connecting the serif to the
stem has a unique arc.
|
Fig 4.3 Baskerville 'A'
|
The Uppercase letter forms may appear symmetrical, but a close examination
shows that the width of the left slope is thinner than the right stroke.
|
Fig 4.4 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.
|
Fig 4.5 Helvetica 'a' and Univers 'a'
|
2. Maintaining x-height
The x-height generally describe the size of the lowercase letterforms.Such
as in 's',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 4.6 Lowercase maintaining x-height
|
3. Form and Counterform
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.
|
Fig 4.7 Form and Counterform
|
4. Contrast
The simple contrasts produces numeerous variations:
small+organic/Iarge+machined;small+dark/large light,etc
|
Fig 4.8 Contrast
|
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/1z1lFerEL7JObwjBxRSl_zbH_FIJPyxD4/preview"
width="640" height="480" allow="autoplay"></iframe>
TASK1: EXERCISES
Task 1: Exercises - Typ Expression
In the first task, we were asked to choose 4 words to make a type
expression and we were given 7 words to make the type expression
1.Sketch
I chose words (time, dash, open and swim),they both seemed short but
commonly used. As instructed, i began by sketching out my ideas in draft
mode.
|
Figure 1.0 Type expression sketches
|
|
Figure 1.0 Type expression sketches
|
Time:
The word "time" first reminds me of a clock, so in the first
draft, I combined elements of an alarm clock to surround the font. In the
second image, I combined elements from daily life to make the font look
like a person waiting for a bus under a street light. In the third image,
I scattered the font to indicate free time.
Open:
For the design of "open", I combined its original meaning
to create a representation of an object being opened and its contents
falling off.
Dash:
I have made some designs about Dash, trying to make it look
like it is moving and landing heavily on the ground.
swim:
About swim, I also combined its own meaning to make it show
a sense of swaying.
Final-Task 1: Exercises - Typ Expression
|
Figure 1.1 Draft Part
|
Figure 1.2 Final Type Expression - PDF
Animation
To choose one of the final types of expressions to animate, I chose
'time' to animate, and before I started animating it, I watched a
step-by-step tutorial on how to animate it by Mr Vinod.
I wanted the 'time' to be like an alarm clock that goes off at a
predetermined time, so I added a swinging animation at the end to
represent the vibration of the alarm clock.
|
Figure 1.3 Process in AI
|
|
Figure 1.4 process in PS
|
So i made first animation'TIME'
|
Figure 1.5 GIF TIME
|
Exercise 2 : Text Formatting
1.Kerning & Tracking:
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.
|
Fig1.6 without Kerning & Tracking
|
|
Fig1.7 with Kerning & Tracking
|
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.
This five week class was particularly intense for me, we had to update task1 a
little bit each week to ensure progress and get feedback from Mr Max to adjust
our assignments, Mr Viond showed me blogs from previous students to make us
better learners, in the process we also watched a pre-recorded video of a
lecture given by Mr Viond, which I think was extremely helpful for us to learn
typography and the basics.I think this lecture video was very helpful for us
to learn the basics of typography and layout.
I have observed that I have done my work in a more detailed way, I have
noticed that the way of working a little bit every week can get timely
guidance and absolute feedback, and the weekly update of the eprotfolio can
help us to consolidate our knowledge, in the process of learning, I missed Mr
viond's message to the extent that I didn't use 10 fonts in my first font
design, and in the process of changing the fonts to different fonts, I had
difficulty in expressing the meaning of the animation work because I was not
familiar with how to make animation work.When I was drawing, I was not
familiar with how to make animation works and it was difficult for me to
express the meaning of the animation works.
Throughout task1, I learnt about typography and fonts, during the learning
process I found out that designing fonts with adobe Illustrator to express its
original meaning and using photo shop's frame by frame to make the fonts move
would make me feel happy because I have never used these design software
before, HOWEVER, during the secondI learnt a lot of technical details about
typography during the second exercise of Task 1, and the weekly feedback
helped me a lot.
This book aims to provide a concise yet comprehensive overview of the
information,