Typography - Task 1
2023.09.26 - 2023.10.24 / Week 1 - Week 5
Velicia Raquel Dewi Setiawan / 0369188 / Bachelor of Design (Honours) in Creative Media
Typography
Task 1: Exercise 1&2
JUMPLINK:
- LECTURE
- INTRUCTIONS
- TYPE EXPRESIONS EXERCISE 1
- TEXT FORMATTING EXERCISE 2
- FEEDBACK
- REFLECTION
- FURTHER READING
1. LECTURE
LECTURE LIST
Lecture 1: Typo_0_Introduction
Lecture 2: Typo_1_Development
Lecture 3: Typo_3_Text_P1
Lecture 4: Typo_4_Text_Part 2
Lecture 5: Typo_2_Basic
Lecture 6: Typo_5_Understanding
Week 1 - F2F Class
We got to meet our lectureres, short introduction and they gave a brief explaination about the module we're going to learn. We prepare the E-portofilio for summery of future lectures and to keep progress of future task. The structure of the portfolio is up to us, but legible. We're also got with our first task to make sketches of Typography expression, picking from the words given.
Week 1 - Lecture 1 (pre-recorded) Introcuction to Typography
What is Typography?
Typography is the act of creating letters, using geometric shapes to form letter shapes.
Typography is also evident in website designs. Wheater in websites or web, typography influences those viewing it, so a good sense of typography to craft websites and app designs is needed to seamlessly communicate their intended message.
|
|
|
While some says there are no fixed rules in typography, understanding these rules is important before breaking them. Typography evolves through trial and error.
|
|
|
During the early days of computer introduction, it was only accessible to poeple with coding backgrounds (not user-friendliness). Steve Jobs changed this by designing the user interface, Inspired from his journey into calligraphy after dropping out of his program. Any profession benefits from understanding typography, as it helps how you express yourself, present information, and communicate effectively.
Font: Individual or weight within a typeface, like Georgia Italic and Georgia Bold.
Typeface: The entire font family with similar characteristics, such as Georgia, Arial, Times New Roman, and Futura.
Week 1 – Lecture 2 (pre-recorded) History and Development
We were advised to conduct additional research on our own. The recorded lecture mentions the Western "bias" in provided information, encouraging us to search deeper and be mindful of potential biases we might encounter.
1. Early letterform development: Phoenician to Roman
Phoenicians: Initially wrote by scratching into wet clay with a sharpened stick or carving into stone with a chisel, reading from right to left.
| Fig 1.1 4th Century B.C.E, Week 1(September 26 2023). |
The Greeks: Similar to the Phoenicians, did not use letterspace punctuations. Boustrophedon (meaning "how the ox ploughs") reading alternately from right to left and left to right.
|
| Fig 1.2 'boustrophedon' writing style of Greeks, Week 1(September 26, 2023). |
Early Letterform Development:
|
|
Fig 1.3 Evolution from Phoenician to Roman, Week 1(September 26
2023). |
2. Hand script from 3rd – 10th-century C.E.
Square capitals: found in Roman monuments, they have serifs added to the end of the main strokes.
|
| Fig 2.1 4th or 5th century Square Capitals, Week 1(September 26, 2023). |
Rustic capitals: A condensed version of square capitals, allowing for twice as many words on a parchment sheet and a quicker writing process. Although faster and easier they are slightly harder to read due to their compressed nature.
|
| Fig 2.2 Late 3rd - mid 4th century Rustic Capitals, Week 1(26 September 2023). |
Roman cursive: Made for documents intended for everyday transactions, simplifying forms for speed and is the beginnning of lowercase letterforms.
|
| Fig 2.3 4th century Roman Cursive, Week 1(September 26 2023). |
Uncials: Incorporating aspects of the Roman cursive hand, uncial means small letters. The broad forms of uncials are more legible at small sizes compared to rustic capitals.
|
| Fig 2.4 4th-5th century Uncials, Week 1(September 26 2023). |
Half-uncials: Mark the formal introduction of lowercase letterforms, complete with ascenders and descenders, emerging 2000 years after the origin of the Phoenician alphabet.
|
|
Fig 2.5 C.500 Half-uncials, Week 1(September 26, 2023). |
Charlemagne: the initial unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. He assigned this responsibility to Alcuin of York, the Abbot of St Martin of Tours. The monks then transcribed the texts utilizing both majuscules (uppercase), minuscule, capitalization, and punctuation, establishing the calligraphic standard for a century.
|
|
Fig 2.6 C. 925 Caloline Miniscule , Week 1 (September 26
2023). |
Following the dissolution of Charlemagne's empire, regional variations of Alcuin's script emerged.
Textura/blackletter is a condensed and vertically strong letterform, popular in northern Europe. Rotunda, on the other hand, is a rounder and more open-handed letterform, gaining popularity in southern Europe.
|
| Fig 3.1 Blackletter, Week 1(26 September 2023). |
4. Text type classification
Serif/Sans Serif (1990) —Threads boundaries of Serif and Sans Serif types
Blackletter (1450) — The earliest printing type, its forms were derived from the hand-copying style that was used in books from northern Europe during that time.
Oldstyle (1475) — based after lowercase forms used by Italian humanist scholars for book copying, with uppercase forms resembling those found in scribes and Roman ruins.
Italic (1500) — The first italics were condensed and closely set, enabling more words per page.
Script (1550) — While not entirely suitable for lengthy texts, it was more accepted in shorter applications, with forms ranging from formal and traditional to casual and contemporary.
Transitional (1750) — An improvement upon old style, this style was achieved due to advancements in casting and printing, resulting in amplified thickness/thinness.
Modern (1775) — A further rationalization of old style letter forms, attempted to standardize and minimize variations, especially in the contrast between thick and thin strokes.
Square Serif/Slab Serif (1825) — Initially heavily bracketed with minimal variation between thick and thin strokes, developed due the needs for heavy type in commercial printing.
Sans Serif (1900) — Lacking serifs, with variation leaning towards either humanist forms or rigidly geometric shapes.
Serif/Sans Serif (1990) — Threads the boundaries between Serif and Sans Serif types.
Week 2 - Lecture 3 (pre-recorded) Text / Tracking
1. Kerning and Letterspacing
Kerning: Automatic adjustment of space between
letters.
|
|
Fig 1.1 Without kerning and with
kerning, Week 2(3 October
2023). |
Tracking: The addition and removal of space in a word
or sentence. There are normal tracking, tight tracking and
loose tracking.
Normal tracking is easy to read and suitable for a wide range of texts. On the other hand, both loose tracking and tight tracking reduce readability, making it hard to decipher the word patterns.
|
| Fig 1.1 Many types of Tracking, Week 2(3 October 2023). |
While it's generally acceptable to do tracking of uppercase letters, the same doesn't apply to lowercase letters. This distinction arises from the fact that "uppercase letterforms are designed to stand independently, whereas lowercase letterforms require the counterform created between letters to maintain the line of reading."
Gray Value: The perceived brightness of a body text, influenced by the spacing and contrast between the letterform and the background.
2. Text Formatting
Flush left: Resembles the asymmetrical nature of handwriting. Each line starts at the same point but ends on wherever the last word is. Consistent spaces between words allowys an even gray value.
Centered: Imposes symmetry, offering equal value and weight to both ends of any line. However, centered type creates a strong shape on the page, needing attention of line breaks to prevent excessive jaggedness in the text.
Flush right: Ends each line at the same point as opposed to its start. Useful in contexts like captions where a strong orientation to the right is needed to avoid ambiguity in the relationship of text and image.
Justified: Achieved by adjusting spaces between words and, sometimes, between letters. Resulting in the occasional white space 'rivers' through the text. Pay attention to line breaks and hyphenation.
3. Texture
Any good typographer must know the most fitting typeface for the intended message. Typefaces with a generous x-height or heavier stroke widths appear darker on a page. Various typefaces have a distinct gray values, ranging from lighter to darker. Optimal choice would be a typeface with a middle gray value.
|
|
Fig 3.1 Anatomy of a typeface, Week
2(3 October 2023). |
How to read: Point size 10, leading 13.5. A difference of
3.5
4. Formatting
Type size: Text should be large for easy reading at arm's length.
Leading: Too tight set of a text encourages vertical eye movement, leading to disorientation. On the other side, overly loose text make for a distracting striped patterns.
|
| Fig 4.1 Tight leading and loose leading, Week 2(3 October 2023). |
Line Length: Shorter lines need less leading, while longer lines require more. Maintain line length within the range of 55-65 characters, extreme long or short line can impair readability.
5. Type Specimen Book
A type specimen book showcases typefaces in various sizes, giving an accurate reference for type, size, leading, line length, and more.
|
|
Fig 5.1 Sample type specimen sheet,
Week 2(3 October 2023). |
Week 3 – Lecture 4 (pre-recorded) Text/Tracking
1. Indicating Paragraphs
There are several options for indicating paragraphs:
The 'pilcrow' (¶)
A holdover from medieval manuscripts rarely used today. It
is one of the hidden characters or blue indicators that
helps in formatting large amounts of text.
|
|
Fig 1.1 Example of pilcrow in text, Week 3(10 October 2023). |
Line space (leading*)
Leading is the space between two sentences. If the line space is 12pt, then
The paragraph space is 12pt. This guarantee cross-alignment across columns of text.
|
|
Fig 1.2 Clarification of Line
Leading, Week 3(10 October 2023). |
Indentation
Standard indentation is the indentation of the first
line in a paragraph, the ident is the same size of
the line spacing or the same as the point size of
the text. (Must use justified).
|
|
Fig 1.3 standard Indentation,
Week 3(10 October 2023). |
|
|
Fig 1.4 Extended
Indentation, Week 3(10 October 2023) |
2. Widows and Orphans (DO NOT LET THIS
HAPPEN)
A Widow is a short line of type left alone at the end of a text . This can be prevented by forcing a line break or adjusting the tracking of the line before.
An Orphan is a short line of type left alone at the start of a new column. It can be avoided by adjusting the length of the column.
|
|
Fig 2.1 Example of Widow
and Orphan, Week 3(10 October 2023). |
3. Highlighting Text
Examples of highlighting text:
Use the same typeface but different
fonts (Italic, Bold)
or colour
|
| Fig 3.1 Highlighting text in Fonts and Colors, Week 3(10 October 2023). |
Use bold sans serif
Sans-serif fonts are typically slightly larger than other serif fonts at the same point size. In this instance, the sans-serif font (Univers) has been reduced by 0.5 pt to match the x-height of the serif typeface.
|
| Fig 3.2 Difference of size in Sans Serif and other Serif fonts, Week 3(10 October 2023). |
Place a Field of Colour
Highlighting specific information: On the left, there is an indentation where the reading axis is the same, keeping the gray box within the reading axis. On the right, the reading axis has been broken because there's no indentation.
|
| Fig 3.3 Usage example of Field of Color, Week 3(10 October 2023). |
Place Typographic Elements (such
as bullet points)
Sometimes it is necessary to place certain
typographic elements outside reading axis of the text, extending as opposed to indenting to
maintain a strong reading axis so reading
Axis.
|
|
|
Sometimes when you're doing a headline you
don't want the quotation to be indented or
rather in line with the reading axis rather
you want the quotation outside the reading
Axis. However there are:
circumstances where the extending the
quotation or the special character outside
The reading axis may be necessary.
Use Quotation Marks
Note that prime is not a quote. The prime is
an abbreviation for inches and feet.
|
|
|
4. Headline within Text
There are many kinds of subdivisions
within the text of a chapter. The
following visuals have been labelled (A, B
and C) according to the level of
importance.
A head indicates a clear break between
the topics within a section. Examples:
|
| Fig 4.1 The many example of Headline A, Week 3(10 October 2023). |
B heads are subordinate to A heads, they
indicate a new supporting argument or
example for the topic at hand. B heads
are not using a paragraph space, but a false line break which means leading space, Examples:
|
| Fig 4.2 The many example of Headline B, Week 3(10 October 2023). |
C head highlights specific of
material within B head text. They do not interrupt the flow of reading
as As and B heads. These C heads are:
shown in small caps italic, serifs bolds
and san serifs bolds, and are followed
by at least an space for which for
visual separation. Examples:
 | |
