Week 1 - Week 5 : 25 Aug 2021 - 22 Sept 2021
Tan Yi Yun 0345559
Bachelor of Design (Hons) in Creative Media
Task 1 / Exercises
Tan Yi Yun 0345559
Bachelor of Design (Hons) in Creative Media
Task 1 / Exercises
LECTURE
Week 1
Live class :
For this module, we have Mr. Vinod and Dr. Charles as our lecturers.
They briefed us about the module outline and expectations during the
first live class. Facebook group will be our main platform where all
the class materials and important announcements can be found
here. Some sample blogs were also provided for us as a guide so that we can
get an idea what are the expected outcomes. There were a lot of
information given in week 1!
Then, we were given some time to watch the e-portfolio briefing. Thanks
to this tutorial, everything was easy to catch up. After everyone posted
their e-portfolio links in the Google Sheets, Mr. Vinod and Dr. Charles
randomly picked some links to check whether they followed the given
format. There are also recorded lecture videos available at YouTube. We
were instructed to watch the videos weekly.
Recorded lectures :
Typography - Introduction
Typography, the creation of typefaces or type families. It is all about
adjusting the text within the design while creating powerful content. It
provides attractive appearance and preserves the aesthetic value of
content.
I never notice the significant of typography in our real lives. It is
visible and prevalent in almost everywhere : signage design, website
design, app designs, books and posters.
Creating a good typography is a heavy iteration process, which means, we
will go through the process of trying that may fail and then learning
from failures and successes to try again.
Wikipedia
descries typography as "the art and technique of arranging type to make
written language legible, readable and appealing when displayed. The
arrangement of type involves selecting typefaces, point sizes, line
lengths, line-spacing (leading), and letter-spacing (tracking), and
adjusting the space between pairs of letters (kerning). The term
typography is also applied to the style, arrangement, and appearance of
the letters, numbers, and symbols created by the process.
Font
: Refers to the individual font or weight within the typeface. (Georgia Regular, Georgia Italic, Georgia Bold)
Typeface : Refers to the entire family of fonts/weights that
share similar characteristics. (Georgia, Arial, Times New Roman)
Typography - Development and Timeline
All information presented in this lecture is taken from the perspective
of the Western world, which tends to ignorantly overlook inventions in
Asia and this is the reason why we were advised to do our own research
and further reading to obtain a more holistic perspective. Then, the
lecture begun with the history development of typography.
1. Early letterform development : Phoenician to Roman
The initial writing meant scratching into wet clay with 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. Phoenicians wrote
from right to left.
|
| Figure 1.1.1, Evolution from Phoenician letter |
The Greeks changed the writing direction. There is a style of writing
called "boustrophedon", which alternate lines of writing are
reversed, with reversed letters.
|
| Figure 1.1.2, Boustrophedon writing style |
Etruscan (and then Roman) carvers working 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 (Then developed into the Serif font.)
|
| Figure 1.1.3, Early Letterform Development (Phoenician - Greek - Roman) |
2. Hand Script from 3rd to 10th century C.E.
Square capitals - the written version that can be
found in Roman monuments. These letterforms have serifs added to the
finish of the main strokes. The variety of stroke width was achieved
by the reed pen held at an angle of approximately 60° off the
perpendicular.
|
| Figure 1.2.1, Reed Pen |
|
| Figure 1.2.2, Square Capitals |
|
| Figure 1.2.3, Rustic Capitals |
Roman Cursive - Written for daily transaction, forms were simplified for speed. We can see here the beginning of what we refer to as lowercase letterforms.
|
| Figure 1.2.4, 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. It would 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.
|
| Figure 1.2.5, Uncials |
Half-uncials - A further formalization of the cursive hand. It
marks the formal beginning of lowercase letterforms, replete with
ascenders and descenders, 2000 years after the origin of the
Phoenician alphabet.
|
| Figure 1.2.6, Half-uncials |
Charlemagne - The first unifier of Europe since the
Romans, issued an edict in 789 to standardize all ecclesiastical
texts. The monks rewrote the texts using both majuscules (uppercase),
miniscule, capitalization and punctuation which set the standard for
calligraphy for a century.
|
| Figure 1.2.7, 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.
|
| Figure 1.3.1, Blackletter (Textura) |
Gutenberg, a German inventor, printer, publisher, and goldsmith who introduced printing to Europe with his mechanical movable-type printing press. His type mold required a different brass matrix, or negative impression, for each letterform.
|
| Figure 1.3.2, 42 line bible, Johann Gutenberg, Mainz |
Summary of the typeform classification at the following (only
covers the main form of text type) :
- Blackletter (1450) - Based upon the hand-copying styles, used for books in northern Europe.
- Oldstyle (1475) - Based upon lowercase forms by Italian humanist scholars for book copying and uppercase forms found in Roman ruins.
- Italics (1500) - Based on contemporary Italian handwriting. Cast to complement roman forms.
- Script (1550) - Based on engraved calligraphy forms. Not suitable in long text. Forms range from formal to casual and contemporary.
- Transitional (1750) - Refinement of oldstyle forms. Thick to thin relationships were exaggerated, brackets were lightened.
- Modern (1775) - Represents a further rationalization of oldstyle. Unbracketed serifs, extreme contrast between thick and thin strokes.
- Square Serif / Slab Serif (1825) - Based on heavily bracketed serif, little variation between thick and thin strokes. No brackets.
- Sans Serifs (1900) - No serifs. Occasionally, strokes were flared to suggest the calligraphic origins of the form (Optima).
- Serif / Sans Serifs (1900) - "Semi-sans or semi-serif". Include both serif and sans serif alphabets (and often stages between the two).
Week 2
Recorded lectures :
Typography - Basic
1. Describing Letterforms
Knowing a letterform’s component parts make it much easier to
identify specific typefaces.
|
|
Figure 2.1.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’.
Stroke : Any line that defines the
basic letterform.
Apex / Vertex : The point created by joining two diagonal
stems.
|
| Figure 2.1.2, Apex/Vertex |
Arm : Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y).
|
| Figure 2.1.3, Arm |
Ascender : The portion of the stem of a lowercase
letterform that projects above the median.
|
| Figure 2.1.4, Ascender |
Barb : The half-serif finish on some curved strokes.
|
|
Figure 2.1.5, Barb |
|
| Figure 2.1.6, Beak |
Bowl : The rounded form that describes a counter. May be either open or closed.
|
|
Figure 2.1.7, Bowl |
|
| Figure 2.1.8, Bracket |
Cross Bar : Horizontal stroke that joins two stems (A,H).
Cross Stroke : Horizontal stroke that intersects two
stems (f,t).
Crotch : The interior space where two strokes
meet.
Descender : The portion of the stem of a lowercase
letterform that projects below the baseline.
|
|
Figure 2.1.9, Descender |
|
|
Figure 2.2.1, Ear |
|
| Figure 2.2.2, Em/en |
Finial : The rounded non-serif terminal to a stroke.
Ligature : The character formed by combination of 2 or
more letterforms.
|
| Figure 2.2.3, Ligature examples |
Link : The stroke that connects the bowl and the loop of a lowercase G.
|
| Figure 2.2.4, Link |
Loop : In some typefaces, the bowl created in the descender of the lowercase G.
|
| Figure 2.2.5, Loop |
Serif : The right-angled foot at the end of
stroke.
Shoulder : The curved stroke that is not part of a
bowl.
Spine : The curved stem of S.
Spur : The extension the articulates the junction of the
curved and rectilinear stroke.
Stem : The significant vertical or oblique stroke.
Stress : The orientation of the letterform,
indicated by the thin stroke in round forms.
Swash : The flourish that extends the stroke of the
letterform.
Tail : The curved diagonal stroke at the finish of
certain letterforms.
Terminal : The self-contained finish of a stroke without
a serif. This is something of a catch-all term. Terminals may be
flat (‘T’ above), flared, acute, (‘t’ above), grave, concave,
convex, or rounded as a ball or a teardrop (see finial).
|
| Figure 2.2.6, Terminal |
2. The font
Type family : A family with different typefaces
(arial,georgia).
Typeface : Individual weight of a certain stroke
(regular,bold,compressed).
The full font of a typeface contains much more than 26 letters,
to numerals, and a few punctuation marks.
Uppercase : Capital letters, including certain accented
vowels, the c cedilla and n tilde, and the a/e and o/e
ligatures.
Lowercase : Include the same characters as uppercase.
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.
Most type software includes a style command that generates a
small cap based on uppercase forms. Do not confuse real
small caps with those artificially generated.
|
| Figure 2.2.7, Small capitals |
Uppercase Numerals : Also called lining figures,
these numerals are the same height as uppercase letters and
are all set to the same kerning width. They are most
successfully used with tabular material or in any situation
that calls for uppercase letters.
Lowercase Numerals : Also known as old style figures
or text figures, these numerals are set to x-height with
ascenders and descenders. They are best used when ever you
would use upper and lowercase letterforms. Lowercase numerals
are far less common in sans serif type-faces than in
serif.
|
| Figure 2.2.8, Uppercase and lowercase numerals |
Italic : Most fonts today are produced with a matching
italic. Small caps, however, are almost always only roman. The
forms in a italic refer back to fifteenth century Italian
cursive handwriting. Oblique are typically based on the roman
form of the typeface.
Punctuation, miscellaneous characters : Although
all fonts contain standard punctuation marks, miscellaneous
characters can change from typeface to typeface. It’s
important to be acquainted with all the characters available
in a typeface before you choose the appropriate type for a
particular job.
Ornaments : Used as flourishes in invitations or
certificates. They usually are provided as a font in a larger
typeface family. Only a few traditional or classical typefaces
contain ornamental fonts as part of the entire typeface family
(Adobe Caslon Pro).
Roman : The letterform is so called because the
uppercase forms are derived from inscriptions of Roman
monuments. A slightly lighter stroke in roman is known as
‘Book’.
Italic : Named for fifteenth century Italian
handwriting on which the forms are based.
Oblique : Conversely are based on roman form of
typeface.
Boldface : Characterized by a 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 : A lighter stroke than the roman form.
Even lighter strokes are called ‘thin’.
Condense : A version of the roman form, and extremely
condense styles are often called ‘compressed’.
Extended : An extended variation of a roman font.
|
| Figure 2.2.9, Different categories within a type family |
3. Comparing typefaces
These 9 typefaces below represent 500 years of type
design.
These typefaces have surpassed the latter goal. They have
remained in use for decades – in some cases, centuries – after
they were first designed, still considered successful
expressions of how we think, how we read and write, and how we
print.
Towards the end of the lecture, we were given an advice : as a
beginning typographer, you should study these ten faces
carefully. For almost any early projects in your design
programme, these are you will need to develop your skills. Once
you understand how to use these faces appropriately and
effectively, you’ll be well prepared to understand and
appreciate other typefaces as you encounter them.
|
| Figure 2.3.1, 9 typefaces to study |
At the end, Mr. Vinod emphasised again the importance of further
reading. Read as many as you can so that you can apply the
knowledge in your design.
Week 3
Recorded lectures :
Typography - Text Part 1
1. Kerning and Letterspacing
Kerning : Refers to the automatic adjustment of
space between letters.
Letterspacing : Means to add space between the
letters. Can be a word, a sentence, a paragraph, or an entire
document The addition and removal of space in a word or sentence
is referred to as ‘tracking’.
|
| Figure 3.1.1, Kerning |
The demonstration of kerning and letterspacing is shown by Mr. Vinod using Adobe InDesign.
Designers always letterspace uppercase letters, but seldom
(not recommended) to letterspace lowercase letters within
text. This is because uppercase letterforms are drawn 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: Each line starts at the same point
but ends wherever the last word on the line ends. Spaces
between words are consistent , can create an even gray
value.
Centered: Imposes symmetry upon the text, assigning
equal value and weight to both ends of any line. It
transforms fields of text into shapes, thereby adding a
pictorial quality to material that is non-pictorial by
nature. Because centered type creates such a strong shape on
the page, its important to amend line breaks so that the
text does not appear too jagged.
Flush right: This format places emphasis on 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.
Achieved by expanding or reducing spaces between words
and, sometimes, between letters. The resulting openness of
lines can occasionally produce ‘rivers’ of white space
running vertically through the text. Careful attention to
line breaks and hyphenation is required to amend this
problem whenever possible.
Note : Type that calls attention to itself before the
reader can get to the actual words is simply interference,
and should be avoided. Quite simply if you see the type
before you see the words, change the type.
3. Texture
Different typefaces suit different messages. A good typographer
has to know which typeface best suits the message at hand.
Consider, too, the different textures of these typefaces.
Some examples were provided to compare their readability in
relation to x-height, ascender height, etc.
|
| Figure 3.1.2, Comparison of Texture |
4. Leading and Line Length
Type size: Text type should be large enough to be read
easily at arms length—imagine yourself holding a book in your
lap.
Leading: Text that is set too tightly encourages
vertical eye movement; a reader can easily loose his or her
place. Type that is set too loosely creates striped patterns
that distract the reader 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.
|
| Figure 3.1.3, Comparison of leading (10/12 is the most suitable in this case) |
5. Type Specimen Book
A type specimen book shows samples of typefaces in various
different sizes. Without printed pages showing samples of
typefaces at different sizes, no one can make a reasonable
choice of type. You only determine choice on screen when its
final version is to read on screen.
A type specimen book (or ebook for screen) is to provide an
accurate reference for type, type size, type leading, type
line length etc.
|
| Figure 3.1.4, Sample type specimen sheet |
Typography - Text Part 2
1. Indicating Paragraphs
There are several options for indicating paragraphs. In the
first example, we see the ‘pilcrow’ (¶), a holdover from
medieval manuscripts seldom use today.
|
| Figure 3.2.1, Use of pilcrow to indicate paragraph space |
The example here displays a ‘line space’ (leading*) between the
paragraphs. Hence if the line space is 12pt, then the paragraph
space is 12pt. This ensures cross-alignment across columns of
text.
|
| Figure 3.2.2, Leading between paragraphs |
|
| Figure 3.2.3, Line spacing v.s. Leading |
The example here displays the standard indentation. Typically here the indent is the same size of the line spacing or the same as the point size of your text.
|
| Figure 3.2.4, Standard Indentation |
The method of extended paragraphs below creates unusually
wide columns of text. Despite these problems, there can be
strong compositional or functional reasons for choosing
it.
|
| Figure 3.2.5, Extended paragraphs |
2. Widow and Orphan
Designers must take great care to avoid the occurrence of
the above mentioned.
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.
|
| Figure 3.2.6, Widow and orphan |
In justified text, both widows and orphans are considered
serious gaffes. Flush right and ragged left text is some
what more forgiving towards widows, but only a bit.
Orphans remain unpardonable.
The only solution to widows is to rebreak your line
endings through out your paragraph so that the last line
of any paragraph is not noticeably short.
Orphans, you might expect, require more care. Careful
typographers make sure that no column of text starts with
the last line of the preceding paragraph.
3. Highlighting Text
Some ways to highlight the texts :
Italic, bold, different typeface, colour, adding background
colour, extending reading axis and quotation marks
Note : Sans serif font need to reduce by 0.5 to match the
x-height of the serif typeface.
|
|
Figure 3.2.7, The x-height of sans serif font is
higher although both have same font size |
Sometimes it is necessary to place certain typographic elements outside the left margin of a colomn of type (extending as opposed to indenting) to maintain a strong reading axis.
4. Headline within Text
A head indicates a clear break between the topics
within a section. In the following examples ‘A’ heads are
set larger than the text, in small caps and in bold. The
fourth example shows an A head ‘extended’ to the left of the
text.
|
| Figure 3.2.8, 'A' head |
The B head here is subordinate to A heads. B heads
indicate a new supporting argument or example for the
topic at hand. As such they should not interrupt the text
as strongly as A heads do. Here the B heads are shown in
small caps, italic, bold serif, and bold san serif.
|
| Figure 3.2.9, 'B' head |
The C head, although not common, highlights specific facets of material within B head text. They not materially interrupt the flow of reading. As with B heads, these C heads are shown in small caps, italics, serif bold and san serif bold. C heads in this configuration are followed by at least an em space for visual separation.
|
| Figure 3.3.1, 'C' head |
5. Cross Alignment
Cross aligning headlines and captions with text type
reinforces the architectural sense of the page—the
structure—while articulating the complimentary vertical
rhythms. In this example, four lines of caption type (leaded
9 pts.) cross-align with three lines of text type (leaded to
13.5pts).
|
| Figure 3.3.2, Cross alignment |
Week 4
Recorded lectures :
Typography - Understanding
1. Understanding Letterforms
Uppercase letterforms below suggest symmetry, but in fact
it is not symmetrical. It is easy to see the two different
stroke weights of the Baskerville stroke form; more
noteworthy is the fact that each bracket connecting the
serif to the stem has a unique arc.
|
| Figure 4.1.1, Uppercase letterforms (Baskerville) |
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. Both Baskerville and Univers demonstrate the
meticulous care a type designer takes to create letterforms that
are both internally harmonious and individually expressive.
|
| Figure 4.1.2, Uppercase letterforms (Univers) |
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.
|
| Figure 4.1.3, lowercase letterforms of Helvetica (left) and Univers (right) |
2. Maintaining x-height
The x-height generally describe the size of the lowercase
letterforms. However, 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.
|
| Figure 4.1.4, Example of maintaining x-height |
3. Counterform
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.
The latter is particularly and important concept when working
with letterforms like lowercase ‘r’ that have no counters per
se. How well you handle the counters when you set type
determines how well words hang together—in other words, how
easily we can read what’s been set.
|
| Figure 4.1.5, Counterforms |
One of the most rewarding way to understand the form and counter
of a letter is to examine them in close detail. The
examinations also provide a good feel for how the balance between
form and counter is achieved and a palpable sense of letterform’s
unique characteristics. It also gives you a glimpse into the
process of letter-making.
Its worth noting here that the sense of the ‘S’ holds at each
stage of enlargement, while the ‘g’ tends to loose its identity,
as individual elements are examined without the context of the
entire letterform.
|
| Figure 4.1.6, The form and counter of letters in detail |
4. Contrast
Simple yet important design principle, the contrast is the most
powerful dynamic in design. It produces numerous variations:
small+organic/large+machined; small+dark/ large light …
|
| Figure 4.1.7, Contrast |
INSTRUCTIONS
TASK 1 / EXERCISE 1 : Type Expression
We were given 7 words to compose and express (Terror, Error, Melt,
Gone, Light, Pour, Shiver). "Terror" is mandatory, and we can choose 3
out of the 6 words. We need to sketch at least 3 sketches to visualise
the meaning of the word. There are 10 typefaces given to work with
this exercise.
I started off with some rough sketches. Then, I narrowed down into 4
chosen words : Terror, Pour, Error and Melt. I had a fun time
sketching with these texts.
|
| Figure 6.1.1, Rough sketches, Week 2 (31/8/2021) |
|
| Figure 6.1.2, Sketches for "terror" and "pour", Week 2 (31/8/2021) |
|
| Figure 6.1.3, Sketches for "error" and "melt", Week 2 (31/8/2021) |
The lecturers gave me a few comments on my sketches (view - feedback
section). Then, we were divided into small groups to get feedback from
our peers and to answer the questions below:
1. Are the explorations sufficient?
2. Does the expression match the meaning of the word?
3. On a scale of 1–5, how strong is the idea?
4. How can the work be improved?
For my sketches, yes, my friends agreed that my explorations are
sufficient. The expression match the meaning of the word, but some of
them are not very strong (e.g. the flat "melt"). On a scale of 1-5, I
got 4 for the idea expression. Among all the texts, my idea of "pour" is
the weakest. I could improve that by adding more texts to show the texts
being poured out from the container.
Before digitising them in Adobe Illustrator, I watched the video
tutorials provided by Mr. Vinod. He demonstrated us how to adjust the
kerning and arrangement of texts, which are very useful for me.
|
| Figure 6.2.1, Demonstration by Mr. Vinod |
This is my first draft of digitising "terror". I was not satisfied with the first outcome, so I did several versions and chose one of the best as my final submission.
|
| Figure 6.2.2, My first draft for "terror", Week 2 (4/9/2021) |
I asked opinion from my friends to decide which "terror" is the best,
and majority said that the first "terror" got that horror and
oppression feel. Therefore, I made a slight amendment on the
background by darkening the corner and feathering the light
edge.
For "pour", I got a new idea, which is to make "P" looks like cup,
and pour out all the texts. I emphasised on a "pour" so that the
viewer can immediately catch the words I was trying to
express.
For "error", I created a glitch effect by adding white lines over the
text. I also purposely misspelled the word by adding an extra "r" to
further highlight the meaning.
For "melt", I used wrap tool to created the dripping effect. I
enjoyed making this effect the most.
|
| Figure 6.2.3, Four digitised Type Expression in jpeg, Week 2 (4/9/2021) |
and these are some tryouts I didn't choose :
|
| Figure 6.2.4, Extra tryouts, Week 2 (4/9/2021) |
The reason I didn't choose the "terror" with black/white background
is because they are lesser creepy/scary atmosphere compared to the
one I chose. Most of my friends also agreed with this decision. The
"error" with a cross do convey the meaning, but it doesn't have that
sound effect when I look at this design. "Error" with exclamation
mark and an extra "r" speaks better than this one. For the "melt", I
think this dripping effect is taken over by the graphic elements
(droplets). The text itself has weaker expression without the
droplets. “Pour" has only 4 letters being poured out from the "U”,
which I believe that it would be much better if more letters are
added in this design, so the liquid pouring effect is more
obvious.
After receiving feedbacks from Mr. Vinod and Dr. Charles, I did
some adjustments and came out with this final outcome :
Final Outcome - Type Expression
|
|
Figure 6.2.5, Final Outcome in jpeg, Week 3 (8/9/2021) |
Final Outcome in PDF, Week 3 (8/9/2021)
Then, we need to choose one type of expression and animate it in Adobe
Illustrator and Photoshop. I was thinking between "melt" and "error". I
decided to animate both before I decide on the best gif animation.
GIF Animation - ERROR
This is the animation I've done in class. It is simple and
straightforward.
|
|
Figure 6.3.1, "Error" Animation, Week 3 (8/9/2021) |
|
| Figure 6.3.2, Frames of animation in Illustrator, Week 3 (8/9/2021) |
GIF Animation - MELT
After class, I worked on another word, "melt". I think this is quite
challenging to create a smooth dripping effect.
|
| Figure 6.4.1, "Melt" Animation, Week 3 (12/9/2021) |
|
| Figure 6.4.2, Frames of animation in Illustrator, Week 3 (8/9/2021) |
Final Outcome - Animated Type Expression
|
| Figure 6.5, Final outcome for animated type expression, Week 4 (15/9/2021) |
TASK 1 / EXERCISE 2 : Text Formatting
We need to design a layout addressing different areas within text
formatting, include type choice, type size, leading, line-length,
paragraph spacing, forced-line-break, alignment, and kerning. We are
required to use Adobe InDesign to complete this exercise.
There are several video tutorials provided. We need to watch all the
videos and follow the tasks demonstrated in the video.
Kerning and Tracking
"Kerning adjusts the space between individual letterforms, while
tracking (letter-spacing) adjusts spacing uniformly over a range of
characters."
I followed the video tutorial and practiced to kern and track my name
using the 10 typefaces. It is fun to see different variations of my
name and I preferred the results of ITC Garamond Std and Janson Text
LT Std.
|
| Figure 7.1.1, Kerning and tracking practice, Week 4 (15/9/2021) |
Text Formatting
The video tutorial then brought us to the main task, text formatting.
The texts and image were provided and we need to adjust its type size,
paragraph spacing, kerning and tracking, leading...as mentioned in the
instruction. I have experimented with a few layouts (refer to Figure
7.1.2).
|
| Figure 7.1.2, Text formatting tryouts, Week 4 (17/9/2021) |
I used 9.5pt point size for the body text, and doubled the point
size for heading. I also make sure that leading value and paragraph
spacing are the same. I did not use justify, but instead, I used
left alignment and did kerning and tracking manually to reduce the
ragging.
|
| Figure 7.1.3, Without kerning&tracking (left) and with kerning&tracking (right), Week 4 (17/9/2021) |
|
| Figure 7.1.4, 57 characters in a line, Week 4 (17/9/2021) |
|
| Figure 7.1.5, Cross alignment, Week 4 (17/9/2021) |
Layout #1
|
| Figure 7.2.1, Layout 1, Week 4 (18/9/2021) |
Layout #2
|
| Figure 7.2.2, Layout 2, Week 4 (18/9/2021) |
Layout #3
|
| Figure 7.2.3, Layout 3, Week 4 (18/9/2021) |
Layout #4
|
| Figure 7.2.4, Layout 4, Week 4 (18/9/2021) |
Final Outcome - Text Formatting
|
| Figure 7.2.5, Final Outcome in JPEG, Week 4 (19/9/2021) |
Final Outcome in PDF, Week 4 (19/9/2021)
FEEDBACK
Week 1 :
General Feedback
Lecturers asked us to set our blog to the default theme, try not to
customise too much. Every section is separated with a horizontal line.
Specific Feedback
No specific feedback were given.
Week 2 :
General Feedback
Lecturers asked us try not to overly distort the fonts, unless
the idea itself is good and slight distortion is acceptable.
Minimise the graphic elements to avoid overpower the text
itself.
For the e-Blog, all images need to be labelled (with date).
Take pictures under natural light to avoid gradient/shadow.
Further reading and reflection need to be updated weekly.
Specific Feedback
- Terror : Both designs at the first column are noted to be
good. The perspective idea has an interesting composition.
Terror with branches is not encouraged, but nice effort to frame
the word in the middle.
- Pour : Need more exploration. Maybe add more texts to
highlight the motion of pouring.
- Error : The "X" idea is good. Error with an extra "r" has the
sound effect. The last idea is a bit ambiguous.
- Melt : Both designs at the first column are noted to be good.
Maybe remove the fluid graphic as the text expression is already
strong.
My e-Blog is noted to be good, with clear label and nice lighting
of pictures. One horizontal line before the lecture section is
missing, which is being fixed immediately. The horizontal line under
the instruction section should be deleted. Other than that all is
well-organised.
Week 3 :
General Feedback
Most of the students have a common mistake, which is the
expression is not dominantly using the provided space. We did not receive much general feedback about e-blog this week. Students are reminded to update e-blog on a weekly basis.
Specific Feedback
- Terror : Successfully created an atmosphere of terror. Font size
in the background can be reduce to 1/10 of the current. The
kerning of the lighter part can be increased so that that area
will automatically look lighter.
- Pour : A good idea to express the meaning. However, the small
texts are suggested to align on a path using a tool in Adobe
Illustrator.
- Error : Glitch effect and spelling error on purpose are being
approved. Good choice of typeface. I was advised to add more lines
to highlight on the glitch effect.
- Melt : Effect is achieved. Enlarge the text to reach the top of
the space given.
There are some minor adjustments need to be fixed, but overall my
designs have achieved the requirements. My e-blog has updated with
my current progress, including the extra tryouts, which is good. I
was suggested to add the reasons why I didn't choose those extra
tryouts I did for Task 1 Type Expression.
Week 4 :
General Feedback
Most of the students are not ready with their e-Blogs. E-blogs
should be updated in weekly basis. We were asked to refer to one
of a senior's e-blog as our reference.
Specific Feedback
My "melt" animation is being approved as the final
submission.
Week 5 :
Specific Feedback
Well done on the documentation and organisation of the eportfolio. Keep it up.
REFLECTION
Experience
I found this module pretty interesting. We got to learn a lot of its history and theories which I never take attention to before. I believe I can see the typography "differently" (in a designer eye) in the future. I also realized that typography plays a vital role in bringing
the text to life.
During the live class, I have gained confidence when I received
positive feedbacks from lecturers and peers. I am happy to
take critiques too so that I can keep
improving.
In these past 4-5 weeks, I have learnt about kerning and text formatting. Mr.
Vinod showed some demonstration using Adobe InDesign. I
think Adobe InDesign might not be as hard as I imagine at
first. Those demonstration really helps me to easily
understand some certain contexts. In live class, it
was quite hectic as we were given 1 hour to produce an
animation. Mine was not fully refine, but I was pretty
happy with my first attempt. For Task 1B, my design was following the normal and safe track. I think I should explore more in the next task. All and all, there were quite a number of tasks and videos need to catch up, but things were still manageable for me.
Observation
I faced some difficulties in designing type
expression at first because I was not sure if my
direction was right. So, I used seniors' blog as
my reference and got inspired by their works at
the same time. In the live class, I was amazed by
the designs from my peers and we were having great
time sharing ideas and providing feedbacks in the
breakout room.
In week 3, I have received a lot of feedback compared to the
previous week. Lecturers' advice is crucial for me
to "visualise" my room of improvement. Slight
adjustments can make huge impact in a design. I
also learnt a lot from my friends, like the word
"terror", everyone has their own interpretation on
the meaning and the results of expression is quite
different. For Task 1B, I also saw some interesting layouts presented by my peers under the FB post. I am able to learn from my peers by analysing and observing each others' work.
Findings
I learnt that we should be more aware about the role
of typography in design. The knowledge we learnt in
this module can be applied at other modules too. It is
not just "texts" and "letters", but many to explore in
the future. A lot of terminologies in describing the
letterforms were introduced, for example, ascender height, cap height,
baseline, etc. I might not memorise all at once, but at
least my lecture notes are ready to serve me anytime
when I need to refer back.
While watching the lecture videos, it was a bit
difficult to digest massive amount of information at a
time, which is why I kept Googling for more in-depth
explanations and jotted down at the section of further
reading. Typography is important to learn as there are always some rules and concepts we need to obey in order to produce an appealing design.
FURTHER READING
A Type Primer by John Kane
|
| Figure 8.1, Cover of "A Type Primer", Week 2 (5/9/2021) |
"Type is a uniquely rich set of marks because it makes language visible.
Working successfully with type is essential for effective graphic design."
This is part of the first paragraph in the introduction and it already
caught my attention.
I have learnt that there is no "right" answer in typography (or
technically in any design). We should ask ourselves, "Does my design work?
Is it useful?" The only way to recognise successful typography is through
informed, direct observation. Of course, everything takes time, trial and
error to lose anxiety over what may or may not seem "right".
I also learnt about the technical terms to describe specific parts of
letterforms. Most of it already covered in the lecture video.
Scanning through a few more pages, I found that this book is full
with illustrations, and the arrangement of texts have enough space
to breathe (it doesn't look like dictionary), which is definitely
friendly towards absolute beginners.
Importance of Kerning and Tracking
|
| Figure 8.2, Cover photo of the article, Week 3 (9/9/2021) |
To understand more about the importance of kerning and
tracking, I came across this article.
Kerning by definition simply means to adjust the spacing between a letter
pairing. Throughout history, characters of the alphabet were never
designed with any type of letter spacing in mind; therefore, some letter
combinations would appear awkward without applying any type of spacing to
them. Designers can choose to apply auto kerning or manual
kerning.
Tracking refers to the overall letter spacing in a selection of
letters. This can be a word, a sentence, a paragraph, or an entire
document. When applying tracking values, the spacing throughout the
text will be equal.
As a rule, designers should adjust the tracking to a body of text before
applying any kerning value. If you kern your text first and then
apply your tracking values, you will negate the kerning values that were
previously applied.
I also play a
game to test
my kerning skills (like Bezier game) and score 84 out of
100.