26th Sep 2023 - 27th Oct 2023 (Week 1-5)
Sin Jun Ming 0364638
Typography / Design in Creative Media / Taylor's University
Task 1 / Exercises
TABLE OF CONTENTS
LECTURES
Week 1: Module Briefing, Introduction to the module and Letterform Development
E-portfolio briefing
In the first lecture class, Mr. Vinod and Ms. Low had guided us to create personal blog as our own e-portfolio through recordings.
Lecture 1: (a) Introduction
From the first lecture class, Mr. Vinod had made the introduction about typography. Therefore, I have learnt about the development of typography. Typography has evolved over 500 years: calligraphy > lettering > Typography. and it is a way to create letters through various kind of fonts to express different meanings according to the letter.
According to Wikipedia, typography is described 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 size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning). The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.” The word typography in English comes from the Greek roots τύπος
In the first lecture class, I also learnt about:
TERMINOLOGY
Typeface - refers to the various families that do not share characteristics, I.e.: Georgia, Arial, Times New Roman, Didot and Futura.
Font - refers to the individual font or weight within a typeface, I.e.: Georgia Regular, Georgia Italic and Georgia Bold or Frutiger Light, Roman, etc.
Fig 1.1.1 Example of Georgia Fonts
Fig 1.1.2 Example of typefaces
Lecture 1: (b) Early Letterform Development - Phoenician
to Roman
Over a period of 500 years, the first development of photography is
the letter form development which is
Phoenician to Roman. Initially, writing was meant to scratch out from wet clay and sharpened stick
through carving into stone with chisel, the uppercase forms were
simple combination of straight lines and circles.
Phoenicians' words are written from left to right. However,
Greeks are written from right to left and left to right
alternately (Boustrophedon). When change the directions of reading it
will also change the orientation of the letterforms.
The Greeks also did not use letter space 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 Roman carvers working in marble painted
letterforms before inscribing them. It was written with a broadening
of the stroke at start and finish.
Figure 1.1.7 Augustan inscription in Rome,Forum at late 1st
Century B.C.E.
Fig 1.1.8 Evolution from Phoenician to Roman
Hand script from 3rd - 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.
Fig 1.1.9 Square Capitals
Rustic capitals - a more compressed version of square capitals which
allowed twice as many words on a sheet of parchment then reduce
writing time.
Fig 1.1.10 Rustic Capitals
Uncials - In Latin, 'Uncia' means twelfth of anything.
Hence, some scholars think that uncials refers to the letters that
are one inch (one twelfth of foot) high which means it was simply
as small letters. Broad forms of uncials are more readable at
small sizes than rustic capitals.
Fig 1.1.11 Uncials
Half-Uncials - a further formalization of the cursive hand,
marks the formal beginning of lowercase letterform.
Fig 1.1.12 Half-Uncials
Charlemagne - first unifier of Europe since the Romans.
The monks rewrote the texts using both majuscules, miniscule,
capitalization and punctuation which set the standard for
calligraphy for a century.
Fig 1.1.13 Charlemagne
Blackletter to Gutenberg's type
With the dissolution of Charlemagne's empire cam regional
variations upon Alcuin's script. In northern Europe, a condense
strongly vertical letterform knows as Blackletter gained
popularity. In southern Europe, rounder more open hand gained
popularity.
Gutenberg's skills included engineering, metalsmithing, and chemistry.
He marshaled them all to build pages that accurately mimicked the work
of the scribe's hand - Blackletter of northern Europe. His type mold
required a different brass matrix, or negative impression.
Text Type Classification
Week 2: Text / Tracking - Kerning and Letterspacing
Kerning - refers to the automatic adjustment of space between letters.
Letterspacing - to add space between the letters.
The addition and removal of space in a word or sentence is referred to as ‘tracking’.
Without kerning
With kerning
Fig 1.2.1 Difference between with and without kerning
Difference between Normal tracking, loose tracking and tight tracking.
.png)
Normal tracking
Loose tracking
Tight tracking
Fig 1.2.2 Difference between Normal tracking, loose tracking and tight
tracking.
Text / Formatting Text
Flush left: This format most closely mirrors the asymmetrical
experience of handwriting. Each line starts at the same point but ends
wherever the last word on the line ends. Spaces between words are
consistent throughout the text, allowing the type to create an even
gray value.
.png)
Fig 1.2.3 Flushed left text
Centered: This format 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.
.png)
Fig 1.2.4 Centered text
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.
.png)
Fig 1.2.5 Flushed right text
Justified: Like centering, this format imposes a
symmetrical shape on the text. It is 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.
.png)
Fig 1.2.6 Justified text
Text / Texture
.png)
Type with a relatively generous x-height or relatively
heavy stroke width produces a darker mass on the page than
type with a relatively smaller x-height or lighter stroke.
Sensitivity to these differences in color is fundamental
for creating successful layouts.
.png)
Text / Leading and Line Length
Type size: Text type should be large enough
to be read easily at arm's length, imagine 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.
.png)
Fig 1.2.9 Difference in LEADING
Text / 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. We 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.
.png)
Fig 1.2.10 Sample Type Specimen
Sheet
Compositional requirement: Text should create a field that can occupy a page or a screen. We need to think of the text as having a middle gray value (on the left, in the next picture), not a series of stripes (as seen of the one on the right).
.png)
Fig 1.2.11 Difference on having a
middle gray value
Week 3: Text / Indicating Paragraphs
Pilcrow (¶) - a holdover from medieval manuscripts seldom use today.
Fig 1.3.1 Example of use of Pilcrow
Line Spacing (leading) - the function of line spacing is
to ensures cross-alignment across columns of text.
Example: If line space is 12pt, then the paragraph space is also
12pt.
Fig 1.3.2 Example of which line space is same as paragraph space
Fig 1.3.3 Line space vs. leading
Standard Indentation - the indent is the same size of the line spacing or the same as the
point size of the text.
Fig 1.3.4 Standard Indentation
Two unpardonable gaffes - Widows & Orphans
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.
Fig 1.3.5 Example of widows and orphan
The only solution to widows is to rebreak the line endings
throughout the paragraph so that the last line of any paragraph is
not noticeably short. On the other hand, we need to make sure
that no column of text starts with the last line of the preceding
paragraph, so that the occurrence of "orphan" can be avoided.
Text / Highlighting Text
Fig 1.3.7 Univers has been reduced by .5 to match the
x-height of the serif typeface
Fig 1.3.8 Numbers are reduced by .5 to ensure the visual
cohesion of text
Fig 1.3.9 Highlighting Text
When highlighting text 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.
Quotation marks and bullets are used to create a clear
indent, breaking the left reading axis to maintain a
strong reading axis.
Fig 1.3.10 Use of quotation marks and bullets in
maintaining strong reading axis
Text / Headline within Text
A head - indicates a clear break between the
topics within a section.
Fig 1.3.11 Examples of A heads
B head - subordinate to A heads.
B heads indicate a new supporting argument or
example for the topic at hand.
Fig 1.3.12 Examples of B heads
C head - although not common, highlights
specific facets of material within B head
text. They not materially interrupt the flow of
reading.
Fig 1.3.13 Examples of C heads
Putting together a sequence of subheads =
hierarchy.
Fig 1.3.14 Combination of A,B
and C heads
Text / Cross Alignment
Cross aligning headlines and captions with
text type reinforces the architectural sense
of the page.
Example - four lines of caption type
(leaded 9 pts.) cross-align with three lines
of text type (leaded to 13.5pts).
Fig 1.3.15 Example of cross alignment
Example - one line of headline type
cross-aligns with two lines of text type,
and (right; bottom left) four lines of
headline type cross-align with five lines of
text type.
Fig 1.3.16 Example of cross
alignment
Week 4: Basic
Basic / Describing letterforms
Technical terms are used to describe letterforms over 500 years, letterform's component parts are learnt to identify specific typefaces easily.
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’.
Fig 1.4.1 X-height
Stroke - Any line that defines the basic letterform
Fig 1.4.2 Stroke
Apex / Vertex - The point created by joining two diagonal stems
(apex above and vertex below)
Fig 1.4.3 Apex / Vertex
Arm - Short strokes off the stem of the letterform,
either horizontal (E, F, L) or inclined upward (K, Y).
Fig 1.4.4 Arm
Ascender - The portion of the stem of a lowercase
letterform that projects above the median.
Fig 1.4.5 Ascender
Barb - The half-serif finish on some curved
stroke.
.png)
Fig 1.4.6 Barb
Beak - The half-serif finish on some
horizontal arms.
.png)
Fig 1.4.7 Beak
Bowl - The rounded form that describes a counter.
The bowl may be either open or closed.
.png)
Fig 1.4.8 Bowl
Bracket - The transition between the serif
and the stem.
.png)
Fig 1.4.9 Bracket
Cross Bar - The horizontal stroke in a
letterform that joins two stems together
.png)
Fig 1.4.10 Cross Bar
Cross Stroke - The horizontal stroke in a
letterform that joins two stems together
.png)
Fig 1.4.11 Cross Stroke
Crotch - The interior space where two
strokes meet.
.png)
Fig 1.4.12 Crotch
Descender - The portion of the stem of a
lowercase letterform that projects below the baseline.
.png)
Fig 1.4.13 Descender
Ear - The stroke extending out from the main
stem or body of the letterform.
.png)
Fig 1.4.14 Ear
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.
.png)
Fig 1.4.15 Em/en
Finial - The rounded non-serif terminal to a
stroke.
.png)
Fig 1.4.16 Finial
Leg - Short stroke off the stem of the
letterform, either at the bottom of the stroke (L) or
inclined downward (K, R).
.png)
Fig 1.4.17 Leg
Ligature - The character formed by the
combination of two or more letterforms.
Fig 1.4.18 Ligature
Link - The stroke that connects the bowl and
the loop of a lowercase G.
.png)
Fig 1.4.19 Link
Loop - In some typefaces, the bowl created
in the descender of the lowercase G.
.png)
Fig 1.4.20 Loop
Serif - The right-angled or oblique foot at
the end of the stroke.
.png)
Fig 1.4.21 Serif
Shoulder - The curved stroke that is not
part of a bowl.
.png)
Fig 1.4.22 Shoulder
Spine - The curved stem of the S.
.png)
Fig 1.4.23 Spine
Spur - The extension the articulates the
junction of the curved and rectilinear stroke.
.png)
Fig 1.4.24 Spur
Stem - The significant vertical or oblique
stroke.
.png)
Fig 1.4.25 Stem
Stress - The orientation of the letterform,
indicated by the thin stroke in round forms.
.png)
Fig 1.4.26 Stress
Swash - The flourish that extends the stroke
of the letterform.
Fig 1.4.27 Swash
Tail - The curved diagonal stroke at the
finish of certain letterforms.
.png)
Fig 1.4.28 Tail
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).
.png)
Fig 1.4.29 Terminal
Basic / The Font
The full font of a typeface contains much more than 26
letters, to numerals, and a few punctuation marks.
To work successfully with type, you should make sure
that you are working with a full font and you should
know how to use it.
Uppercase - Capital letters, including certain
accented vowels, the c cedilla and n tilde, and the a/e
and o/e ligatures.
Fig 1.4.30 Uppercase
Lowercase - Lowercase letters include the same
characters as uppercase.
Fig 1.4.31 Lowercase
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.
Fig 1.4.32 Small Capitals
Fig 1.4.33 Difference between lowercase and
small capital
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.
Fig 1.4.34 Uppercase Numerals
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 whenever you would
use upper and lowercase letterforms.
Lowercase numerals are far less common
in sans serif typefaces than in
serif.
Fig 1.4.35 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.36 Italic
Fig 1.4.37 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.
Fig 1.4.38 Punctuation, miscellaneous
characters
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.39 Ornaments
Basic / 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’.
Fig 1.4.40 Roman
Italic - Named for
fifteenth century Italian
handwriting on which the forms are
based.
Oblique (not based on
handwriting) conversely are based on roman
form of typeface.
Fig 1.4.41 Italic
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’.
Fig 1.4.42 Boldface
Light - A lighter
stroke than the roman form. Even
lighter strokes are called
‘thin’.
Fig 1.4.43 Light
Condense - A version
of the roman form, and extremely
condense styles are often called
‘compressed’.
Fig 1.4.44 Condense
Extended - An
extended variation of a roman
font.
Fig 1.4.45 Extended
Fig 1.4.46 Describing
typefaces
Basic / Comparing
Typefaces
The 9 typefaces mentioned
in the following slide
represent 500 years of
type design.
Easy readability and an
appropriate expression
of contemporary
esthetics are the goals sought by
men and women over the
years.
Fig 1.4.47 Comparing
typefaces
What is worth
noting isn’t the
similarities but
rather the
differences – the
accumulation of
choices that
renders each
unique.
Beyond the gross
differences in
x-height, the forms
display a wealth of
variety, in line
weight, relative
stroke widths and in
feeling. For any
typographer these
feelings connote
specific use and
expression.
The Rs display a range
of attitudes, some
whimsical, some
stately, some
mechanical, others
calligraphic some
harmonious and some
awkward.
Fig 1.4.48 Comparing
typefaces
Week 5 - Letters / Understanding Letterforms
Uppercase letter forms usually seem symmetrical, but it is not always true. From the letterform below, it looks symmetrically, but in fact it is not. It is easy to see the two different stroke weights of the Baskerville stroke form (below), more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.
Fig 1.5.1
Baskerville
uppercase
letterform
The letterform
(Univers) below looks
extremely symmetrical,
but in fact there is a
difference which is
the width of the left
stroke is thinner than
the right
stroke.
Fig 1.5.2 Univers
uppercase
letterform
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 1.5.3 Helvetica
vs. Univers
Fig 1.5.4 Helvetica vs.
Univers
Letters /
Maintaining
x-height
X-height describes
the height of
lowercase
letterforms. Curved
strokes, such as in
‘s’, must rise above
the median (or sink
below the baseline)
in order to appear
to be the same size
as the vertical and
horizontal strokes
they adjoin.
Fig 1.5.5
Curved strokes
rise above the
median &
sink below the
baseline
Fig 1.5.6
Curved strokes
rise above the
median &
sink below the
baseline
Letters /
Form /
Counterform
Counterform (or
counter) is 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.
Fig 1.5.7
Counterform
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.
Fig 1.5.8
Helvetica
Black (left)
vs.
Baskerville
(right)
From the picture
above, it is
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.
Letters /
Contrast
The basic
principles of
Graphic Design
apply directly
to typography.
The following
are some
examples of
contrast—the
most powerful
dynamic in
design—as
applied to type,
based on a
format devised
by Rudi Ruegg.
The simple
contrasts
produce numerous
variations. For
instance,
small+organic/large+machined;
small+dark/
large light and
more.
Fig 1.5.9
Helvetica
Bold (left)
vs.
Baskerville
(right)
Fig 1.5.10
Contrasts
INSTRUCTIONS
Task 1: Exercises 1- Type Expression
Six words that had been selected through voting session: SPRING, BOUNCE,
CHAOS, DIVE, FLOAT, CRUSH.
Four of them are needed to be chosen to create type expression. Hence, the
four words that I have chosen are BOUNCE, DIVE, FLOAT and CHAOS.
1. Research
BOUNCE - I want to create the bouncing motion by using only the letters.
Fig 2.1.1 Idea of creating type expression of "Bounce"
DIVE - Shows diving motion and add some related elements like diving tower and water bubbles.
Fig 2.1.2 Idea of creating type expression of "Dive"
FLOAT - Use balloon as main object and create buoyancy on water surface
to show floating motion.
Fig 2.1.3 Idea of creating type expression of "Float"
CHAOS - Create mess and uncontrolled situation, for this particular
word I didn't find any suitable reference photo, so I create my type
expressions with my own understanding of "CHAOS".
2. Sketches
Figure 2.1.4 Sketch of my Type Expressions (2 Oct 2023 - Week 2)
Sketching ideas
1. I imagine the word as a ball to bounce on the floor.
2. The letters turn from big to small and eventually bounce out.
3. The letter "O" shows the motion of a ball bouncing from left to right.
4. The letters show bouncing movement from back to front.
Figure 2.1.5 Sketch of my Type Expressions (2 Oct 2023 - Week 2)
Sketching ideas
1. Letter "i" acts as a person and "v" acts as a pool to show a person diving
into a pool.
2. The capital letter "I" acts as diving tower and "i" acts as a person, this
idea is kind of same with the last one but there is a diving tower added.
3. Water bubbles coming out from the letter "i".
4. The letters form a person in a diving motion.
Figure 2.1.6 Sketch of my Type Expressions (2 Oct 2023 - Week 2)
Sketching ideas
1. The letters are floating into the sky.
2. The letter "O" acts as a balloon floating into the sky.
3. The letters are floating on the ocean.
4. The letter "F" floats first and then followed by the rest of the letters.
Figure 2.1.7 Sketch of my Type Expressions (2 Oct 2023 - Week 2)
Sketching ideas
1. The letters "C" and "A" are reflected and upside-downed to show
uncontrolled situation with indicates chaos.
2. The letter "C" acts as a big mouth and is about to swallow the other
letters.
3. Each letters possess spikes to show it is a danger situation.
4. The letter "S" acts as a foundation, letter "C" and "H" are about to fall
down. This shows danger situation is coming.
3. Digitisation
Software used: Adobe Illustrator
Float - I use Baskerville Std Italic font for the "S" as string of the
balloon and rest of the letters I use Gill Sans Std Bold font.
Fig 2.1.8 Digitisation of "Float" (6 October 2023 - Week 2)
Bounce - I chose the second option on the word "BOUNCE" from my
sketches of type expressions. I use the font Futura Std Bold for this
word.
Fig 2.1.9 Digitisation of "Bounce" (6 October 2023 - Week 2)
Chaos - I enlarge the letter "C" to make it acts as a huge mouth.
I use the font Gill Sans Std Light Italic because it makes the letters
other than "C" feel so skinny and weak.
Fig 2.1.10 Digitisation of "Chaos" (6 October 2023 - Week 2)
Final Outcome of my Digitised Type Expressions
Fig 2.1.12 JPEG of Digitisation of my Type Expressions (10 Oct 2023 - Week
3)
Fig 2.1.13 PDF of Digitisation of my Type Expressions (10 Oct 2023 - Week
3)
At first, I use Adobe Illustrator to illustrate the moving motion of the water
bubbles.
Fig 2.1.14 Progress of creating animation of "Dive" in Adobe
Illustrator（10 Oct 2023 - Week 3)
Fig 2.1.15 Using Timeline tool to create animation in Adobe
Photoshop（10 Oct 2023 - Week 3)
Animation of my type expression on word "Dive"
Fig 2.1.16 Animation of my type expression "Dive" （10 Oct 2023 - Week
3)
Task 1: Exercise 2- Formatting Text
In Exercise 2, I need to master the techniques of kerning, tracking, text
formatting techniques like flushed left, centered, flushed right and
justified alignment and determine leading, line length, type size and
paragraph spacing, avoid orphans and widows and achieve cross alignment.
At first, I typed my name with the 10 typefaces provided to practice
kerning and tracking.
Software used: Adobe InDesign
Fig 2.2.1 My name without kerning and tracking (17 Oct 2023 - Week
4)
Fig 2.2.2 My name with kerning and tracking (17 Oct 2023 - Week 4)
After that, I start my text formatting task by creating a text layout and
add a suitable picture with caption to it.
Fig 2.2.3 JPEG of my text formatting task - without grids (23 Oct 2023 - Week
5)
Fig 2.2.4 JPEG of my text formatting task - with grids (23 Oct 2023 - Week 5)
Fig 2.2.5 PDF of my text formatting task - without grids (23 Oct 2023 - Week
5)
Fig 2.2.6 PDF of my text formatting task - with grids (23 Oct 2023 - Week 5)
HEAD
Font/s: Bembo Std Bold
Type Size/s: 70pt
Leading: 48pt
Paragraph spacing: -
BODY
Font/s: Adobe Caslon Pro Regular
Type Size/s: 10pt
Leading: 12pt
Paragraph spacing: 12pt
Characters per-line: Average at 40
Alignment: Justified
Margins: 12.7mm top, 12.7mm left + 12.7mm right + 12.7mm bottom
Columns: 3
Gutter: 5mm
FEEDBACK
Week 1
General Feedback:
Create e-portfolio using Blogger and watch lecture video posted by Mr.
Vinod.
Week 2
Specific Feedback:
Picture of my sketches on Type Expressions would be best taken using Cam
Scanner and ensure it is taken in a good lighting condition to enhance
the appearance of the sketches on screen.
General Feedback:
Make sure to avoid too much of illustration on the sketches of type
expressions.
Week 3
Specific Feedback:
For the digitisation of word "FLOAT", the string on the balloon which is
the letter "S" can use gray color to differentiate it with the word
"FLOAT". Besides, for the word "BOUNCE", the letters would be better to
be replaced by lowercases because they are more like a ball and rounder.
General Feedback:
Show progress of the making of type expressions and label them using
Fig... and mark the respecting date to it.
Week 4
Specific Feedback:
The progress of my e-portfolio is on track, so far everything is fine.
General Feedback:
Watch new lecture videos once the animation of type expressions is done,
can move forward to the next task which is text formatting.
Week 5
Specific Feedback:
When using justified alignment for text formatting, we need to avoid
"river" which is the large spacing between words, by doing letter
tracking, it can be avoided.
General Feedback:
We need to make sure the text is on the flow and not to separate them into
two parts that are far from each other. Headline needs to be seen
obviously in the layout.
REFLECTIONS
Experience
In the very first week, I had successfully created my own e-portfolio
through the guidance from Mr. Vinod and Ms. Low. Besides, I got the chance
to sketch the words given by Ms. Low to create type expression. The
sketching process of my own type expressions was fun because of the
brainstorming process for ideas to express certain meanings for certain
words. I have also gained deeper skills in Adobe Photoshop and Adobe
Illustrator by doing the digitisation and animation process. I got to
learn about text layout and text formatting in exercise 2 which I think it
was quite interesting because I can create my own text layout with my own
style and aesthetics.
Observation
From task 1 exercise 1, I observed that research acts an important part in
design, it acts as a foundation for the ideas you want to express to the
audience, without a strong and sound foundation, there will be
misunderstandings to your own designs. The advice from people who are
experienced is also important as we do not want to head to the wrong path
in our own work. Hence, I frequently ask feedback from Mr. Vinod and Ms.
Low to make sure I am on the right path to a good design work. One of the
main elements of a good design is to be understandable by people from
worldwide.
Findings
Typography is an important element in media design as messages are mainly
transferred through words. Besides choosing typeface and font size, there
is so much more things to be considered like text alignment type, leading,
letterspacing etc. to create a good text formatting layout. Same thing
with the type expressions in exercise 1, effort is needed to produce a
good type expression that can express meaning of the word visually.
FURTHER READING
Fig 5.1 THE VIGNELLI CANON by Massimo Vignelli
This book is named "The Vignelli Canon" and is written by Massimo
Vignelli. At first, three aspects were lay out by the writer which he
thought they are very important -
Semantic, Syntactic and Pragmatic.
Semantic - the search of the meaning of whatever we
have to design.
I very agree to this because a good research help us in the design
progress efficaciously.
Syntactic - the discipline that controls the proper use of
grammar in the construction of phrases and the articulation of a
language, Design. For instance, the syntax of design - overall
structure, the grid, the typefaces, the text and headlines, the
illustrations and etc.
Syntax is the elements that are as important in design as grammar in
language.
Pragmatic - the clarity of the design matters, to
be able to be understanded by receiver. It is important the
starting point and all assumptions of any project to fully comprehend
the final result and measure its efficiency.
I agree to that because we all intent to design things that are
understandable by people around the world.
Discipline - a set of self-imposed rules,
parameters within which we operate It is a bag of tools that allows us
to design in a consistent manner from beginning to end. It is also an
attitude that provides us with the capacity of controlling our
creative work so that it has continuity of intent throughout rather
than fragmentation.
"Design without discipline is anarchy, an exercise of
irresponsibility."
Appropriateness - the search for the specific of any given problem. Appropriateness directs us to the right kind of media, materials,
scale. expression, color and texture.
"It is really the white that makes the black sings."
I love this description so much and I strongly agree to that opinion
when the writer mentioned about white space which is very important in
typography.
Comments
Post a Comment