|
5. Cross Alignment
Cross-align is done to maintain the structure of the page thus it is easy to read. Cross-align is done by
doubling the leading space of the text type
to be used as the leading of the headline
type.
|
| Fig 5.1 Example of Cross Alignment, Week 3(10 October 2023). |
Week 4 – Lecture 5 (pre-recorded)
Basic
1. Describing letterforms
Lexicon is just another word for
terminologies.
Baseline: the imaginary line at the 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.1 Letterforms Anatomy, Week 4(17 October 2023). |
Notice that the capital letters are smaller
than the ascender ascending strokes of a
lowercase letter that has a stem stroke that
reaches towards the ascender, this is
because capital letters are generally wider
and have more surface area on the top
whereas ascending letters with a single
stroke centers has a lesser real estate
right touching the top section so to give
the impression that it is of equal height
the ascending stroke tends to be slightly
above the capital letter this is what we
call an optical adjustment.
Stroke: any line that defines the basic
letterform
Apex / Vertex: the point created by joining
two diagonal stems
Arm: short strokes off the stem of the
letterform (E, F, L, K, Y)
Ascender: the portion of the stem of a
lowercase letterform that projects above the
median
Barb: the half-serif finish on some curved
stroke
Beak: the half-serif finish on the same
horizontal arms
Bowl: the rounded form that describes a
counter
Bracket: the transition between the serif
and the stem
Cross Bar: the horizontal stroke in a
letterform that joins two stems together
Cross Stroke: the horizontal stroke in a
letterform that joins two stems together
Crotch: the interior space where two strokes
meet
Descender: the portion of the stem of a
lowercase letterform that projects below the
baseline
Ear: the store extending out from the main
stem or body of the letterform
Em/en: originally referring to the width of
an uppercase M, and em is now the distance
equal to the size of the typeface; an en is
half the size of an em
Finial: the rounded non-serif terminal to a
stroke
Leg: short stroke off the stem of the
letterform (L, K, R)
Ligature: the character formed by the
combination of two or more letterforms
|
|
Fig 1.2 Ligature, Week 4(17
October 2023). |
Link: the stroke that connects the bowl and
the loop of a lowercase G
Loop: the bowl created in the descender of
the lowercase G (in some typefaces)
Serif: the right-angled or oblique foot at
the end of the stroke
Shoulder: the curved stroke that is not part
of a bowl
Spine: the curved stem of the S
Spur: the extension that articulated the
junction of the curved and rectilinear
stroke
Stem: the significant vertical or oblique
stroke
Stress: the orientation of the letterform,
indicated by the thin stroke in round forms
Swash: the flourish that extends the stroke
of the letterform. You should never use
swashes in capital letters together, big
no-no (unpardonable)
Tail: the curved diagonal stroke at the
finish of certain letterforms
Terminal: the self-contained finish of a
store without a serif, it may be flat,
flared, acute, grave, concave, convex or
rounded as a ball or a teardrop (see
finial).
|
|
Fig 1.3 Describing
Letterforms, Week 4(17 October
2023). |
2. The Font
As a typographer, especially when designing a book, you need have a type
family that has many different typefaces so
that you have options of different
weights. If you are teaching or designing complicate, that is very hard because of different sets of
information, so if you have if a family that only has two faces you're
digging yourself a grave. So it's always
good to select a type family that has a good
range of typefaces.
Uppercase and Lowercase
Small Capitals: uppercase letterforms
drawn to the x-height of the typeface. (dont
force the command on a software)
|
|
Fig 2.1 Small capitals (top),
Week 4(17 October 2023). |
Uppercase Numerals / lining figures:
share the same height as uppercase letters and are evenly spaced, suitable for tabular content or situations requiring uppercase letters.
Lowercase Numerals / old style
figures or text figures: set to x-height with ascenders and descenders, usen when in need of upper and lowercase letterforms. Historically, when using uppercase numerals, like the year 1986, it can disrupt visuals. So instead, we opt for lowercase numerals.
|
|
Fig 2.2 Uppercase Numerals and
Lowercase Numerals, Week 4(17
October 2023). |
InDesign and Illustration: Go to type, go to
glyphs(character map) in the character map
you scroll down you'll probably see the
lowercase numeral.
Italic: This font refers way back to fifteenth
century with Italian cursive handwriting. But small capital are usually in Roman style.
Punctuation, miscellaneous characters: Can change from typeface to typeface. It is
important to know all the characters
available in a typeface before choosing it
for a certain job.
Ornaments: used as flourishes in
invitations and certificates. Only a few
have these (Adobe Caslon Pro).
|
|
Fig 2.2 Punctuation,
iscellaneous characters and
Ornaments, Week 4(17 October
2023). |
3. Describing typefaces
Roman: The uppercase form that is
derived from inscriptions of Roman
monuments. A lighter stroke in roman is
'Book'
Italic: based on the fifteenth
century Italian handwriting.
'Oblique'
are based on a roman form of a typeface.
Boldface: thicker stroke than a roman
form (Semibold, Medium, Black, Extra Bold,
Poster(Bodoni)).
Light: lighter stroke than the roman
form. 'thin' are even lighter
strokes.
Condense: a condensed version of the
roman form. 'Compressed' are an
extremely condense styles.
Extended: extended variation of a
roman form
|
|
Fig 3.1 Describing typefaces,
Week 4(17 October 2023). |
Well designed typeface doesn't have very
strong character, in fact all
well-designed typefaces are somewhat
ambiguous, they can fit into any different
type of situation. The type is that you design has subtle
characteristics you could probably use it
for many different purposes like which is
which lengthens it's survival over periods
of time.
4. Comparing typefaces
|
| Fig 4.1 10 typefaces, Week 4(17 October 2023). |
These 10 typefaces represent 500 years of
type design. Each typeface gives different
feelings. Every message that you convey as a
designer, you have to choose an appropriate
type family that respects that message. You
don't want the typeface to jump out and
attract all the attention. You want the
typeface you to present the message.
The message should be first, typeface
later, a good typeface presents the
message of the writer.
Many people who work seriously with type
employ a limited palette or typefaces some
in fact go through the entire careers using
one or three or five.
"You can't be a good typography if you
aren't a good reader." - Stephen Cole
Week 5 – Lecture 6 (pre-recorded)
Understanding
1. Understanding letterforms
The uppercase letterforms below suggest
symmetry, but in fact, it is not
symmetrical.
|
|
Fig 1.1 left: Baskerville 'A';
right: Univers 'A', Week 5(24 October 2023). |
Baskerville form: Two
different stroke weights on the A
Univers stroke form: after a closer look the
width of the left side is thinner than the
right side. The reason is unclear but Mr
Vinod believes that there are solid optical
reason at play. (reducing a certain stem in
one stroke from the other allows for a sense
of delicateness or end dynamics as opposed
to a rigid structure.
The designer has taken meticulous care to
create letterform that are internally
harmonious and individually expressive.
The complexity of each individual letterform
is demonstrated by the lowercase 'a' of the 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 reveal the palpable
difference in character between the two.
|
|
Fig 1.2 left: Helvetica 'a'; right:
Univers 'a', Week 5(24 October
2023). |
2. Maintaining x-height
X-height generally indicates the size of lowercase letterforms. Curved strokes, as seen in 'r and a', need to ascend above the median (or descend below the baseline) to appear equal in size.
|
|
Fig 2.1 Lowercase maintaining X-Height,
Week 5(24 October 2023). |
3. Form and Counterform (Counter)
The space, defined by the strokes of the form. When letters join to form words, the counterform encompasses the spaces between them. Counterform is as important as letterforms in ensuring readability.
|
|
Fig 3.1 Form and Counterform, Week
5(24 October 2023). |
Examining the counterform of letters in detail allows us to understand how to balance them, often achieved by enlarging them. This provides us with a look into letter-making process.
|
|
|
4. Contrast (most powerful dynamic in
design)
The Graphic Design principle of Contrast is also used in typography. Contrasts gives numerous
variations: small + organic / large +
machines; small + dark / large + light.
|
|
|
2. INTRUCTIONS
Task 1
Exercise 1 - Exercises Type Expression
Express the meaning of four(4) of these words Spring, Chaos,
Crying, Bounce, Pain, Kick, Dive, Crush, Spike, Slide, Float. Base
your idea-sketches (of the letterforms) around the "10 Fonts"
provided to you. Do not distort the letterforms. That said, some
minor exceptions can be considered, if approved. The best ideas
have simple but memorable solutions.
- Export your final JPEG artwork by following these steps in Illustrator: File > Export > Export As > Format: select JPEG > tick: Use Artboards > Range: Select Artboard Number > Export > Colour Model: Grayscale > Resolution 300ppi > Ok
- GIF format (Tutorial given size is 200 x 200 mm)
Note: when exporting your artworks to Photoshop:
a. ensure they are: grayscale and at
72ppi (not 300ppi)
b. ensure that your Gif does not exceed
1024px (width and height). You can also use 800px.
c. ensure your Gif has a white
background
d. Duplicate artboard = Shift+O (to select an artboard, or u can
just click the artboard) > Alt+Drag
Exercise 2 - Text Formatting
- Kerning & tracking: Use your name to practice kerning and tracking. You're free to use different fonts, casings and font weights, using all 10 typefaces provided.
- Main exercises "I am Helvetica" --- 4 final product 2 in PDF & 2 in JPG (One layout in A4 size) each one with the baseline and without baseline.
Marking Criteria
Each expression has been explored with a great variety of
ideas.
- All the expressions are perfectly matched in meaning.
- The typographic solutions are extremely well-composed and balanced.
- The expression is excellently crafted (technical), memorable and engaging.
- The textual information is extremely well formatted (font size, line length, leading, alignment, cross alignment, reading rhythm, information hierarchy, sans widows and orphans).
Timeframe
Week 1 – Week 5 (Deadline on Week 6)
<iframe src="https://drive.google.com/file/d/1FvRxzHbG_SFVdCUZsy2mbbXXyngA6O00/preview" width="640" height="480" allow="autoplay"></iframe>
3. TYPE EXPRESIONS EXERCISE 1
3.1 Research
BOUNCE
|
|
Fig 3.1.1 Frames of Animation of Bouncing Ball, Week
1(26 September 2023). |
|
| Fig 3.1.2 Unique Use of image and posisition of letters, Week 1(26 September 2023). |
|
|
Fig 3.1.3 Motion Frames of Bouncing Ball, Week 1(26
September 2023). |
FLOAT
|
|
Fig 3.1.4 Imitation of Floating House from
Movie UP, Week 1(26 September 2023). |
|
|
Fig 3.1.5 Imaginary of Flying Person, Week 1(26
September 2023). |
DIVE
|
|
Fig 3.1.6 Photo of a Person Diving, Week 1(26 September
2023). |
|
|
Fig 3.1.7 Motion of a Person Diving, Week 1(26
September 2023). |
CHAOS
|
|
Fig 3.1.8 Typography that Resemble Chaos #1, Week 1(26
September 2023). |
|
| Fig 3.1.9 Typography that Resemble Chaos #2, Week 1(26 September 2023). |
|
|
Fig 3.1.9 Typography that Resemble Chaos #3,
Week 1(26 September, 2023). |
3.2 Sketches
BOUNCE
|
| Fig 3.2.1 The First Sketches of Bounce, Week 1(26 September, 2023). |
The lecturer said that the letters going in motion on the top middle is good but suggest to try it with just the letter e.
CHAOS
|
|
Fig 3.2.2 The First Sketches of Chaos,
Week 1(26 September, 2023). |
For Chaos, both of the top sketch is good, they maintain legibility compared to the other two, but was told to be carefull with the digitazation as it can destroy the legibility of it.
DIVE
|
|
Fig 3.2.3 The First Sketches of Dive,
Week 1(26 September, 2023). |
For Dive, the play of colors on the top right is unique, but was also told to be careful with the digitazation of it. As it could make or break it.
FLOAT
|
|
Fig 3.2.4 The First Sketches of Float,
Week 1(26 September, 2023). |
The top right
is approved with O is literally going up, also was told to be carefull with the
digization of it.
3.3 Digitazation
BOUNCE
|
| Fig 3.3.1 The First Digiazation of Bounce, Week 2(3 October, 2023). |
For Bounce, the middle frame is approved, even though the design is similar to Float.
DIVE
|
|
Fig 3.3.2 The First Digiazation of Dive,
Week 2(3 October,
2023). |
For Dive, On the bottom left frame, I was told to look for connection between the dot on the i an the period at the end of the word. Has not been approved.
|
FLOAT 
|
|
Fig 3.3.3 The First Digiazation of
Float, Week 2(3 October, 2023). |
For Float top middle is approved, it's very straightfoward and literal to the word Float. (Literally, the O is floating). However, the "motion/shadow" following it, is too "noisy". I was suggested to reduce the opacity a bit.
|
CHAOS 
|
|
Fig 3.3.4 The First Digiazation of
Chaos, Week 2(3 October, 2023). |
Chaos at bottom left is the one that's approved rather than the bottom
middle because it is more legible.
3.4 Final Digitazation
|
| Fig 3.4.1 Final Digiazation jpeg, Week 2(3 October, 2023). |
| Fig 3.4.2 Final Digiazation PDF, Week 2(3 October, 2023). |
3.5 Animation
First attempt, going with the Bounce font, trying out for a simple
animation of the O going through a Bounce motion similar to
fig 3.1.1
.
|
|
Fig 3.5.1 The First Animation Of
Bounce, Week 3(10 October 2023). |
|
| Fig 3.5.2 The Revised Animation Of Bounce, Week 3(10 October 2023). |
3.6 Final Animation
|
|
|
Fig 3.6.1 Final Animation Of
Bounce, Week 4(17 October 2023). |
4. TEXT FORMATTING EXERCISE 2
4.1 Exercise
We are given a task making a layout of text formatting, working with typefaces, type size, leading, line length, etc. But before that, we have to learn about kerning and tracking. I watched the videos thet we're given on it and this is the documentation of it.
 |
