Typography - Task 1: Exercise 1 & 2
26/09/2025 - 31/10/2025 (Week 1 - Week 6)
Lexandra Feodora Stefano/0384629
Typography/Bachelors of Design (Honours) in Creative Media/ Taylor's
University
Task 1: Type Expression & Text Formatting
LECTURE
Lecture 1 : Typo_0_Introduction
Typography is the act of creating letters or the creation of typefaces.
Typography can come in many forms, such as animations, website designs, app
designs, signs, bottle labels, books, posters, logos, and many more.
Basically, typography is very important in the world of design. Typography is
something that cannot be mastered quickly, we need lots of practice,
observation, and reading. Typography has evolved over 500 years, from
calligraphy to lettering to typography. Understanding, mastering, and using
the processes can help with becoming a better designer.
In typography, there are 2 terminologies, font and typeface. Font refers to
the individual font or weight within the typeface. Typeface refers to the
entire family of fonts/weights that share similar characteristics or styles.
An example, on the left is an example of font, on the right is typeface.
|
| Fig 1.1 example of font and typeface (22/09/25) |
Lecture 2 : Typo_1_Development
Back in the day, writing meant scratching into wet clay with sharpened sticks
or carving into stone. Writing back in the day consist of straight lines and
pieces of circles.
|
| Fig 1.2.1 Phoenicians votive stele Carthage, Tunisia & Evolution from Phoenician letter (22/09/25) |
Phoenicians wrote from right to left however, the Greek developed a style of
writing called 'boustrophedon' which is writing from right to lest and left to
right. From the 3rd - 10th century C.E., people write using ink and pens with
a broader edge held at an angle to write square capitals. A compressed version
of square capitals, rustic capitals were faster and easier to write but were
harder to read due to the compressed nature.
|
| Fig 1.2.3 left: square capitals, right: rustic capitals (22/09/25) |
While square and rustic capitals were used for documents, everyday
transactions were written in cursive which forms were simplified for speed
called lowercase letterforms. Then, uncials incorporated some aspects
(especially the shape of A, D, E, H, M, U, and Q). Uncials are easier to read
and smaller than rustic capitals.
|
| Fig 1.2.4 lowercase letterform and uncials (22/09/25) |
Further formalization of the cursive hand, half-uncials mark the beginning of
lowercase letterforms. Charlemagne then issued an edict in 789 to standardize
all ecclesiastical texts. The monks rewrote the texts using majuscules,
miniscule, capitalization, and punctuation which sets the standard for
calligraphy for centuries. Then each country started developing their own
style of writing.
|
| Fig 1.2.5 Caloline miniscule (22/09/25) |
|
| Fig 1.2.6 Types of classifications (22/09/25) |
Lecture 3 : Typo_3_Text_Part 1
Kerning and Letter Spacing
'Kerning' is a term that refers to the automatic adjustment of space between
the letters. It is different from 'letterspacing', where letterspacing means
to add space between the letters. Kerning has normal tracking, tight tracking
(the letters are closer to each other), and loose tracking (the letters are
further away from each other). Uppercase letterforms are able to stand on
their own, while lowercase letterforms needs the counter form to maintain the
readability.
|
| Fig 1.3.1 example of kerning (29/09/2025) |
Text Formatting :
1. Flush left : each line starts at the same point but ends wherever the last
word on the line ends. The spaces between the words are consistent, allowing
the type to form gray value.
2. Centerred : imposes symmetry upon the text, assigning equal value and
weight to both ends. Transforms a field of text into a strong shape on the
page. It is important to amend line breaks so the text doesn't appear too
jagged.
3. Flush right : places emphasis on the end of a line instead of the start. It
can be useful in certain situations (such as captions) where the relationship
between the text and image are ambiguous.
4. Justified : imposes a symmetrical shape on the text by expanding or
reducing spaces between words and sometimes letters. 'Rivers' of white space
can be seen due to the openness of the lines.
Textures
Different typefaces suit different messages therefore, the different
textures of these typefaces needs to be considered. Sensitivity towards the
textures is a fundamental for creating a good layout.
|
| Fig 1.3.2 Anatomy of A Typeface (29/09/2025) |
Leading and Line Length
The goal is to allow an easy, prolonged reading while occupying the page as
much as photograph does.
- Type size : the text should be large enough to be read easily at arms
length.
- Leading : text that is set too tightly can encourage vertical eye
movement, then a reader can loose their place. While if it is set too
loosely, it created striped patterns that can distract the readers.
- Line length : appropriate leading for text is as much a function of the
line length as sit is a question of type size and leading. Shorter lines
require less leading, longer lines more. Extremely long or short line
lengths impairs reading.
Type Specimen Book
Shows samples of typefaces in various sizes. The purpose is to provide an
accurate reference for type, type size, type leading, type line length, etc.
Compositional requirement : text should create a field that can occupy a
page or a screen.
|
| Fig 1.3.3 Sample Type Specimen Sheet (29/09/2025) |
Lecture 4 : Typo_4_Text_Part 2
Indicating Paragraphs
1. Pilcrow ¶ : was used in medieval manuscripts to indicate paragraph
space, but is rarely used nowadays.
2. Leading : the vertical space between paragraphs, usually the size of
the line space and paragraph space is the same to maintain the same value
between paragraph and leading.
3. Indentation : typically the indent is the same size of the line spacing
or the same as the point size of the text. Was invented for saving up
space on newspaper.
4. Extended Paragraph : usually used in academic writing, rarely in
general writing die to the unpleasant looking column of text.
Widows and Orphans
In traditional typesetting, there are 2 unpardonable gaffes - widows and
orphans. A widow is a short line of type left alone at the end of a column
of text. An orphan is a short line of type left alone at the start of new
column. The only solution to widows is to rebreak the line endings through
out the paragraph so the last line is not noticeably short. Orphans
require more care.
|
| Fig 1.4.1 Example of Widows and Orphans (05/10/2025) |
Highlighting Text
Highlighting text can be done with various of, such as italicized,
bolded, changing the color, or
adding solid colors behind the text to help emphasize the text. Keep in mind that when
using 2 or more typefaces, adjusting the leading and point size is
crucial. Sometimes it is necessary to place certain typographic elements
outside the left margin of a column of type to maintain a strong reading
axis. Quotation marks, like bullets, can create a clear indent, breaking
the left reading axis.
Headline within Text
There are many kinds of subdivision within text of a chapters. The following
visuals have been labeled according to the level of importance.
A Head specifies a clear break in between topics within a section
|
|
Fig 1.4.2 A head (05/10/2025) |
B Head indicate a new supporting argument or example for the topic at hand
|
|
Fig 1.4.3 B head (05/10/2025) |
C Head highlights specific features within the subject of B
|
|
Fig 1.4.4 C head (05/10/2025) |
Cross Alignment
Cross aligning headlines and captions with text type reinforces the
architectural sense of the page while articulating the complimentary vertical
rhythms.
|
|
Fig 1.4.5 Cross Alignment (05/10/2025) |
Lecture 5 : Typo_2_Basic
Describing Letterforms
Imaginary Lines and Optical Adjustment
- 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'
There are also cap height, which is the line that defines the max height for
a capital letter, descender height, and ascender height.
|
| Fig 1.5.1 Imaginary Lines and Optical Adjustment (13/10/2025) |
- Stroke : Lines that defines the basic letterform
- Apex/Vertex : The point created by joining 2 diagonal stems (apex above, vertex below)
- Arm : Short strokes off the stem of the letterform, either horizontal or inclined upward
- 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 some horizontal arms
- Bowl : The rounded form that describes a counter. The bowl may be open or closed
- Bracket : The transition between the serif and stem
- Cross Bar & Cross Stroke : The horizontal stroke in a letterform that joins 2 stems together
- Crotch : The interior space where two strokes meet
- Descender : The portion of the stem of a lowercase letterform that projects below the baseline
- Ear : The stroke extending out from the main stem or body of the letterform
- Em/en : Referring to the width of the uppercase M. Em is now the distance equal to the size of the typeface, an en is half the size of an em
- Finial : The rounder non-serif terminal to a stroke
- Leg : Short stroke off the stem of the letterform, either at the bottom of the stroke or inclined downward
- Ligature : The character formed by the combination of two or more letterforms
- Link : The stroke that connects the bowl and the loop of a lowercase G
- 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 a stroke
- Shoulder : The curved stroke that is not part of a bowl
- Spine : The curved stem of the S
- Spur : The extension of the articulates the junction of the curved and rectilinear stroke
- Stem : The significant vertical or oblique stroke
- Stress: The orientation of the letterform, indicated by the thin stroke in round forms
- Swash : The flourish that extends the stroke of the letterform
- Tail : The curved diagonal stroke at the finish of certain letterforms
- Terminal : The self-contained finish of a stroke without a serif
The Font
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.5.2 Small Caps (13/10/2025) |
Uppercase Numerals : Also called lining figures, there numerals are the same
height as uppercase letters and are all set to the same kerning width
|
| Fig 1.5.3 Uppercase Numerals (13/10/2025) |
Lowercase Numerals : Also known as old style figures or text figures, these
numerals are set to x-height with ascenders and descenders.
|
| Fig 1.5.3 Uppercase Numerals (13/10/2025) |
Italic : Most fonts today are produced with a matching italic. Small caps, however, are almost always only roman.
|
| Fig 1.5.3 Italic (13/10/2025) |
Punctuation, Miscellaneous Characters : Although all fonts contain standard
punctuation marks, miscellaneous characters can change from typeface to
typeface.
|
| Fig 1.5.4 Punctuation, Miscellaneous Characters (13/10/2025) |
Ornaments : Used as flourishes in invitations or certificates/ Usually
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.
|
| Fig 1.5.5 Ornaments (13/10/2025) |
Describing Typefaces
- Roman : The letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke is called 'Book'.
- Italic : Named for fifteenth century Italian handwriting on which the forms are based. Oblique conversely are based on roman form of typeface.
- Boldface : Characterized by a thicker stroke than a roman form. The name can vary depending on the thickness, such as semi-bold, medium, black, extra bold, super, etc.
- Light : A lighter stroke than the roman form. Even lighter strokes are called 'thin'
- Condense : A version of the roman form, and extremely condense styles are often called 'compressed'
- Extended : An extended variation of a roman font
|
| Fig 1.5.6 Describing Typefaces (13/10/2025) |
|
| Fig 1.5.7 Comparing Typefaces (13/10/2025) |
INSTRUCTIONS
https://drive.google.com/file/d/1ysds9E9E5l-naUpNJkhBeoFZHE9yJWW0/view?usp=sharing
TASK
Task 1 - Exercise 1 : Type Expression
In task 1, Mr Max gave us 6 words (pull, drip, scratch, kick, step,
float) to make into type expression. We were told to choose 4 out of 6
words and create 3 sketches for each word. The words that I chose are
float, step, drip, and scratch.
First, I start by looking up references on google and pinterest.
|
| Fig 2.1.1 References (26/09/2025) |
After that, I started sketching the ideas using IbisPaintX on my
tablet. I made 12 sketches for the 4 words that I chose.
|
| Fig 2.1.2 Sketch (27/09/2025) |
1. Float : for float, I imagined a very simple design which are the
words are floating on their own, the letters o and a as balloons, and
a boat since boats float on water.
2. Step : I chose to do step as in stairs, so I made the words forming
levels and made the letter E into a staircase, also I made the letter
S step on 'te' to mimic a pressure when we step on things.
3. Drip : the first design I made is inspired by a faucet dripping,
the second is inspired by a burning candle, the last one is more like
a wet paint that is still dripping.
4. Scratch : for scratch, I made small cuts on each letter, the second
was inspired by animal scratch marks that ripped the word into 3
parts, the last one is inspired by a wired fence
Mr. max chose sketch 3 for float, combine sketch 1 and 3 for scratch,
and explore more on the step and drip sketches. Here is the new sketch
for step and drip.
|
| Fig 2.1.3 Sketch (03/10/2025) |
After getting the approval, I moved the sketches into Adobe
Illustrator and started digitalizing the sketch. For the
digitalization, I used the text tool, the pen tool to make the
details, the selection tool, and the direct selection tool to edit the
shape of the words. Here are the digitalized sketches.
|
| Fig 2.1.4 Digitalization (10/10/2025) |
https://drive.google.com/file/d/1Ki0QbI6VcqLP4ut05BGtQIQgnwjhvnxK/view?usp=drive_link
The next step is to make the type expression into a GIF or a short
looping animation. I decided to make an animation from the word
'Float'. My idea is to make the word float around similar like a boat
on the sea. First, I made the frames on Adobe Illustration and started
moving the words around. I ended up making 14 artboards for the
animation.
|
| Fig 2.2.1 Artboards (13/10/2025) |
After making the frames, I exported in into my computer. Then, I
opened Photoshop to make the animation. In photoshop, I put in the
frames from AI and started moving the layers so the first layer is on
the bottom and the 14th layer is on the top. After that, I clicked on
create frames from layers and adjust the time for each frame.
|
| Fig 2.2.2 Frame Animation (13/10/2025) |
After deciding the time, I checked on how the animation looked. Then I
exported the animation (GIF) into my device and moved it into drive.
Here are the files.
|
| Fig 2.2.2 Animation (13/10/2025) |
Task 1 - Exercise 2 : Text Formatting
Exercise 2 focuses on text formatting, especially leading, kerning,
and tracking. In this task, we were asked to write our names with the
10 fonts given and edit the kerning. Here are the results before
kerning and after kerning.
|
| Fig 2.3.1 Before Kerning (17/10/2025) |
.jpg)
|
| Fig 2.3.2 After Kerning (17/10/2025) |
For the next task, we were asked to make 8 different layouts for a text
called "Transform the World : The Unsung Architects of Modern Life"
using In Design. I started editing the paragraphs, kerning, tracking,
and leading. Then I added a picture to complete the design
|
| Fig 2.3.4 8 Layouts (23/10/2025) |
From the
8 layouts, Mr Max chose layout 4, but there are a few things that
needs to be fixed. He says to fix
the spacing for the heading, body paragraph, and image. Then, I need
to reposition the image so it fits perfectly and not show a border.
Here are the final results.
|
| Fig 2.3.5 Final Layout Grid (24/10/2025) |
|
| Fig 2.3.6 Final Layout (24/10/2025) |
PDF:
Head
- Font/s: ITC Garamond Std
- Type Size/s: Transform the world : 30 pt ; The Unsung
Architects of Modern Life : 48 pt
- Leading: 45 pt
- Paragraph spacing: 0
Body
- Font/s: Bembo Std
- Type Size/s: 11 pt
- Leading: 14 pt
- Paragraph spacing: 14 pt
- Characters per-line: 50-60 characters
- Alignment: Justify with last line aligned left
Page Margins:
- top + left + right + bottom : 12,7 mm for every side
- Columns : 2
- Gutter : 4,233 mm
FEEDBACK
Week 1
General Feedback: Setting up the e-portfolio, make sure to
watch the lecture videos and write the summary, start looking for
inspiration for the assignment next week. Provide the e-portfolio link
on the google sheet.
Week 2
Specific Feedback: the sketches are pretty good but
need to explore more for the drip and step. For the float, can add
some wave effects and for the scratch, can combine sketch 1 and 2
General Feedback: Today we learned how to use Adobe
Illustrator and how to digitalize the typography sketches using AI
Week 3
General Feedback: A tutorial on how to export the files
into PDF and JPEG, also a tutorial on how to make the animation on
AI and Photoshop. Also a reminder to finish the digitalization of
the sketches until class is over.
Specific Feedback: edit the word drip to make it look more
like the fonts and can add a waterdrop for the letter I
Week 4
General Feedback: A tutorial on how to use In design. He
taught us how to do leading, kerning, and tracking in ID with using
our names written in the 10 fonts downloaded before. Also an
explanation regarding the next task, which is making 8
layouts.
Specific Feedback: I made 2 animations and he chose
the 1st one because it expressed float better.
Week 5
General Feedback: A reminder to finish the layout task
because the submission is on Sunday and to send Mr Max the layouts
for him to check.
Specific Feedback: Mr Max chose layout 4, but there are a
few things to consider. First is the spacing from all sides of the
headlines, body text paragraph, and pictures. Second is the
borderline on the picture that makes it look imbalanced, so I need
to reposition the picture or change it.
REFLECTION
Experience
It was very overwhelming when I first started typography because I
have never used any of the apps and websites mentioned before. I was
pretty stressed when doing the work and especially when using
photoshop because it kept crashing for some reason when doing the
animation. However, as time went on, I started to get the hang of it.
The consultation period on each class is also very helpful and I
learned a lot with my friends as well.
Observations
Comparing with the other classes, I think typography is the most
detailed and serious class this semester because we need to update our
feedback sheet and portfolio weekly. We were given approximately 1
task to do each week and we need to put the progress in the portfolio
by the end of the week to track the progress. It is quite overwhelming
at first, but I got used to it.
Findings
What I got from task 1 is that typography can play a huge role in
expressing certain words. Type expression can play a huge role in logo
making because it can help describe the word without using any type of
written explanation. Other than that, text formatting also plays a
huge role when editing text layouts because it can affect the
readability of the text. If it is done incorrectly, it can affect the
readability and can cause confusion for the readers.
FURTHER READING
|
| Fig 4.1.1 Book Cover (03/10/2025) |
For the further reading, I chose the book "Typographic Design:
Form and Communication" -WILEY (Rob Carter, Sandra Maxa, Mark
Sanders, Philip B. Meggs, Ben Day). The part that I read was
called optical relationship within a font. This part explains
that optical adjustment is necessary to achieve visual harmony
within a font since mechanical and mathematical letterform
construction can result in serious spatial problems. Divers
forms within an alphabet often appear optically incorrect. Some
adjustments to the font are very subtle and are often
imperceptible to the reader. However, the effects are more
ordered and harmonious in appearance.
The next part that I read was called unity of design in the type
font. That part explains that tremendous diversity of form exists
in the typographic font. 26 capitals, 26 lowercase letters, 10
numerals, punctuation, and other graphic elements must be
integrated into a system that can be successfully combined into
innumerable words.
Comments
Post a Comment