Typography ~ Task 1 : Exercises
Justin
Cleon
(0375523)
23
Sep
2024
-
28
Oct
2024
(Week
1
-
Week
6)
||
Task
1
:
Exercises
1
&
2
Table
of
Contects
1.
Instructions
Task
1
:
- Exercises 1
Visually represents the idea of four (4) of these
words (burn, melt, grow, and fade) by using the 10
typefaces given. Distortion of any letters is not
allowed, as an overboard distortion would make the
words challenging to read. Only rotary, flip, or
balance adjusting of letters is permitted. No color
may be used in the exercises (only black &
white).
- Exercises 2
Prepare for the text formatting exercise by
watching the chosen content: Text: P1 and
Text: P2. Various formatting features that
shown, including alternative types, type
sizes, line length, leading, kerning
force-line break, paragraph positioning,
composition, cross-alignment, widows and
orphans.
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)
Learning
Goal
• To be able to compose and express using
textual information
• To be able to format text for effective
communication
Timeframe
Weeks
1-5
(deadline
in
Week
6)
Document
1.1 Module
Information
Booklet
(MIB)
of
Typography.
2. Lectures
Lecture 1 :
Introduction
Figure 2.1 Source: Pinterest
The transformation
of typography: Calligraphy > Lettering > Typography.
• Calligraphy: The art of beautiful, stylized,
or elegant handwriting
• Lettering: The art of drawing letters
• Typography: The art and technique of arranging type to make
written language legible, readable, and
appealing when displayed
Who practices
Typography?
• Traditional print professionals: typesetters, composers, typographers
• Design professionals: graphic designers, art directors
• Visual artists: manga artists, comic book artists, graffiti artists
• Modern digital content creators: web designers, UX/UI designers, digital marketers
• General professionals and individuals:
clerical workers, newsletter writers, self-publishers
Terminology
• Font: A font refers to the individual style
or weight within a typeface.
• Typeface: A typeface refers to the entire
family of fonts/weights that share similar
characteristics/styles.
Lecture 2 : Development / Timeline
Figure 2.2 Source: Pinterest & Instagram
Early letterform
development:
Phoenician to
Roman
The history of the
alphabet is a fascinating
journey through time. It
all started thousands of
years ago when simple
symbols were scratched or
carved into clay or stone.
For about 2000 years, only
capital letters existed,
made out of simple
straight lines and curves.
As writing spread across
different cultures, each
has developed unique
writing styles.
A significant change came
when the Greeks altered
writing methods. Unlike
the Phoenicians who wrote
from right to left, the
Greeks introduced a
back-and-forth style of
writing, similar to an ox
plowing a field. This new
approach has finally
influenced to write with
letter shapes. Later,
Roman stone carvers
refined the letters, by
painting them before
carving, leading to wider
and more elaborate
characters with thicker
strokes at the beginning
and end.
The evolution of individual letters can be
observed over time. For example, the letter
"A" started as a sideways "K" shape in
Phoenician and gradually transformed into
the familiar "A" used today. Between the 3rd
and 10th centuries, "CE" a style called
Roman Square Capitals emerged. These letters
featured small decorative lines called
serifs at the ends of strokes and were
written with a special reed pen held at a
specific angle. This created a distinctive
variation in line thickness.
This Roman style, is visible in many ancient
monuments, laid the foundation for the
letter shapes still used in modern times.
Each step in the evolution of the alphabet
reflects changes in the tools used, the
materials written on, and cultural
practices. This long journey of development
has resulted in the writing system familiar
today.
Hand script from
3rd - 10th century
C. E.
Figure 2.3 Source: Pinterest
1. Square Capitals
appeared on Roman
monuments. These letters
had serifs added to the
ends of main strokes. The
variety of stroke width
came from a reed pen held
at approximately 60° off
the perpendicular. An
example from the 4th or
5th century shows letters
like "RIGATE", "ALIAELN",
and "ORIBVS".
2. Rustic Capitals were a compressed
version of Square Capitals, allowing twice
as many words on a sheet of parchment and
taking less time to write. The pen or brush
was held at about 30° off the perpendicular.
Although faster and easier to write, Rustic
Capitals were slightly harder to read, this
is due to their compressed nature. An
example from the late 3rd to mid 4th century
displays words like "HOCILLI", "HOCROG", and
"QUIDERI".
3. Roman Cursive was typically used for
everyday transactions. These forms were
written in cursive hand with simplified
shapes for speed. This style shows the
beginning of what are now called lowercase
letterforms. An example from the 4th
century displays a more flowing, connected
script.
4. Uncials incorporated some aspects of
the Roman cursive hand, especially in the
shape of the A, D, E, H, M, U and Q.
'Uncia' in Latin means a twelfth of
anything; some scholars think uncials
refer to letters one inch (one twelfth of
foot) high. The broad forms of uncials are
more readable at small sizes than Rustic
Capitals. An example from the 4th - 5th
century shows rounded, flowing
letters.
5. Half-uncials mark a further
formalization of the cursive hand and the
formal beginning of lowercase letterforms,
complete with ascenders and descenders,
2000 years after the origin of the
Phoenician alphabet. An example from
around 500 CE shows a mix of upper and
lowercase-style letters, with words like
"quode", "abolen", and "reque"
visible.
6. Caroline miniscule emerged around 800
CE, during Charlemagne's reign, the first
unifier of Europe since the Romans. In
789, Charlemagne issued an edict to
standardize all ecclesiastical texts,
entrusting this task to Alcuin of York,
Abbot of St Martin of Tours. Monks rewrote
the texts using both majuscules
(uppercase) and minuscule, with
standardized capitalization and
punctuation. This set the calligraphy
standard for a century.
An example from c. 825 shows the Caroline
miniscule script, featuring words like
"ite a potesta", "tere qm filius", and "in
magis qua", demonstrating a clear, legible
hand with a mix of letter forms that
influenced later Western scripts.
Blackletter to Gutenberg's type
After Charlemagne's empire fell, regional
variations of Alcuin's script emerged.
Northern Europe favored a condensed,
vertical letterform called Blackletter or
textura. Southern Europe preferred a
rounder, more open hand known as
"rotunda". Italy developed a humanistic
script based on Alcuin's minuscule. An
example from c. 1300 demonstrates
Blackletter (Textura) script with its
characteristic dense, vertical appearance,
evident in phrases like "Et in consilic"
and "in via pecca".
Gutenberg's expertise in engineering,
metalsmithing, and chemistry proved
crucial in developing movable type
printing. The aim was to accurately mimic
the work of scribes' hands, particularly
the Blackletter of northern Europe. The
innovative process required creating a
different brass matrix, or negative
impression, for each letterform. An
example from c. 1455, taken from the
42-line Bible (Gutenberg's Mazarin Bible),
showcases how closely the printed type
resembled handwritten Blackletter script.
Words like "ut in princi" and "mane:
Dixitq" display the intricate, densely
packed letterforms characteristic of this
style, illustrating the remarkable
similarity between Gutenberg's printed
text and traditional handwritten
manuscripts.
Text Type Evolution: A Quarter-Century
Timeline
Figure 2.7 Source: Pinterest
Lecture 3 : Text Part 1
Typography Text/Tracking: Kerning &
Letterspacing
• Kerning: Adjusting the space between
specific letter pairs to improve
appearance
• Letterspacing: Adding space between all
letters in a word or text
• Tracking: The overall adjustment of space in words or
sentences, which can involve adding or
removing space
Text Formatting
• Flush Left: Starts every line at the same
point on the left, ending wherever the last
word falls. It resembles handwriting and
creates an even appearance with consistent
word spacing throughout
• Centered: Creates symmetry, giving
equal weight to both ends of each
line. It transforms text into shapes,
adding a visual element to the page.
Care must be taken with line breaks to
avoid a jagged look
• Flush Right: Emphasizes line endings
rather than beginnings. It's useful
for captions or when you want to
create a strong right-side orientation
to clarify text-image relationships
• Justified: Creates a symmetrical
block by adjusting spaces between
words and sometimes letters. It can
produce a clean look but may create
'rivers' of white space. Careful
hyphenation and line breaks are
needed to avoid this issue
Figure 2.9 Anatomy of Type
Text Texture
The texture of fonts is important. Fonts
with larger x-heights (the height of
lowercase letters) or thicker strokes create
darker areas on the page. In contrast, fonts
with smaller x-heights or thinner strokes
appear lighter. Being aware of these
differences in how fonts appear is key to
creating effective layouts.
In essence, typography is not just about
choosing a font. It is about understanding
how that font will look and feel in a
design, and how it will affect the overall
message and appearance of the work.
Text Leading & Line Length
The purpose is to make text easy to read
for long periods while balancing the page
layout.
• Type size: Needs to be large enough for
easy reading when holding a book in your
lap
• Leading (space between lines): Must offer
enough spacing to prevent eyes from
jumping vertically (if too tight) or
creating distracting striped patterns (if
too loose)
• Line length: Ideally, lines contain 55-65
characters to ensure readability, as
overly long or short lines can make
reading difficult
Type Specimen Book
Type specimen books show samples of
typefaces in various sizes and provide a
reference for type size, leading, line
length, other typographic elements.
Lecture 4 : Text Part 2
Figure 2.19 Standard & Extended Paragraph
Indentation
Paragraph Indicators:
1. The
'Pilcrow' (¶): A symbol from medieval
manuscripts, rarely used
today
2. Line Space: Space between paragraphs to
align text across
columns
3. Indentation: Must match the text's line spacing or
point size
4. Extended Paragraph: Creates wide columns of text. Used when
there are strong reasons for this
format
Figure 2.10 Widows & Orphans
Widows & Orphans
• A widow: single line alone at the end of
a column
• An orphan: single line alone at the start
of a column
Cross Alignment
Aligning headlines and captions with text
creates better page structure and vertical
flow.
Lecture 5 : Basic
Figure 2.11 Letterform Sketch
Letterform that doesn't appear in the
sketch:
• Em/en: Reffering to the width of an
uppercase M
• Ligature: The combination of 2 or more
letterforms
• Shoulder: The curved stroke is not part of
a bowl
• Swash: The flourish extends the stroke of
the letterform
Figure
2.12 The
Font
The
Font
• Uppercase:
Capital
Letters
• Lowercase:
Include
the
same
characters
as
uppercase
• Small
Capitals: Uppercase
letterform
with
x-height
of
the
typeface
• Uppercase
Number:
Number
has
same
height
as
uppercase
letters
• Lowercase
Numerals:
Number
set
to
x-height
• Italics:
Almost
only
on
Roman
form
• Punctuation:
Some
punctuation
can
change
from
typeface
to
the
typeface
• Ornaments:
Used
as
flourishes
in
larger
typeface
family
Figure
2.13 Typefaces
Describing
Typefaces
• Roman:
The
uppercase
forms
are
derived
from
descriptions
of
Roman
Monuments
• Italic:
Italian
handwriting
• Boldface:
Thick
strokes
• Light:
A
lighter
stroke
than
the
Roman
form
3. Exercises 1 - Type Expression
Research
"Typography is
two-dimensional
architecture, based on
experience and
imagination, and guided by
rules and readability." -
Hermann Zapf, typeface
designer.
"Typography is
the craft of
endowing human
language with
a durable
visual form."
- Robert
Bringhurst,
typographer
and poet.
Figure
3.1 Source: Pinterest
I started
by
searching
for
examples
of the
given
words
using
Pinterest,
Google,
and some
websites
to help me
get a
better
idea.
Sketches
Figure 3.2 Sketches
Creating designs for 'Grow' is more challenging
than 'Burn' because the word requires different
visual interpretations. Here are 3 sketch
concepts:
#1 For my first design shows an
upward-pointing arrow naturally mixed
into the shape of the letter 'G',
showing growth and forward movement.
#2 The second design, it shows a
progressive size increase where each
letter starts off small and becomes
larger, soI went to creating a visual
representation of growth from left to
right across the word.
#3 The third design transforms the letters
into elements of a business chart,
displaying an upward trend line that
gradually rises, similar to a positive
growth graph in financial markets.
Melt
For Melt sketches, 2 versions are made
and combined during digitalization:
#1 The first version I did was to
depicts melted cheese effects with
stretchy, dripping textures.
#2 The second version I tried to
making it shows melting effects only on
text, making letters appear as if they
are dissolving.
Burn
Burn sketches start with simple fire
visuals. However, when the digital
version gets changed, the new concept
takes sketch #1 and adds burned marks to
letters B, R, and N, making these
letters look burned:
#1 First version: I put on some fire
effects only on the letter 'U'.
#2 Second version: then after that,
I put the fire effects on all letters.
Fade
Making the Fade sketches is easier than
the others. Furthermore, 'Fade' was
chosen for the type expression
animation. The two sketches are:
#1 I make the word suddenly
disappears or fades to low brightness.
#2 The letters slowly breaks apart
into particles.
Digitilization of Sketches
Figure
3.3 Digitilization
of
Sketches
Final Type Expression
-1.jpg)
Figure
3.4 Final Type
Expression
(JPEG)
Figure 3.5 Final Text Expression (PDF)
Type Expression Animation
Figure 3.6 Animation Frame (Fade)
Figure 3.7 Animation (Fade)
The animation frames amounted to 20 in Adobe
Illustrator. However, the final Photoshop animation used
only 13 frames because several frames were identical,
and others appeared weird during animation.
Final Animation
-1.gif)
Figure 3.7 Final
Animation
4. Exercises 2 - Text
Formatting
Kerning &
Tracking
Figure 4.1 Kerning & Tracking
Layout
Figure 4.2 Text Formatting Layout
The final text formatting requires
adjustments to Kerning, Tracking, and
Leading. The paragraph formatting
eliminates orphans, widows, and rivers to
ensure proper text flow and visual
consistency.
Headline
• Typeface: Bembo Std
• Font: Bembo Std Bold
• Size: 72 pt
• Leading: 28/30 pt
• Paragraph spacing: 0 pt
Body Text
• Typeface: Bembo Std
• Font: Bembo Std Regular
• Size: 9 pt
• Leading: 11 pt
• Paragraph spacing: 11 pt
• Characters per line: 50-60
• Alignment: Left justified
Layout
• Margins
• Top: 123 mm
• Left: 26 mm
• Right: 26 mm
• Bottom: 26 mm
• Columns: 2
• Gutter width: 10 mm
Figure 4.3 Final Text Formatting (JPEG)
Figure 4.4 Final Text Formatting with Grid (JPEG)
Figure 4.5 Final Text Formatting (PDF)
5.
Feedback
Week 1
General Feedback :
Introduction to Typography and e-portfolio
creation, followed by a briefing about exercises
to create typography using four (4) given words:
Grow, Melt, Burn, and Fade.
Week 2
General Feedback : The session covered Adobe Illustrator
shortcuts and template placement techniques,
followed by a review of the sketches.
Specific Feedback :
Mr. Max recommended me to change the word 'grow'
because another element can be added to 'grow'
words, and the 'Burn' words require further
improvement or research.
Week 3
General Feedback : After receiving feedback about 4 of the
sketches, the next step is to digitize the
sketches using Adobe Illustrator and select
fonts for the text.
Specific Feedback : Mr. Max suggested me on improving the
"Burn" effect by changing more than just the "U"
to resemble fire, so the design could make other
letters appear burned.
Week 4
General Feedback : Mr. Max explains and demonstrates how to
create script/artboard animations in Adobe
Illustrator and animations in Adobe Photoshop.
Specific Feedback : While the first hope was to create a
more dynamic effect with dust moving up and
down, Mr. Max said the current animation was
good and not to make animation hard and
always keep task 1 simple.
Week 5
General Feedback : Overview of Exercise 2, which is the
exercise on text formatting using Adobe
InDesign.
Specific Feedback :
Show the exercise on text formatting using
Adobe InDesign to Mr. Max for review and to
check for widows or orphans.
6.
Reflection
Experience
My experience with Task 1, especially Exercises 1 and 2
was really enjoyable for me, especially working with
Type Expression. Like, creating words that expressed
their meanings through typography was very fascinating.
And the learning process also includes on formatting
text and paragraphs, and arranging pictures to make the
content look appealing and creating something that
people would enjoy reading about.
Observation
For observation, the process involves asking Mr. Max
to review my work. Additionally, feedback and comments
from other friends has helped me to improve and for me
to complete the assignments.
Findings
Overall for Task 1, for me, the extensive knowledge
and the information that I have gotten about
Typography. While making comments about design
elements might seem straightforward, however, deeper
understanding shows the complexity and depth of the
subject. The knowledge that I have gotten from this
learning experience, even though it does not
immediately applicable, may prove that it is
valuable.
7. Further Reading
Typography is more
about increasing the
readability and in
importance of giving a
clear note of
information. Since the
era of hand lettered
texts, the principles
of typography have
changed for the
better, in terms of
the structure and in
design. This needs an
understanding of many
and various font types
(such as serif, sans
serif, mono spaced,
display, script, text,
and dingbats) all of
these have different
purposes in text
presentation. And so,
this needs to be done
in an awareness of
font styles and
families is crucial
and important in order
to make sure that bold
and italic versions
are used correctly.
Comments
Post a Comment