| Fig 4.1.1 Text Formatting Exercise without Kerning and Tracking, Week 4(17 October 2023) |
 |
| Fig 4.1.2 Text Formatting Exercise with Kerning and Tracking, Week 4(17 October 2023). |
|
| Fig 4.1.3 Text Formatting Layout Exercixe, Week 4(17 October 2023). |
|
| Fig 4.1.4 Text Formatting Layout Exercixe, Week 4(17 October 2023). |
|
| Fig 4.1.5 Text Formatting Layout Exercixe, Week 4(17 October 2023). |
For the source of inspiration, I choose Pinterest as I'm already familiar
with it. After some research on Pinterest. This is some of them that I
thought looked good.
|
| Fig 4.2.1 Research on Text Formatting Layout, Week 4(17 October 2023). |
|
|
Fig 4.2.2 Research on Text Formatting Layout, Week 4(17 October
2023). |
|
| Fig 4.2.3 Research on Text Formatting Layout, Week 4(17 October 2023). |
From the research, I made 6 sketches In Indesign.
The one that got approved is the second design, as it straightfoward,
simple, and easy to read. Theres a few adjustment for the body of text
in the middle, giving it an align center and bold font adjustment to
give it more weight than the rest of the body text. Also all of the
Sketches body text floats above the baseline (has been fixed).
4.3 Final Sketch
Fig 4.3.1 Final Sketch Text Formatting Layout - PDF, Week
5(24 October 2023).
4.4 Final Design
HEAD
Font/s: ITC New Baskerville Std Roman and Bold (Headline), ITC New
Baskerville Std Italic (Byline)
Type Size/s: 70 pt (headline), 20 pt (byline)
Leading: 48 pt (headline), 24 pt (byline)
Paragraph spacing:-
BODY
Font/s: Univers LT Std 55 Roman and 65 Bold (body text)
Type Size/s: 9 pt (body text)
Leading: 12 pt (body text)
Paragraph spacing: 4 mm
Characters per-line: 56 characters
Alignment: Center Aligned and Justify with last line aligned left
Margins: 12.7 mm top, 12.7 mm left + 12.7 mm right + 12.7 mm bottom
Columns: 2
Gutter: 5 mm
Fig 4.4.1 Final Text Formatting Layout (without grids)-
PDF, Week 5(24 October 2023).
|
| Fig 4.4.1 Final Text Formatting Layout (without grids)- JPEG, Week 5(24 October 2023). |
Fig 4.4.1 Final Text Formatting Layout (with grids)- PDF,
Week 5(24 October 2023).
|
| Fig 4.4.2 Final Text Formatting Layout (with grids)- JPEG, Week 5(24 October 2023). |
5. FEEDBACK
Week 2
General feedback: Logical distortion is acceptable. Sometimes
changing the font itself can fulfil the task (meaning). Fill in the
reflection, futher reading, feedback, and lectures in the
portfolio.
Specific feedback: Something about The e in bounce going in a
bounce motion. For Dive, the play of colors in the words going
into the water is good. The top two
sketches of Chaos is good (they mantain legibility).
Float one is approved (the O is literally going up)
Week 3
General feedback: Make sure it has strong impactful impressions.
Fill in the whites or reverse. Don't stretch text. Try different
fonts. The more variation of the worf the better, If you finished
then animate one of them in motion.
Specific feedback: Chaos at bottom left is good (unlike the
bottom middle because it is more legible). For Float top middle is
approved (very literally, the O is floating). Too much "noisy"
colors
(reduce it), taking away the eye from the main subject. Dive, look at the
bottom left make some connection between the i and the period
Dot.
Week 4
General feedback: Update the portfolio, pay attention to the text
Formating. make multiple of text layouts. Watch the videos before
making anything.
Specific feedback: UPDATE FURTHER READING. For the animation of
word Bounce, i was suggested
to animate the blur of the movement from the O similar to my
digitazation of the word. Update the futher reading, also change the
image of the sketches to screenshot.
Week 5
General feedback: Update the portfolio, no color only
greyscale, Having an alignment is important, no slanted text,
only straight.
Paragraph must be linked. Pay attention to the baseline!
Specific feedback: The second design is approved. Theres a few adjustment for the body of text in the middle,
giving it an align center and bold font adjustment to give it more
weight than the rest of the body text. Also all of the sketches body text floats above the baseline (has
been fixed).
Week 6
General feedback: The headline and the body text cam be in the
same page. Be carefull of white spaces when using justify
aligned text. The headline need to have clear message.
Specific feedback: Out of the 6 sketches, the first one got
approved. Suggested to add 'brackets' on the word 'Code' and
the first sentence of each paragraph to be Bold or Italics
(Because it has the same opening words)
6. REFLECTION
6.1 Experience
Having troubles getting the Adobe (some friends suggest just buying it),
currently using a free trial. Finally got the Adobe, having some trouble
keeping the Taylors email signed in but got it down eventually.
Throughout these exercises, I get to learn and get used to some of AI
tools and it's quite fun messing around with it even though it is
overwhelming at the start. Really enjoyed the exercises, kept making
diferrent variations to find the perfect one.
6.2 Observations
Coming to this class gave me my first proper experience of Creative Media
Design or any design class for thet matter. The learning stlye is very
different from senior high school in Indonesia. Not used to have keep
progress for each of my work every week to show updates, but it does give
me time and opputinity to ask for advice, which I'm very glad for.
The progress is shown through Facebook comments section,
I prefer just submiting it in google classrom, but then
again I get to see some really great ideas from other students too. Turns
out I really like the facebook submitting method, I can see other student
works and get inspired by them, I guess the initial dislike is because I
never use Facebook and having troubles with it. Our lecturer also advises
us to not rely on his feedback for reassurance, but to also take risk even
when we are uncertain, because that's where we laern to make hard
decision.
Another observation is that I did not record the visual references I used.
Next time I should try to
record the design process immediately.
6.3 Findings
Basically, typography is all about thinking out of the box but staying
simple and subtle while also considering the rules. The most simple,
straightfoward, and efective solution.
7. FURTHER READING
.png)
.png)
.png)
Comments
Post a Comment