24.09.2024 - 29.10.2024 (Week 1 - Week 6)
Samantha Kristalyn / 0373905 Typography / Bachelor of Design (Honours) in Creative Media
Task 1: Exercise 1 & 2
JUMPLINKS
LECTURES
Week 1 / Introduction & Briefing
Lecture 1: Typo_0_Introduction
This exact lecture has taught me the basics of typography; such as the
definition of typography, its origins, and the terminologies that are
frequently used in typography.
Typography itself is the development of typefaces or type families. It
may be defined as the act of creating letters that resemble the
geometrical shapes we often witness in our daily lives. These exact
shapes have been utilized to create different types of letter shapes.
Mr. Vinod disclosed that typography comes in diverse forms, starting
from digital images to real physical objects. There are a bunch of real
life examples around everywhere ranging from animations, applications,
website designs, posters, books, and signs. Therefore, typography is a
crucial skill that we must learn about since it will apply to all of our
modules later on in the future.
Typography itself is a skill that needs to be practiced and observed,
and doing research by reading can also be very helpful.
After that, Mr. Vinod elaborated the definitions of calligraphy,
lettering, and typography and he explained the difference between the
terminology of font and typeface.
The term font itself refers to the individual scale and weight within a
typeface.
On the other hand, typeface is a group of various fonts
that does not share similar characteristic and are distinct to each other.
Fig. 1. 1. 1, left: different variations of Georgia fonts; right:
different kinds of typefaces, (25/09/24)
Lecture 2: Typo_1_Development
On this lecture, Mr. Vinod was mainly explaining about the history of
Typography.
In the early stages where writing first began, people would use
sharpened sticks to write on wet clay and chisel to carve symbols on
stone.
Fig 1. 2. 1, left: Phoenician votive stele Carthage, Tunisia;
right: The evolution from Phoenician letters to Latin,
(25/09/24)
The Phoenicians wrote from left to right.
On the other hand, the Greeks would write letters using their own
writing style; boustrophedon.
Boustrophedon itself means that the lines are read from right to left
and left to right alternately.
Fig. 1. 2. 2, Boustrophedon, Greek writing style and Early letterform development and transition of the letter A from
Phoenician to Greek to Roman,, (25/09/24)
People began writing in square capitals between the 3rd and 10th
century C. E. using broader-edged pens and ink. Roman monuments had
writing forms known as square capitals. Every major stroke was
completed with a serif. Square capitals are more expansive than rustic
capitals. Writing on a sheet of parchment takes less time and enables
for twice as many words. Compared to square capitals, it was a little
more difficult to read because of how condensed it
was.
Fig. 1. 2. 3, Square Capitals on the 4th or 5th century,
Rustic capitals on the late 3rd to mid 4th century, Roman Cursive
in lowercase, and Uncials,
(25/09/24)
Documents were written in square and rustic capitals. Meanwhile,
individuals used cursive for daily tasks such as transactions since it
is faster and more efficient to write. Furthermore, there are uncials,
which incorporate some components of Roman cursive such A, D, E, H, M,
U, and Q. Additionally, broad uncials are easier to read in small
sizes than rustic capitals.
Charlemagne, Europe's first unifier since the Romans, issued an edict
to standardize all ecclesiastical texts. Alcuin of York, Abbot of St
Martin of Tours, was given this mission. The monks rewrote these texts
with majuscules (uppercase), miniscules (lowercase), capitalization,
and punctuation, establishing the norm for calligraphy for the next
100 years.
Fig. 1. 2. 4, C. 925, left: Caloline miniscule;
right: Chronologically ordered classifications of text types over the
years, (25/09/24))
Lecture 3: Typo_3_Text_P1
1.) Kerning and Letter Spacing
Kerning is the adjustments of space between letters for better visual
appeal.0
The adjustments between letters in kerning are automatic and are
usually mistaken as letterspacing.
Headline writings usually use kerning since it is
space-saving.
Fig. 1. 3. 1, left: different types of tracking; right:
text with and without kerning, (02/10/24)
The drawing of uppercase letterforms enables them to stand
alone.
In contrast, in order to preserve text readability, lowercase
letterforms require the creation of a counterform. This is the
reasoning behind Mr. Vinod's statement that it is not recommended for
first-year design students to alter the letterform spacing.
Proper kerning ensures that letters won't crowd each other.
However, poor kerning can disrupt reading flow and
comprehension.
Hence, that is why proper kerning is crucial in typography.
Fig 1. 3. 2, Counterforms, (02/10/24)
2.) Text Formatting
Flush Left, Ragged right:
In this format, the beginning of each line is the
same.
It finishes however, at the end of the line where the final
word ends.
Consistent word spacing enables the type to create even gray
tones.
Centered, Ragged right and left:
This arrangement gives the text a picture-like appearance by
converting text fields into shapes.
However, line breaks must be altered to prevent the text from
appearing jagged since centered type makes such a strong shape on the
page.
Flush Right, Ragged left:
In contexts such as captions, when the link between text and picture
is somewhat vague and there isn't a strong orientation to the right,
the flush right format, which emphasizes the end of a line rather than
the start, might be helpful.
Justified:
The text is forced into a symmetrical shape by the justified format.
this is accomplished by increasing or decreasing the distance between
characters.
Due to the openness of the lines in this format, "rivers" of white
space may be seen, which is something that a designer should
avoid.
We can simply conclude that the choice of text alignment (flush left,
center, flush right) itself significantly impacts readability, with
flush left being the most natural for English readers.
Fig. 1. 3. 3, Four types of text formatting,
(02/10/24)
3.) Textures
The texture of a typeface refers to the visual and tactile qualities
of the letters, which can affect readability and the overall mood of a
design.
Understanding the textual sensation of various typefaces is
essential.
It's important to take the various typeface textures into
account.
Fig. 1. 3. 4, Anatomy Of A Typeface, (02/10/24)
4.) Leading & Line Length
A field of type should be able to occupy the page as much as a
photograph does. Anyhow, the easy and prolonged reading from the
text type should be maintained.
Effective leading (space between lines) and limiting line length to
55-65 characters are critical for maintaining reader engagement and
comprehension.
Type Size: Text should be large enough to be easily read at arms length.
Leading: Excessively tight text stimulates vertical eye movement, making it
easy for a reader to become disoriented. It will affect the text's
readability if it is adjusted too loosely.
Line Length: The line length has as much of an impact on appropriate text
leading as type size and leading do. Longer lines require greater
leading, whereas shorter lines need less.
5.) Type Specimen Book
Samples of typefaces in different sizes are displayed in the type
specimen book. Its purpose is to give precise references for type,
size, leading, length, line length, and other aspects of type.
Compositional Requirement: Text needs to fill a space on a page or screen in
order to meet the compositional criteria.
Fig 1.3. 5, Type Specimen Book, (02/10/24)
Lecture 4: Typo_4_Text_P2
1.) Indicating Paragraphs
Pilcrow (¶) → Pilcrow was previously used to serve as an indicator for paragraph
spaces, but it's rarely used anymore during these recent
times.
Leading → Leading is a vertical spacing between paragraphs. To maintain
the same value between paragraphs and leading, the size of the
leading has to be the same size as the typeface.
Indentation → Indentations are also used to indicate paragraphs. They are
generally the same exact size as the line spacing or text point
size. Indentation was invented to save up space on newspaper.
Extended Paragraph → These paragraphs are commonly used in academic writings. Because of
its unappealing column of texts.
Fig. 1. 4. 1, Pilcrow, leading, indentation, and extended
paragraphs, (09/10/24)
2.) Widows & Orphans
Widows are short lines of types that are left alone at the end of a
text's column.
On the other hand, orphans are short lines at the start of new
columns.
To solve widows, the line endings should be broken again so that the
last line won't look as visibly short.
Fig. 1. 4. 2, Widows and orphans, (09/10/24)
3.) Text Highlighting
To highlight certain texts, there are multiple ways to make the text
itself stand out from the rest, like using bolded or
italicized typefaces. Other than those two, it also can be done
by changing the text's color or by adding a
solid colored background.
Fig. 1. 4. 3, left: Univers that has been reduced by 0.5 point
size to match Times New Roman; right: The difference between quotation marks that are indented and extended
& Prime (top) and Quote (bottom), (09/10/24) (
When two or more typefaces are used, it should be kept in mind that
the leading's adjustment and point size are vital because typefaces
usually vary in terms of size. Thus, it can develop an imbalance
between both of the typefaces if it is not well adjusted. Apart from
that, maintaining the left axis of text guarantees
readability.
On particular cases, ensuring that the placement of typographic
elements are outside of the left margin of a column of type is
essential because later on, it will be able to maintain a strong
reading axis. Furthermore, quotation marks can help on leaving a clear
indent, resulting in the left axis broken.
4.) Headline Within Text
Subdivision within texts exists in various forms. It is also a
typographer's role to make sure that the headings convey their
significance towards the readers. The upcoming visuals will be labeled
as A, B, and C based on their level of importance.
Fig. 1. 4. 4, A heads, B heads, and C heads, (09/10/24)
A heads specifies clear apparent breaks between
topics.
B heads signifies a supporting argument or example for the
topics at hand.
C heads highlights the intricate features within the
subject of B.
5.) Cross Alignment
Cross alignment in typography refers to the practice of aligning
text and graphic elements across multiple columns or sections within
a layout. Its purpose is to create both a cohesive and balanced
appearance. This technique enhances readability and visual flow,
ensuring that the elements are positioned coherently on the
page.
Fig. 1. 4. 5, Cross alignment, (09/10/24)
Lecture 5: Typo_2_Basic
Over the past 500 years, as typography has evolved, people have
developed specific terminologies to describe the different parts
of letterforms. On this lecture, Mr. Vinod briefly covered a
variety of terms related to typography. Below are a few of the
terms that he had explained:
1.) Describing Letterforms
Imaginary Lines and Optical Adjustment
Baseline: The line that helps visualize the base of
letterforms.
Median: An imaginary line that determines the x-height of
letterforms.
X-height: The height of the lowercase "x" of any
typeface.
Fig. 1. 5. 1, Imaginary lines and optical adjustments,
(24/10/24)
Other than the ones that has been mentioned, there is also cap
height. Cap height is the line that defines the maximum height
of a capital letter, descender height, and ascender height.
The ascender height is actually a bit higher when compared to
cap height to create the impression of equal size. That is
what can be defined as an optical adjustment.
Stroke: A line that shapes the form of a
letter/character.
Apex/Vertex: The apex is the upward-pointing tip where
two diagonal lines meet, while the vertex is the
downward-pointing tip.
Arm: A short stroke extending off the main stem of the
letterform.
Bark & Beak: The bark is a half-serif finishing on
a curved stroke, while the beak is a half-serif finish on
horizontal arms.
Bowl: The rounded form defining a counter, which may
be opened or closed.
Bracket: The transition curve between a stem and a
serif.
Cross Bar & Cross Stroke: The horizontal stroke in
a letterform connecting two stems.
Crotch: The inner area where two strokes converge.
Descender: The part of the stem in a lowercase letter
that extends below the baseline.
Ear: A stroke that extends out from the main body of
the letterform.
Em/ en: Originally based on the width of an uppercase
M, an em is now the unit equal to the typeface size, while an
en is half that width.
Finial: A rounded terminal without a serif at the end
of a stroke.
Leg: A short stroke extending from the stem, either at
the bottom (as in L) or slanted downward (as in K and R).
Ligature: A character created by merging two or more
letterforms.
Link: The connecting stroke between the bowl and loop
in a lowercase G.
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 a part of the
bowl.
Spine: The curved stem of the S.
Spur: A small extension marking the junction between a
curved and straight stroke.
Stem: The primary vertical or oblique stroke.
Stress: The angle or orientation of a letterform,
shown by the thinnest part in round shapes.
Swash: The flourish that extends the stroke of the
letterform.
Tail: A curved or slanted stroke that completes
certain letterforms.
Terminal: The self-contained finish of a stroke
without a serif.
Fig. 1. 5. 2, Describing letterforms, (24/10/24)
2.) The Font
Fig. 1. 5. 3, The Font, (24/10/24)
Small capitals: Uppercase letterforms designed to match the
X-height of the typeface are often used in serif fonts and are
typically referred to as "expert set."
Small caps are commonly used to make uppercase letters in a
paragraph less visually prominent.
Uppercase numerals: Uppercase numerals have the same height as uppercase letters
and are also referred to as lining figures. Additionally, they
have the same kerning width set. They are typically used in
situations involving uppercase letters.
Lowercase numerals: Lowercase numerals are those that have ascenders and
descenders and are x-height.
In modern times, the majority of typefaces/fonts are usually
produced with an accompanying italic. However, italics are
not included with small capitals. Italics have their roots
in Italian cursive handwriting from the 15th century.
Miscellaneous characters might differ from one font to
another. Because of that, it is crucial to be familiar
and accustomed with all of the characters before
selecting a type for a certain job.
Ornaments are typically used as flourishes in
invitations and certificates. Only a few traditional and
classic typefaces have decorative fonts as part of their
overall family.
3.) Describing Typefaces
Roman: Obtained from Roman's monuments' inscriptions. A
significantly lighter stroke in Roman are usually called
'Book.'
Italic: Titled and named for the 15th century Italian
handwriting. Contrarily, 'Oblique' is based on the roman form of
typefaces.
Boldface: Usually characterized by a thicker stroke than a
roman form. Depending on how thick the stroke widths are, the term
may be different, e.g., semi-bold, medium, extra bold, etc.
Light: A lighter stroke compared to the roman form. There is
a lighter version of light, usually referred to as 'Thin.'
Condense: A way more compressed version of the roman form.
Styles that are extremely condensed are usually called
compressed.
Extended: An extended version of the roman form.
Fig. 1. 5. 8, Describing typefaces, (24/10/24)
4.) Comparing Typefaces
Fig. 1. 5. 9, Comparing typefaces, (24/10/24)
INSTRUCTIONS
PRACTICAL
TASK 1 : Exercise 1 - Type Expression
Week 1
During the first week, Ms. Vitiyaa assigned us to create type
expressions for four different words that we have submitted and
voted for. From the results, we came up with these four words:
Fancy, Bloom, Smoke, and Spicy. We were given the time to sketch and
would get feedback about our work later on.
1. References
Fig. 2. 1. 1, References used for the sketches
2. Sketches
Below are the first sketches that I have made out of the given
words.
Fig. 2. 1. 2, The initial sketches for fancy, bloom, smoke, and
spicy, (26/09/24)
Fancy:
Textured edges and uniform text size evoke elegance,
conveying "fancy" with a refined simplicity.
Bloom: Floral elements like stems and leaves make the letters feel
alive, symbolizing growth and natural beauty.
Smoke: A disintegrating effect in the letters mimics fading
smoke, creating a sense of movement and mystery.
Spicy: Chili illustrations within the text instantly
communicate heat, giving "spicy" a bold, energetic
look.
3. Final Sketches
After receiving a few feedbacks,
I have decided to revise the initial designs that I have
sketched. I have also added additional sketches with newer
ideas.
Here are the final ideas of my type expressions:
Fig. 2. 1. 3, Completed final sketches for fancy, smoke,
spicy, and bloom, (26/09/24)
Week 2
4. Digitalized Work
While I was digitalizing my work, I realized that I had to
improvise and create new designs since the initial ideas that
I've made are way too complicated and distorted; making it
difficult since we are only allowed to use the 10 fonts that
were given to us.
Fig. 2. 2. 1, Digitalized Type Expressions,
(03/10/24)
Fig. 2. 2. 2, Finalized Digitalized Type Expressions,
(03/10/24)
Week 3
5. Animation
At first, I decided to create an animation for 'Bloom'. I started
out by making the frames on Illustrator and ended up with only 8
frames, and I animated it on Photoshop but I thought the results
were unsatisfactory, so I created a new one for 'Fancy'. I ended up
with 12 individual frames. I wanted to make the sparkles spin and
the glass to resemble a martini being filled up by liquid.
Fig. 2. 3. 1, Frames for Fancy animation,
(11/10/24)
I moved the all of frames onto Photoshop and compiled them into
one, creating the final animation.
Fig. 2. 3. 2, Compiled frames for Fancy animation on Adobe
Photoshop, (11/10/24)
Here are the final two animations that I have made by
exporting the final works into a GIF format:
Fig. 2. 3. 3, left: Final Fancy Animation in GIF format; right:
Final Bloom Animation in GIF format (11/10/24)
Fancy: The animation shows a martini glass being filled up, with
shiny sparkles enhancing the sense of elegance and luxury,
perfectly embodying the idea of "fancy."
Bloom:
Two flower-like petals emerges from a pot in the animation,
visually capturing growth and renewal, symbolizing the essence
of "bloom."
Fig. 2. 3. 4. Final animation of the 'Fancy' type expression in GIF
format, (11/10/24)
Fig. 2. 3. 5. Final animation of the 'Bloom' type expression in
GIF format, (11/10/24)
Fig. 2. 3. 4. Final animation of the 'Fancy' type expression in GIF
format, (11/10/24)
Week 4
TASK 1: EXERCISE 2 - Text Formatting
1. Kerning and Tracking (Letter Spacing)
On this exercise, the main focus was more on learning how to kern
and track text. We were provided with 4 lecture videos that helped
in guiding us through these exercises. There was an extra video
filled with information about shortcuts on cross-alignment.
Fig. 2. 4. 1, Text with and without kerning,
(17/10/24)
From the picture above, it can be seen that the text with
kerning has less space between letters━ which makes the text more compact and
tight.
Fig. 2. 4. 2, Both texts with and without kerning overlayed on
top of each other, (17/10/24)
The image above shows the comparison between the two versions
of text, the ones with and without kerning, presenting the
visible difference between the two.
2. Font Size, Line-Length, Leading & Paragraph
Facing
The 2nd video, (2/4), helped us into becoming more familiar
towards font-sizing, leading, spacing paragraphs, etc. For a
single line, a good length should be around 55-60 characters per
line. The text size should stay within 8 to 12 points, with the
leading adjusted to be 2 to 3 points greater than the text
size.
Fig. 2. 4. 3, Text formatting exercise 1, (17/10/24)
3. Alignment, Paragraph Spacing, Text Fields &
Ragging
The 3rd video, (3/4), elaborated about how to insert image, aligning
text methods, and ways to smoothen out ragging. Mr. Vinod suggested us
to set the increments for kerning and tracking to 5/1000em so the
ragging will be more detailed and can be done slowly. The rule of
thumb was also explained; while kerning and tracking, we should not
exceed over 3 clicks of the same arrow key to prevent creating
distinct and weird text that are hard to read.
Fig. 2. 4. 4, Text formatting exercise 2, (17/10/24)
4. Cross Alignment and Base Grid
The last video out of all four explained the use of baseline
grid for cross-aligning. Baseline grid's purpose is to make sure that each line aligns
with the baseline grid. Therefore, the text will be able to
achieve cross alignment.
After watching and understanding the video, I started working on
the next exercise that was assigned to us. I made 6 layouts in
total using the theories and shortcuts from the video.
Fig. 2. 4. 5, Final six layouts, (18/10/24)
Week 5
I selected the 5th layout as my final piece because I was
particularly drawn to the design of the heading. The style and
placement of the heading felt more visually appealing and
aligned well with the overall look I wanted to achieve. Its
balance and prominence made the layout stand out among the other
options for me.
Fig. 2. 5. 1, left: Final Layout Work without grid and baseline;
right: Final Layout with grid and baseline, (23/10/24)
Fig. 2. 5. 2, Final layout (with grid) PDF, (23/10/24)
Fig. 2. 5. 3, Final layout (without grid) PDF, (23/10/24)
HEADLINE
Font: I am: Futura Std Book; Helvetica: Futura Std Medium
Condensed
Type size/s: I am: 30pt; Helvetica: 130pt
Leading: I am: 36pt ; Helvetica: 156pt
Paragraph spacing: 0
BODY
Font: Futura Std
Type size/s: 9pt
Leading: 11pt
Paragraph spacing:
Characters per-line: 55-65 characters
Alignment: Left aligned
Margins: 12.7mm (top, left, right); 50mm (bottom)
Columns: 2
Gutter: 5mm
CAPTION
Font: Futura Std Light
Type size/s: 12pt
Leading: 14.4pt
Paragraph spacing: 0
FEEDBACK
Week 2
General Feedback
Ms. Vitiyaa requested for us to simplify our type expression
sketches, to lessen or get rid of our complicated illustrations to
help us work more efficiently once we digitalize our type
expressions.
She directed us to watch the third lecture beforehand so that we
could better comprehend Adobe Illustrator as a whole before
digitizing our work.
Specific Feedback
I had too many illustrations on my work and it disrupts the
text. I’ll have to revise the word ‘Spicy’ and ‘Bloom’. The first
few sketches could be better and improvised.
Week 3
General Feedback
On the third week, Ms. Vitiyaa checked on our digitalized work and
told us to finish the type expressions on Adobe Illustrator by today
and submit it to the Typography Facebook group.
Specific Feedback
Most of ‘Smoke’ is way too distorted and unclear.
Week 4
General Feedback
During this week’s class, Ms. Vitiyaa told us to only use the fonts
given on Microsoft Teams for our work, to get rid of excessive
illustrations, and to lessen the distortion on the letters of our
typography work. We’ll have to finish our animation work by today.
Specific Feedback
Week 5
General Feedback
Ms. Vitiyaa told us to watch the 5th lecture video by
Mr. Vinod to understand about what we are going to do on our 2nd
task. We were reminded again to finish up the e-portofolio for the
1st task by next Tuesday because it will be reviewed and
checked.
Specific Feedback
Ms. Vitiyaa said not to justify the texts on the layouts and to focus
kerning using the thumb rule.
Week 6
General Feedback
Ms. Vitiyaa told us to finish up and print Task 2 and to bring the
materials for next week.
For today, we will have to make sure that our Helvetica layout work
is done and proper and to submit our finished work on our
e-portofolio by today.
Specific Feedback
Ms. Vitiyaa said that there are many changes that I will have to make
and she told me to catch up to the deadline with the improvised
version of my work.
She said that there are too many unnecessary pictures used on the
layouts and the layouts are way too tight and compressed.
REFLECTIONS
Experience
Task 1 was both challenging and rewarding. Learning to use Adobe
Illustrator and InDesign provided an in-depth understanding of type
manipulation, layout creation, and design precision. The process of
expressing ideas through typography required careful thought about
letterforms, spacing, and balance, which was particularly engaging.
Creating type expressions allowed me to see how typography can convey
emotions and tone through subtle design choices, while animating these
expressions opened up new ways to bring text to life. Experimenting
with these tools gave me hands-on experience in transforming basic
text into dynamic, visually impactful compositions.
Observation
Throughout these weeks, I observed that typography is not just
about choosing a font but about understanding how each
element—spacing, alignment, and scale—works together to support a
design's purpose. Small changes in kerning or leading could
significantly impact readability or overall aesthetics. I also
noticed how different typefaces can influence the mood and message
of a design. Working with animations, I saw how movement can add
depth and engage viewers, making the text more than just static
information but part of a visual narrative.
Findings
These tasks highlighted the power of typography in communication. I
found that type expression and layout design require both technical
skill and a keen eye for detail to create effective and cohesive
designs. Learning both Adobe Illustrator and InDesign was crucial
for executing these ideas precisely, and animating text allowed for
greater experimentation in conveying meaning. Overall, I discovered
that typography is an essential tool in visual storytelling, with
each design choice influencing the viewer's interpretation and
response to the message.
FURTHER READING
The Complete Manual of Typography (Second Edition) by James Felici
The Complete Manual of Typography (Second Edition) by James
Felici is a thorough guide on typography, crafted for both
beginners and experienced designers. Felici presents typography as both an art and a science, focusing
on the details that make text look good and easy to read.
The book begins by explaining typography basics, including its history,
letter anatomy, and key concepts like the baseline, x-height, ascenders,
and descenders. Felici himself categorizes typefaces into serif,
sans-serif, script, and decorative, offering guidance on selecting fonts
based on function and readability. Essential spacing techniques like
kerning, tracking, and leading are covered, along with alignment
principles to create well-structured, reader-friendly designs. The book
also delves into text composition and layout, exploring paragraph spacing,
hierarchy, and page balance to ensure visual flow and clarity.
Felici emphasizes the importance of typography in digital media, adapting
traditional practices for screen readability and web design. Advanced topics
include ligatures, alternate glyphs, and typographic tools in software like
Adobe InDesign. Throughout, the book offers practical advice on font
pairing, grids, and troubleshooting common typography issues, supplemented
by illustrations and examples. Felici's insights highlight how attention to
detail in typography enhances both readability and aesthetic appeal,
equipping readers with the skills to create compelling and functional
designs.
.png)
.png)
.png)
Comments
Post a Comment