Typography Task 1 / Exercises
26/09/2023 - 3/11/2023 / Week 1 - Week 6
Lim En Yu / 0354452
Typography / Bachelor of Design (Hons) in Creative Media / Taylor’s University
Task 1: Exercises
TABLE OF CONTENTS
LECTURES
Week 1(a) / Introduction
During my first week of lecture by Mr Vinod, I was introduced to the
concept of Typography. At the beginning of this lecture, Mr Vinod
explained that Typography is actually an act of creating typefaces or
type families. From wikipedia, Typography is the
art and technique of arranging type to make written language
legible, readable, and appealing when
displayed.
Other than that, Typography can be seen anywhere in our daily life and is
applied in animation, application design, website design, signage design,
poster, book and more. Typography has evolved for about 500 years, which is from
calligraphy to lettering and finally evolved to
typography.
After that we have come to the terminological reference between font
and typeface.
Font: A font refers to the individual font or weight within the
typeface.
I.e.: Georgia Regular, Georgia Italic and Georgia Bold.
Typeface: A typeface refers to the entire family of fonts/weights
that share similar characteristics/styles.
I.e.: Georgia, Arial, Times New Roman and Didot.
Fig 1.1.1 Example of Georgia Fonts
Fig 1.1.2 Example of
typefaces
Week 1(b) / Development
1. Early letterform development: Phoenician to Roman
The topic of the second lecture is about the development of
typography over a period of time 500 years. First, we start with the early
letter form development which is Phoenician to Roman. In the
earliest stages, writing meant scratching into wet clay with
sharpened stick or carving into stone with a chisel. The figure on
the left shows the evolution of Phoenician letters has taken place to
Arabic and to Modern Latins forms.
Fig 1.1.3 Phoenicians votive stele Carthage Fig 1.1.4 Evolution from Phoenician letter
Other than that, there is also difference of the
direction of writing between Phoenicians and Greeks.
Phoenicians: Wrote from right to left.
The Greeks: The lines of text read alternately from
right to left and left to right, which is a style of writing
called 'boustrophedon'(how the ox ploughs). The orientation of
the letterforms also changed when the direction of reading has
changed.
The Greeks also did not use letterspace or
punctuations, same as Phoenicians.
Fig 1.1.5 Greeks Writing Style, 'Boustrophedon'
Fig 1.1.6 Greek Fragment, stone engraving (Date unknown)
Etruscan (and the Roman) carvers initially
painted letterforms before engraving them in stone, and this practice
influenced the stroke qualities, resulting in a
change in weight from vertical to horizontal carried over into the
carved letterforms.
Fig 1.1.7 Evolution from Phoenician to Roman
2. Hand script from 3rd – 10th-century C.E.
Fig 1.1.8 4th/5th century: Square capitals
Square capitals can be found in Roman monuments and have
serifs added to the finish of the main strokes. Different stroke
widths were achieved by using a red pen held at an angle of approximately
60° off the perpendicular.
Rustic capitals was a compressed version of
square capitals which allowed for twice as many words on a
sheet of parchment and took lesser time to write. Rustic capitals
were faster and easier to, but they were
slightly harder to read due to their compressed nature. The
pen was held at an angle of approximately 30° off the perpendicular.
Cursive hand which forms were simplified for speed was
written for everyday transcations while both square and rustic
capitals were typically reserved for documents of some intended performance.
The beginning of Roman cursive refer to the
lowercase letterforms.
Uncials incorporated some aspects of the Roman cursive hand,
particularly in the shape of the A, D, E, H, M, U and Q. Uncials are
small letters and the broad forms of uncials are more
readable at small sizes compared to Rustic Capitals.
Half-uncials were a further formalization of the cursive hand
and mark the formal beginning of lowercase letterforms with
the use of ascenders and descenders, 2000 years after the
origin of the Phoenician alphabet.
Charlemagne, who is often seen as the first unifier of Europe
after the Romans, appointed Alcuin of York, who served as the Abbot of St.
Martin of Tours, with the task of standardizing all religious
texts. In this effort, monks rewrote the texts using both
majuscules (uppercase), minuscule, capitalization and punctuation which
set the standard for caligraphy for a century.
3. Blackletter to Gutenberg's type
A condensed strongly vertical letter form now known
as Blackletter or textura gained popularity. In the
South, a rounder more open hand gained popularity called
'rotunda'.
Fig
1.1.15 c. 1445: 42 line bible, Johann Gutenberg, Mainz
Gutenberg marshaled skills like engineering,
metalsmithing and chemistry to build pages that
accurately mimicked the work of the scribe's hand - Blackletter of northern Europe.
3. Text type classification
Week 2 / Text_P1
Tracking: Kerning and Letterspacing
Kerning: Automatic adjustment of space between
letters.
Fig 1.2.1 Kerning
Letterspacing: Add Space between the letters.
Tracking: Addition and removal of space in a word or sentence.
There are three types of tracking which are normal tracking,
tight tracking and loose tracking.
Fig 1.2.2 Tracking
Tight tracking and loose tracking will
reduce the readability and recognizability of the
text as the increase or decrease of counterform of text will
affect the pattern of the words.
Uppercase letters are always being letterspace, while
lowercase letters do not. It is because uppercase letters able to
stand on their own while lowercase letters require the counterform
created between the letters in order to maintain the
readability of text.
Formatting Text
Flush Left: Mirrors the asymmetrical experience of
handwriting. Every line begins at a uniform starting point but ends
wherever the final word on that line ends. The spacing between words remains
consistent throughout the text, allowing the type to create an even
gray value.
Fig 1.2.3 Flush Left
Centered: This format imposes symmetry to the text,
distributing equal value and balance to both ends of each line. It
essentially turns fields of text into visual shapes, imbuing non-pictorial
content with a visual. Since centered text creates a distinct and powerful
shape on the page, it's crucial to adjust line breaks to prevent the text
from appearing uneven or ftoo jagged.
Fig 1.2.4 Centered
Flush Right: This format prioritizes the end of a line rather
than its beginning. It can be useful in scenarios, such as captions, where
establishing a clear alignment to the right is necessary to avoid any
ambiguity in the relationship between the text and image.
Fig 1.2.5 Flush Right
Justified: Similar to centering, this format imposes a
symmetrical structure onto the text. This is accomplished by adjusting the
spaces between words and individual letters. This adjustment in spacing can
lead to lines appearing more open, and occasionally, it may result in
vertical "rivers" of white space running through the text. To address this
issue, it's crucial to pay careful attention to line breaks and hyphenation
whenever possible.
Fig 1.2.6 Justified
Texture
Fig 1.2.7 Anatomy of a Typeface
Different textures of different typefaces are very important as it need to
suit the message at hand. Fonts with a higher x-height or thicker strokes
create a denser appearance on the page compared to fonts with a lower
x-height or thinner strokes. Sensitivity to these differences in colour
is crucial for creating successful layouts.
Fig 1.2.8 Different Typefaces with different gray values
Typeface with middle gray value is the ideal choice which is more legible
and readable.
Leading and Line Length
Text Size: Text should be of a size that allows easy
reading when held at arm's length, as if you were holding a
book in your lap.
Leading: Text that is set too tightly make the reader
easily to lose their place. Conversely, text that is
excessively spaced apart creates distracting striped
patterns that divert the reader's attention from the
content.
Line Length: Appropriate line spacing for text
depends not only on font size and line spacing but also on
the length of the lines. A general guideline is to keep line
lengths within the range of 55-65 characters. Extremely long
or short line lengths can hinder the reading experience.
Fig1.2.9 Tight Leading and Loose Leading
A type specimen book presents examples of typefaces in a range of sizes.
Whether in print or as an ebook for screens, it serves as a reliable guide
for referencing different aspects of typography, such as typefaces, font
sizes, line spacing, and line lengths.
Fig 1.2.10 Sample Type Specimen Sheet
Week 3 / Text_P2
Indicating Paragraphs
Pilcrow (¶): A holdover from medieval manuscripts seldom use
today.
Fig 1.3.1 Pilcrow
Line space (leading*): Space between the paragraphs. If the line
space is 12pt thus the paragraph space will be 12pt.
Standard Indentation: Indent is the same size of the line
spacing or the same as the point size of your text.
Extended Indentation: Creates unusually wide columns of text.
Despite these problems, there can be strong compositional or functional
reasons for choosing it.
Fig 1.3.3 Standard Indentation
Fig 1.3.4 Extended Indentation
Widow:a short line of type left alone at the end of a column of
text.
Orphan: a short line of type left alone at the start of new
column.
In justified text both widows and orphans are considered serious
gaffes. The only way to solve to widows is to rebreak your line
endings through out your paragraph so that the last line of any
paragraph is not noticeably short. Typographers need to ensure
that there are no instances where a column of text begins with the
final line of the previous paragraph to prevent orphans.
Highlighting Text
There are a few ways to highlight within a column of text, such as
italics, bold and colour.
Using a different typeface is also a way to highlight the text. For
example, the sans serif font (Univers) has been reduced by .5 to match the
x-height of the serif typeface. 8 ≠ 7.5
Fig 1.3.9 Sans Serif Font
By placing a field of colour at the back of the text,
maintaining the left reading axis (right example) of the text ensures
readability is at its best is also a way of highlighting text.
Fig 1.3.10 Placing colour at the back of the text
Sometimes it is essential to position specific
typographic elements beyond the left margin of a text column
(extending rather than indenting) to preserve a clear and robust reading
alignment.
Fig 1.3.11 Placing bullets
Quotation marks, such as bullets, have the potential to generate
a noticeable indentation, breaking the left reading alignment. Compare
the quoted text indented at the top with the extended quote at the
bottom.
Fig 1.3.12 Quotation Marks
Headline within text
Various forms of text division exist within chapters. In the
provided visuals, these divisions have been designated with labels
(A, B, and C) corresponding to their respective levels of
significance.
A head signals a clear break between the subjects
covered in that section. In the given instances, 'A' headers are
presented in a larger font size, displayed in small capital letters,
and emphasized with bold styling. The fourth example demonstrates an
'A' header extending to the left of the text.
Fig 1.3.13 A heads
B head here is subordinate to A heads. B heads
indicate a new supporting argument or example for the topic at
hand so they did not strongly interrupt the text as strongly
as A head. Here the B heads are shown in small caps, italic,
bold serif, and bold san serif.
Fig 1.3.14 B heads
The C heads that are not that common, highlights
specific facets of material within B head text and 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.
Fig 1.3.15 C heads
Fig 1.3.16 Hierarchy in a sequence of subheads
Cross Alignment
Fig 1.3.17 Cross Alignment
WEEK 4 / Basic
Describing Letterforms
In this lecture, we are familiarizing ourselves with the
lexicon, which is known as terminologies, in
typography.
Baseline: Imaginary line as the visual base of the
letterforms
Median: Imaginary line of the x-height of
letterforms
X-height: Height of lowercase 'x' in any typeface
Fig 1.4.1 Typography Line Terms
Stroke: Any line that defines the basic
letterform
Apex / Vertex: The point created by joining two
diagonal stems (apex above and vertex below)
Arm: Short strokes off the stem of the letterform,
either horizontal (E, F, L) or 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.
Fig 1.4.2 Ascender Fig 1.4.3 Barb
Beak: The half-serif finish on some horizontal
arms.
Bowl: The rounded form that describes a counter.
The bowl may be either open or closed.
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 stroke extending out from the main
stem or body of the letterform.
Em/en: Originally refering to the width of an
uppercase M, and em is now the distance equal to the
size of the typeface (an em in 48 points, for
example). An en is half the size of an em. Most often
used to describe em/en spaces and em/en dashes.
Finial: The rounded non-serif terminal to a
stroke.
Leg: Short stroke off the stem of the
letterform, either at the bottom of the stroke (L) or
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.
Fig 1.4.6 Ligature
Fig 1.4.7 LInk
Fig 1.4.8 Stem Fig 1.4.9 Stress
Loop: In some typefaces, the bowl created
in the descender of the lowercase G.
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 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.
Fig 1.4.8 Stem Fig 1.4.9 Stress
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).
The Font
A complete typeface comprises far more than just the
26 letters of the alphabet, extending to include
numerals and a selection of punctuation marks. To
effectively handle type, it is essential to ensure
that we are utilizing a comprehensive font, and
equally important, to possess the knowledge of how to
utilize it properly.
Uppercase letters: capital letters, which may
also involve specific accented vowels, the c with a
cedilla, n with a tilde, and the ligatures of a/e, as
well as o/e.
Lowercase letters: include the same characters
as uppercase.
Fig 1.4.10 Uppercase and Lowercase Letters
Small Capitals: Uppercase letterforms draw to
the x-height of the typeface. Most type software
includes a style command that generates a small cap
based on uppercase forms.
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.
Fig 1.4.12 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.
Fig 1.4.13
Italic
Fig 1.4.14 Italic vs
Roman
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).
Fig 1.4.15 Punctuation and Miscellaneous
Characters
Fig 1.4.16 Ornamenrs
Describing Typefaces
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
Fig 1.4.17 Roman, Italic and Oblique
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 the roman form. Even
lighter strokes are called ‘thin’.
Fig 1.4.18 Boldface and Light
Condense: A version of the roman form, and extremely
condense styles are often called ‘compressed’.
Extended: An extended variation of a roman font.
Fig 1.4.19 Condense and Extended
Fig 1.4.20 Typefaces
The ten typefaces highlighted collectively represent half a
millennium of type design. The designers behind these typefaces all
shared two fundamental objectives: easy readability and an appropriate expression of
contemporary esthetics.
Fig 1.4.21 10 typefaces that represent over 500 years of type
design
Fig 1.4.22 Comparing Typefces
INSTRUCTIONS
Fig 2.1 Module Information
Task 1: Exercise 1- Type Expression
RESEARCH
Before I start to do the sketching of type expression, I have found some
inspirations from Pinterest in order to get some ideas that best to express
my and also as references.
Here are some inspiration I have got from pinterest for the word
"shock":
Fig 3.1.1 Reference for the word "shock"
Inspirations of "roar" that are from pinterest:
These are the elements that I refer to while creating type expression for "roar", which are changing the "O" to a big opening mouth, combine "o" and "a" to make it look like eyes and add a mouth underneath.
Inspirations of "illusion" that are from pinterest:
Fig 3.1.3 Reference for the word "illusion"
In order to express the word "illusion, I have refer to the patterns
above which are mostly curvelines. First picture is the word
that is minor distorted, therefore I also apply this element on
my type expression by inverting some of the letters among them.
Other than that, I have also added the curvelines around the word to
emphasis the idea of illusion.
Inspirations of "huge" that are from pinterest:
Fig 3.1.4 Reference for the word "huge"
According to the first picture, I enlarge my "H" which mostly
occupied the whole box and put "uge" inside the H. I have also apply
the 3D effect on a few of type expressions, while for one of the
type expressions I have also combined it with the shadow element
which can expression the idea "huge".
IDEATION
1. Sketches
From the beginning, we were given 8 words after the voting
session to make type expression. The selected words are:
- Chop-chop
- Windy
- Dive
- Stab
- Roar
- Illusion
- Huge
- Shock
Among these words, I have chosen the words Roar, Illusion, Huge and Shock
for the type expression sketches.
Fig 3.2.1 Sketches, Week 2 (3/10/2023)
I sketches those words manually so that it is easier to visualise the idea
that came up to my mind. My personal favourite for each word would be
Shock#4, Roar#4, Illusion#2 and Huge#3. However, after receiving the
feedback from Ms Hsin Yin that we should not use illustration in this task.
Therefore, Ms Hsin Yin suggested me to choose Shock #3, Roar#3, Illusion#1
and Huge#3. However, for Roar I would like to make some changes so that it
emphasise more on my idea and also due to the feedback from Ms Hsin
Yin.
2. Digitisation
As I progress in the digitisation process, I have followed Ms. Hsin Yin's
advice by creating type expression for each word using Adobe Illustrator.
For each type expression, I have made slight modifications to enhance its
quality and carefully selected typefaces that effectively convey the essence
of the word.
.png)
Fig 3.2.2 Digitisation Process, Week 2 (7/10/2023)
1.Shock
.png)
.png)
Fig 3.2.3 Digitisation Process for Shock, Week 2 (7/10/2023)
For "shock", I choose the typeface "Bodoni MT" that is bold because its
exclamation mark suits with the suggestion given by Ms Hsin Yin, which
is a bit drop shape. Furthermore, I enlarge the size of exlamation mark
until the dot of it as big as an equal size with the letters.
2. Roar
.png)
.png)
.png)
.png)
Both of "R" and "oar" typeface are Univers LT Std, but for "R"
is 93 Extra Black Extended while for "oar" is 47 Light Condensed. This
is due to the reason that I want to emphasize on the contrast between
them. Therefore, I have also made changes on the size of the letters.
In order to express the image that "oar" are tiny and weak, I have
adjusted the letters' baseline and rotation of each letter so that
they looked like they are blowing away because the roar of "R". Beside
that, I have enlarger the font size of "R" until 120pt to make it
looked extremely huge when compare with "oar" that font size are 30pt
only.
.png)
.png)
For "illusion", I have selected the typeface Futura Std Heavy for it,
while the question mark is Futura Std Medium. The reason that I choose
this font is because the question mark for this font looks like an
inverted "s", which suits the word "illusion" so much. Other than that,
I have used squeeze effect of warp in effect to slightly curve the text
so that it suits with my sketching at the begining, and also express the
meaning of illusion which is full of curvy lines.
4. Huge
.png)
.png)
.png)
.png)
.png)
Fig 3.2.7 First Attempt of Digitisation, Week 2 (7/10/2023)
Final Type Expression
After feedback from Ms Hsin Yin and Mr Vinod, I have made some minor
changes on the "illusion" type expression, which is eliminate the distort
effect. Here are my final type expressions for each word:
Fig 3.2.8 Final Type Expression - JPEG, Week 4 (17/10/2023)
Fig 3.2.9 Final Type Expression - PDF, Week 4 (17/10/2023)
3. Type Expressions Animation
Fig 3.2.10 First attempt at animating "shock", Week 3( (10/10/2023)
The initial try at animating the word "shock" looks a bit jarring, mainly because it was my first try based on my idea at the start. To create a smoother transition from "o" to an exclamation mark, I started by adding more frames and adjust the word's position. After considering with the problem, I have also try out other ways of animating it. Here are two other gifs that I have created:
Fig 3.2.11 Second animation of "shock", Week 4 (17/10/2023)
Fig 3.2.12 Third Animation of "shock", Week 3 (12/10/2023)
.png)
Fig 3.2.13 Text animation process: 50 frames are made, Week 4
(17/10/2023)
On week 4, I presented all of the animations I created to Ms. Hsin Yin to
facilitate the selection of the most suitable one. After getting
feedback from Ms Hsin Yin, I make some improvement on my first attempt on
animation. Below is my final animated type expression:
Fig 3.2.14 Final Animated Type Expression "shock" - GIF, Week 4
(17/10/2023)
Final Outcome
Fig 3.3.1 Final Type Expression - PDF, Week 4 (17/10/2023)
Fig 3.3.2 Final Animated Type Expression "shock" - GIF, Week 4
(17/10/2023)
Task 1 : Exercise 2 - Text Formatting
For exercise 2, we have to create a final layout that involves various
aspects of text formatting, including kerning, leading, paragraph spacing,
alignment, and more. This exercise is designed to enhance our abilities in
organizing content spatially and establishing clear information hierarchy.
Adobe InDesign will be the tool of choice for this particular
exercise.
Fig 4.1 Text formatting with kerning, Week 4 (20/10/2023)
Fig 4.2 Text formatting without kerning, Week 4 (20/10/2023)
Fig 4.3 Overlayed for better visualisation of kerning, tracking and
leading, Week 4 (20/10/2023)
.png)
Fig 4.4 Before kerning and tracking of Futura Std Light, Week 4
(20/10/2023)
.png)
Fig 4.5 Before kerning and tracking of Univers LIT Std 39 Ultra light
condensed, Week 4 (20/10/2023)
After watching the second text formatting video tutorial, I started to
progress on layout part.
.png)
.png)
.png)
.png)
Fig 4.6 Process, Week 4 (20/102023)
Fig 4.7 Layout Progress, Week 4 (20/10/2023)
Fig 4.8 Before and after adjusting the text based on grid and baseline, Week 4 (20/10/2023)
HEAD
Font/s: ITC Garamond Std Book
Type Size/s: 65pt, 33pt, 12pt
Leading: 26pt
Paragraph spacing: 0
BODY
Font/s: Bembo Std
Type Size/s: 11pt
Leading: 13pt
Paragraph spacing: 13pt
Characters per-line: 61
Alignment: Left Alignment
Margins: 12.7 mm top, 12.7 mm left + 12.7 mm right + 12.7 mm bottom
Columns: 4
Gutter: 5 mm
Final Outcome
Fig 4.10 Final text formatting layout (PDF), Week 4
(20/10/2023)
Fig 4.11 Final text formatting layout with grids (JPEG), Week 4 (20/10/2023)
Fig 4.12 Final text formatting layout with grids (PDF), Week 4
(20/10/2023)
FEEDBACK
Exercise 1: Type Expression
Week 2
General Feedback: For the E-portfolio, Mr Vinod has emphasized on
the format of the blog which include the title, description, labels, lines
and the content. We are required to proceed with the research, feedback,
reflection and further reading part. General feedback about type expression
is that we should not make the word illustrative or include any pictorial
elements. Besides that, we should also create the type expression based on
the 10 typefaces given.
Specific Feedback: I have gotten personal feedback from Ms Hsin Yin
of my type expression task. She suggested me to avoid pictorial element and
use the typefaces provided only. She advised me to search for any typeface
and font provided that suits my type expression the most.
Week 3
General Feedback: For this week, Ms Hsin Yin has once again go
through out E-portfolio documentation process. She has mentioned that the
size of font and the alignment of text should be adjusted nicely and neatly.
On the other hand, she also advised us to take note on the numbering and
date added on caption so that it is more clearly stated and also this can
proved that it is all our work.
Specific Feedback: Overall type expressions are okay, only
"illusion" can be improvised by eliminating the distort effect, only the
question mark will be enough. Other than that, Ms Hsi Yin and Mr Vinod have
also give me suggestions on animinating the type expression. Both of them
suggest me to animate "shock" as it could have the most outstanding
effect.
Week 4
General Feedback: Everyone should upload their documents in JPEG
form only whether it is for progression or other purpose. Only the final
outcome required to be embeded in pdf form.
Specific Feedback: The animation od the word "shock" should be
continue to enlarge so that it has a shock effect. Ms Hsin Yin prefer the
exclamation mark change from small to big but not from big to small. Overall
the e-portfolio documentation process is good.
Week 5
General Feedback: Everyone should complete their e-portfolio with all lectures summaries, final works and work documentation before the deadline.
Specific Feedback: The headline of the exercise 2 text formatting layout should aligned with the body text below, which is flush right.
REFLECTION
Experience
Upon the completion of Exercise 2, I have observed a notable enhancement in my understanding of typography, particularly in mastering the use of Adobe InDesign to finalize my projects. These exercises have equipped me with the knowledge of creating well-organized and visually appealing layouts by fine-tuning elements such as font size, kerning, tracking, alignment, and more.
Experience
At the start of my Typography class, I was completely unfamiliar with the
subject. I had never delved into Typography before, and it left me feeling
a bit lost during those early sessions. In the past, I was simply someone
who looked at text on posters, signs, websites, and other mediums without
really considering the design behind it. However, now I become the
designer who creating the text, so it was fun and interesting for me.
Working with Adobe Illustrator to design text was also a new experience
for me. Initially, I struggled with the software's operations since I had
never used it before. But with practice and persistence, I gradually
became more comfortable and proficient in using it. Overall, the journey
of learning about Typography and design has been quite fascinating and
rewarding for me.
Observations
According to my observations during class, I have learnt a lot from
others' work or even from my own mistakes. By observing others' work on
Facebook or class and refer to the advice given by tutor, I able to know
about others' designs and how they elaborate their idea, not just learn
from my own work. While exploring others' work I might also discover my
mistakes and able to improvise it by learning together.
While going along task 1, I have also observed my changes on
understanding about typography and improvement on creating the type
expression. I getting used to the application of Adobe
Illustrator
during these weeks by familiarizing myself with the tools and
effects.
Upon the completion of Exercise 2, I have observed a notable enhancement in my understanding of typography, particularly in mastering the use of Adobe InDesign to finalize my projects. These exercises have equipped me with the knowledge of creating well-organized and visually appealing layouts by fine-tuning elements such as font size, kerning, tracking, alignment, and more.
Findings
Throughout this journey, I have discovered that my creative thinking skills have significantly progressed, thanks to the advice and guidance provided by Ms. Hsin Yin and Mr. Vinod. I can now envision a wider range of design possibilities and arrange them in a more captivating manner.
After numerous practice sessions, I have become familiar with the majority of the tools in Adobe Illustrator, Adobe Photoshop and Adobe InDesign. This familiarity has significantly streamlined my design process. It is only now that I have come to realize the multitude of methods available to simplify the design process.
Throughout this journey, I have discovered that my creative thinking skills have significantly progressed, thanks to the advice and guidance provided by Ms. Hsin Yin and Mr. Vinod. I can now envision a wider range of design possibilities and arrange them in a more captivating manner.
After numerous practice sessions, I have become familiar with the majority of the tools in Adobe Illustrator, Adobe Photoshop and Adobe InDesign. This familiarity has significantly streamlined my design process. It is only now that I have come to realize the multitude of methods available to simplify the design process.
FURTHER READING
The 10 typefaces on the left represent 500 years of type design.
These typefaces have achieve two goals which are easy readability
and an appropriate expression of contemporary esthetics. Other than
that, typefaces on right are display typefaces that have very
characteristics that make them attractive at large scale. For
example, extreme compression or extension of form, unusually large
or small counterforms, complex details and strong pictorial
references. To emphasize, display typefaces are meant to be 'seen'
more than 'read'.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Multicolumn grids have distinct structural features. These encompass
margins, which establish the limits for typographic elements and
delineate the functional space on the page. There are text columns,
gutters that separate these columns, and flow lines that establish a
prominent axis for aligning elements consistently across various
pages. The baseline grid represents the baseline alignment of the
primary text, running from the upper to the lower margins. These
horizontal divisions in space are valuable for assisting designers
in maintaining text element alignment from one column to
another.
.png)
.png)
When we look at divided space, we can see it as a system based on
proportional connections. Effectively working with a typographic
grid involves recognizing that it operates on the principles of
proportion as well. A grid ratio, essentially a mathematical
relationship between different grid measurements, dictates the
dimensions and positioning of typographic elements.
A Type Primer
by John Kane
Fig 7.1 A Type Primer by Jack Kane Cover, Week 2 (8/10/2023)
This book present the basic principles and applications of typography
which get student to the point where they can understand and
demonstrate basic principles of typography.
Fig 7.2 Basic of Typography, Week 2 (8/10/2023)
As with any craft that has evolved over 500 years, typography
employs a number of technical terms. These mostly describe specific
parts of letterforms. Knowing a letterform's component parts makes
it much easier to identify specific typefaces.
Fig 7.3 Comparing & Display Typefaces, Week 2
(8/10/2023)
Computer Typography Basics
by David Creamer
.png)
Fig 7.4 Computer Typography Basics by David Creamer, Week 3
(15/4/2023)
Through acquiring knowledge about font distinctions, the
functioning of fonts on computer systems, and the utilization of
diverse computer font features, a designer can create a report
that not only conveys valuable content but also ensures
readability and therefore, easy to understand.
.png)
.png)
Fig 7.5 Font Styles and Families, Week 3 (15/10/2023)
Many fonts on computers offer bold and italic variations.
However, it's important to note that not all fonts were originally
created with the intention of being used in bold and italic
styles.
.png)
Fig 7.6 Examples of various weights and styles from the
Helvetica Neue family, Week 3 (15/10/2023)
Typography Design: Form and Communication
by Rob Carter, Ben Day, Philip Meggs, Sandra Maxa, Mark
Sanders
Fig 7.7 Typography Design: Form and Communication, Week 4
(20/10/2023)
This book reflects a perspective on typography that goes beyond
particular technologies or mediums. Understanding the fundamental
principles of typography is crucial for effective communication in
various settings, whether they are static, dynamic, or kinetic. The
initial chapters cover the essentials of form, structure, the language
of type, and its capacity for conveying messages. Later chapters delve
into the intricacies of on-screen and kinetic typography, equipping
designers with a broader understanding of legibility considerations
and facilitating innovative approaches to communication.
.png)
.png)
Fig 7.8 Grids and Spatial Divisions, Week 4
(20/10/2023)
I have learnt grids and spatial divisions to train the eyes for
proportional possibilities. Numerous options are available for
aligning individual text blocks within pages or other spatial
contexts. These choices are frequently influenced by budget
limitations, conventional paper dimensions, and the intended purpose
of typographic content. Some designers continue to find value in
occasionally reconsidering the golden ratio as a design
principle.
.png)
.png)
Fig 7.9 Multicolumn Grids, Week 4 (20/10/2023)
.png)
.png)
Fig 7.10 Structure and Proportion, Week 4 (20/10/2023)
.png)
.jpg)
.png)
Comments
Post a Comment