Typography | Task 1: Exercises
-26/09/2025 - 31/10/2025/(Week 1 - Week 6)
-Takeguchi Shunta/0386416/Bachelor of Design in Creative Media
-Typography
-Task 1: Exercises
TABLE OF CONTENTS
LECTURES
Lecture 0: Typography Introduction
Summary
-Typography is a fundamental skill set of design
-Typography is the act of creating letters
-Typography can be animation, web design, app design, book, poster,
logotype, etc
-Reading books about typography helps understand it
-In 500 years, calligraphy became lettering and lettering became
typography
-Calligraphy is writing letters
-Lettering is drawing the circumferences of letters
-Understanding the process to make good typography is crucial
-Design is an interactive process
-Typography also teaches how to present yourself, information, and
communicate effectively
-Typography definition: the style and appearance of printed matter,
according to the Oxford dictionary
-Font refers to the individual font or weight within the
typeface(Georgia Regular, Georgia Italic, and Georgia Bold)
-Typeface refers to the entire family of fonts/weights that share
similar characteristics/styles(Georgia, Arial, Courier)
Additional Study Links
-Early evolution of Roman letters by Allan Haley(https://www.myfonts.com/pages/fontscom-learning-fontology-level-1-type-history-early-evolution-of-roman-letters-1)
This article explains the evolution of Roman capital letters,
making them useful for everyday communication, and introduces
three distinct styles of handwriting: Square Capitals, Rustic
Capitals, and Roman Cursive. Each handwriting styles were
developed for a different purpose by different people.
-First Alphabets by Allan Haley(https://www.myfonts.com/pages/fontscom-learning-fontology-level-1-type-history-first-alphabets)
While the former article focused on the evolution of the Roman
capital letter, this article explains the letters used by various
civilizations and their evolution.
Lecture 1: Development
Summary
-Initially, writing meant scratching into wet clay with a sharpened
stick or carving into stone with a chisel
-The tools used to write have a big influence on the written
letters
-Modern Latin and Arabic letters originated from the Phoenician
alphabet
Evolution from the Phoenician letter
-The Greeks developed a style of writing called 'boustrophedon'
-Square capitals: have serifs added to the finish of the main stroke,
and some had rustic capitals to write faster and easier, which can be
found in Roman monuments
-Uncials are integrated in uppercase and lowercase into writing and
are more readable at a small size
-Charlemagne, the first unifier of Europe, issued an edict using both
majuscules, minuscules, capitalization, and punctuation, which can be
seen in today's world
-Gutenberg developed the printing system; therefore, documenting
information can be done more quickly
Text type classification by Alexander Lawson
Lecture 3: Typography rules
Summary
-Kerning: the automatic adjustment of the space between
letters
-Letter-spacing: to add space between the letters
-Tracking: the addition and removal of space in a word or
sentence
-Most typefaces are not designed for uppercase use
-We don't read text as individual letters, so loose letter-spacing
makes readability less
-Uppercase letterforms are designed to be able to stand on their
own
-Lowercase letterforms require counter-forms created between
letters to maintain the line of reading, so it is not recommended
to use letter-spacing or kerning for lowercase letterforms
-Centered and flush right is recommended to be used for short text.
example: caption of image, axial layout(only for flush right)
-Justified is achieved by expanding or reducing spaces between
words
-Rivers: the white space running vertically through the justified
text, use good hyphenation and line breaks to avoid
Flush left, Flush right, Justified, Centered Text
(Image source: https://rachellouiseh.wordpress.com/2012/10/21/typography-3/)
-Leading: space between each line of text
-Gray value: the overall lightness or darkness of a block of text
when viewed from a distance. If it's dark, not enough leading or
kerning is needed; if it's light, too much leading or adjust the
kerning
-Type that calls attention to itself before the reader can get to
the actual words is simply interference
-Type with a relatively generous x-height or a relatively heavy
stroke width produces a darker mass on the page, and vice versa
-High x-height means more readability
Anatomy of a typeface
-Type size should be large enough to be read easily at arm's
length distance
-If leading is set too tightly, it encourages vertical eye
movement; a reader can easily lose their place
-Leading should be plus two or three points to the
typeface
-A good rule of thumb is to keep line length between 55 - 65
characters
-Well-formatted text has a middle gray value
Lecture 4: Typography rules2
Summary
-Pilcrow(¶) is a holdover from medieval manuscripts and a way
to indicate paragraphs instead of creating paragraph
space
-Cross-alignment is a structure in which the text bodies are
arranged side by side
-To have good visual cross-alignment, ensure the leading and
paragraph spacing have equal value
-Leading space: between two sentences
-Line spacing: baseline of the sentence to the descender of the
upper sentence
Leading and line spacing difference
-Indentation should be the same as the typeface size, and line
spacing
-Indentation was introduced to reduce space by not creating
paragraph space
-Indentation should be used in justified text
-Widow: short line of type left alone at the end of a column of
text
-Orphan: a short line of type left alone at the start of a new
column
-Widows and orphans should be avoided
-Solution for the widow is to rebreak line endings throughout
the paragraph, and kern the rebreaked sentence to avoid ragging
-Reducing line length might be a solution for the orphan
Widow and orphan
-Italic, bold, changing typeface, changing color, and adding
background color are used to highlight specific text
-Generally, sans-serif typefaces tend to look larger than
serif, so when changing typefamily to sans-serif, good to
reduce the point size by 0.5
-To avoid numbers from standing out, reduce the point size by
0.5 or use lowercase numbers
-There are circumstances where extending the quotation or the
special character outside the reading axis may be necessary
-Prime(′, ″) is a character for length, time, angle, and has a straight line and a slightly tilted
-Prime(′, ″) is a character for length, time, angle, and has a straight line and a slightly tilted
-Quote(‘ ’, “ ”) is a character for surrounding specific words
and has a curved line
-It is important to decide the hierarchy of information
-When cross-alignment, the text point size is different in two
bodies of text, it is able to maintain cross-alignment by
doubling the leading space to the smaller letter's leading
Lecture 2: Basic
Summary
-Understanding a letterform's component parts makes it much
easier to identify typefaces
Basic type anatomy(Image source: http://www.kupper.org.uk/graphics/anatomy-of-type/)
-Median: The imaginary line defining the x-height of
letterforms
-Stroke: Any line that defines the basic letterform
-Lowercase has a stem stroke that reaches towards the ascender
height, and the stroke is larger than the capital letters.
This difference was made to give the impression that it is of
equal height
-Bracket: The transition between the serif and the stem(T, 1)
-Crotch: The interior space where two strokes meet(K, V)
-em/en: An em is a space equal to the point size of the
typeface; an en is half of an em. Used in dash or space.
Ligature example(image source: https://www.thoughtco.com/ligature-in-typography-1078102)
Stress examples(image source: https://www.readz.com/web-fonts-and-typography)
-Swash: The flourish that extends the stroke of the letterform.
Should not use swash for capital letters to form a word
-Better to choose a typeface that has many type families
-Small capitals: Uppercase letterforms draw to the x-height of the
typeface. Used to avoid sticking out from the paragraph, especially
in acronyms
-If the typeface does not have small capitals, it can not make it to
small capitals.
Do not use a style command that generates a small capital based on
uppercase forms
-Uppercase numerals: These numerals are the same height as the
uppercase letters are all set to the same kerning width. Used in
tabular materials or in any situation that calls for uppercase
letters
-Lowercase numerals: These numerals are set to x-height with
ascenders and descenders. Lower numerals are common in serif
typefaces than in sans-serif typefaces. Used to avoid the numerals
from ticking out
-Small capitals do not have italic
-A slightly lighter stroke in Roman is known as 'book'
-Oblique: Typeface designed not based on handwriting; if so, it is
called italic
-Boldface is also called medium, black, super, and poster
-Even lighter stroke than 'light' is called thin
-Condense is also called compressed
INSTRUCTION
PROCESS WORK
1. Type Expression
The six words given in my class were Fall, Bloom, Bend, Disappear, Swipe, and Focus, and I picked four words from them: Fall, Bloom, Bend, and Swipe.
I started to sketch by searching the definition in the dictionary(All
definitions below from the Cambridge dictionary:
https://dictionary.cambridge.org/dictionary/).
Fall: to suddenly go down onto the ground or towards the ground without
intending to or by accident
to belong to a particular group, subject, or area
etc...
Bloom:
When a flower blooms, it opens or is open, and when a plant or
tree blooms, it produces flowers
to grow or develop successfully
Bend:
to(cause to) curve
to move your body or part of your body so that it is not
straight
etc...
Swipe: to hit or try to hit something, especially with a sideways
movement
to steal
etc...
After I searched the definition, I started
sketching.
It was tough and time-consuming to come up with creative ideas
during the sketching step. It really required setting aside my
preconceived ideas, looking at the word from different
perspectives, and trying out the ideas I came up with. It is easy
to make an obvious and straightforward idea, for example, the word
'fall', making each letter fall gradually downwards. But I wanted
to make creative sketches, so I tried transforming characters as
much as possible, swapping the text and background colors to
make the background black and the text white. It took a lot
of trial and error to come up with a design that was imaginative
yet recognizable at first sight. I often see logos for companies
and brands with amazing typography, but through this exercise, I
really understood how much effort and attention to detail go into
those creations.
Type expression sketch1(27 September 2025)
In the feedback on week 3, Mr. Max advised three
things
-'SWIPE' could be better if it made the slide button as the
letter P
-Need more original and lucid design for 'Bloom'
-'bend' could be better by placing multiple words on the lines
of a rounded rectangle
And there is a sketch I made after the feedback below
Type expression rework sketch(6 October 2025)
After the week 3 illustrator tutorial, I moved on to
digitalization. Since I already had some experience with
Illustrator, this step was relatively easy. However, I
struggled to make ‘bend’ look bent and to transform the
letters effectively. Through repeated fine adjustments, I
tried to create the impression that the upper letters are
stretched and spread out horizontally, while the lower letters
are shrunk and narrowed.
I created a new design for 'SEIPE' since I felt the letter P
does not so much look like P in the slide button shape(one on
the right in the screenshot below). But in the end, Mr. Max
and I chose the slide button design.
Type expression digitalization(9 October 2025)
Type expression digitalization final work(12 October 2025)
Type expression digitalization final work PDF(12 October 2025)
In the animation task, I chose the word 'SWIPE', since it would be
the simplest option to make it animated. I proceeded to create the
movement, which is the slide button in the letter 'P' being swiped
and moving from the bottom to the top.
To make the movement smooth, I created a total of nine
layers. There are three layers showing the button in
different positions: one at the bottom, one in the middle,
and one at the top. There are also three layers showing
the movement from the bottom to the middle, and the same
number showing the movement from the middle to the
top.
Type expression animation draft 1(15 October 2025)
During my consultation with Mr Max, he suggested adding the
button movement back to the bottom. I therefore copied and
pasted the layers to make the button move back down to the
bottom. As soon as I saw the reworked version, I felt that it
was much improved, as the two-way movement makes the concept
easier to understand.
I also tried to adjust the transition time to make it more
relatable to the slide button. For the second draft, I set the
time length to 0.1 seconds for the layers where the button is
at the top and bottom, and no delay for other layers. This
setting was to emphasize that the button has reached the
top or the bottom.
Animation timeline setting for draft 2(24 October
2025)
However, I found out that some of the slide buttons are using
the movement setting called 'ease-in-out'. Ease-in-out means
an animation starts slowly, speeds up in the middle, and then
slows down again at the end. It makes the movement feel more
natural and smooth, like how things move in the real world.
Slide button ease-in-out movement
(image source: https://dribbble.com/shots/2895399-simple-iOS-switch)
To put the move-in-out movement in my work, I set the time
length as shown in the screenshot below.
Layer 1(button at the bottom): 0.1s
Layer 2(button moving upwards): 0.09s
Layer 3(button moving upwards): 0.06s
Layer 4(button moving upwards): 0.03s
Layer 5(button at the middle): No delay
Layer 6(button moving upwards): 0.03s
Layer 7(button moving upwards): 0.06s
Layer 8(button moving upwards): 0.09s
Layer 9(button at the top): 0.1s
Same setting for the movement from the top to the bottom.
You can see the slight difference in comparison below.
Animation setting for ease-in-out movement(24 October
2025)
Comparison between draft 2(right) and the ease-in-out
movement(left)
(24 October 2025)
If you can not see the difference in the movement, check
the URL of the GIF below.
Draft 2: https://imgur.com/a/QuB8LOt
Ease-in-out: https://imgur.com/olf9a7p
Animation final work(24 October 2025)
2. Text formatting
Exercise 1
The first exercise in text formatting was the kerning
and letter-spacing exercise, using own name and
adjusting for each typeface. During the work, I
realized that my first name, 'Shunta', tends to make
big spaces between each letter, especially S and h, n
and t. So for all typefaces, I kerned the space
between letters to make them more natural.
Kerning and letter-spacing exercise final
draft (24 October 2025)
Exercise 2
The second exercise was designing the layout tailored
to the presented text, following the rules.
Rules
- Font size (8–12)
- Line Length (55–65/50–60 characters)
- Text Leading (2, 2.5, 3 points larger than font
size)
- Paragraph spacing (follows the leading)
- Ragging (left alignment) / Rivers (Left
Justification)
- Cross Alignment
- No Widows / Orphans
Producing creative works within these rules was a
bit tricky. I used different-sized pictures to make
each layout creative.
Exercise 2 draft 1(24 October 2025)
The hardest part was to avoid widows. One or two
widows came out in each layout after I put the text
into the layout, so I used mostly letter-spacing and
kerning to make them disappear. While I was
making adjustments, words were moved to other
columns, and sometimes the values were changed so
much that it looked unnatural. I learned that
to eliminate widows, it is necessary to try various
methods, such as changing kerning, letter-spacing,
and sometimes changing column widths, to find the
optimal solution.
I also struggled to make the ragging less. I found
align left more intriguing than justified left;
therefore, I applied it for most of the layouts in
draft 1. I used some techniques to make the ragging
less, but it was still significant. Mr. Max
suggested using justified left, so it ended up using
justified left.
Exercise 2 final draft (24 October 2025)
Mr. Max approved the reworked page eight. So it will
be my final work. For page eight, I was thinking of
the layout with three columns at first(image below).
First idea of page 8(24 October 2025)
But turned out the characters per line will be only
around 40 characters. Eventually, to solve that
problem, I made it two columns. Although. I did not
change it roughly; this layout was completed.
I would like you to pay attention to the blank space
in this piece. I was able to create a sense of
presence by placing the head and photo in an exquisite
position relative to the white space created by the
text placed in the upper left and bottom right. I tend
to divide the paragraph into three each for two
columns in the other layouts, since it will look
organized. But in this layout, I intentionally divide
the paragraph into two and four in order to create the
blank.
Formatting detail
HEAD
- Font/s: Adobe Caslon Pro Bold
- Type Size/s: 24 pt
- Leading: 24 pt
- Paragraph spacing: 0 mm
BODY
- Font/s: ITC New Baskerville Std Roman
- Type Size/s: 10 pt
- Leading: 12 pt
- Paragraph spacing: 12 pt
- Characters per line: 60
characters
- Alignment: justified left
Page Margins
- top + left + right + bottom: 17mm 14.5mm 14.5mm
17mm
- Columns: 2
- Gutter: 10mm
Exercise 2 final work JPEG(24 October 2025)
Exercise 2 final work PDF(24 October 2025)
Exercise 2 final work with grid JPEG(24 October
2025)
Exercise 2 final work with grid PDF(24 October
2025)
FEEDBACK
Week 2:
General Feedback: I learned the basic Illustrator use, how to create a
new file, use of different tools, etc...
Specific Feedback: I needed to come up more original design for
'Bloom'. And for 'swipe', the Mr. Max gave me an improvement
proposal.
Week 3:
General Feedback: I learned how to make the typography expression
work into animation by using Photoshop. Also learned how to export
Illustrator work to a PDF and JPG file.
Specific Feedback: 'bend' will be better without the round box.
'SWIPE' or 'FALL' can be the easiest to carry out an
animation.
Week 4:
General Feedback: Mr. Max gave an InDesign and task 2, Text
formatting tutorial.
Specific Feedback: 'SWIPE' animation should add more frames and
make the slide button go back to the bottom.
Week 5:
General Feedback: The e-portfolio should be submitted by this
Sunday.
Specific Feedback: Better to use justified left, if struggling to
avoid ragging. Page eight was approved for final work.
REFLECTION
Experience
Personally, I enjoy looking at magazines and websites with
sophisticated layouts, so I found the lecture content fascinating, as
it felt like I was learning, from the very basics, how they are
created. I had experience using Illustrator, but this was my
first time creating a serious piece of work, so it was helpful to have
detailed step-by-step explanations given on Teams and in
class. Regarding the type expression I used in Illustrator, I
struggled to transform the letters in organized ways(especially for
the word 'bend'). As for the InDesign exercises, I believe I was
able to learn the basics of using it, but I found it challenging to
create creative work while adhering to the rules.
Observations
What I observed through this class is that typography is very
important in visual communication. I felt this strongly through the
lectures and exercises. I am going to describe why I thought that in
the Findings section.
Findings
If asked to create posters or materials, the old me would have thought
it sufficient to simply convert information into text or illustrations
and list them out. However, now I believe the value of visuals that are
viewer-friendly and express creativity is increasing in today's
information-saturated society. While communication through dialogue is
highly valued in society, I feel visual communication should be equally
valued. This is because visual communication is clearly more explicit
and superior in convenience compared to dialogue communication.
Typography has a long history, pursuing both convenience and clarity.
The wisdom cultivated within it holds value for everyone living in
civilized society to learn. While meticulous ragging and kerning may
seem stressful, the accumulation of this work leads to providing viewers
with unconscious readability and beauty. Therefore, I intend to continue
cultivating knowledge in this class and move forward to the next
challenge.
FURTHER READING
The hidden power of typography(https://microsoft.design/articles/the-hidden-power-of-typography/)
This article explains how people react to different typography with
interesting experiments. I especially found it profound for the trick
'ark' question part. Only a typeface difference makes a 36% gap in the correct answer rate. It was a surprising outcome, and I could learn that
the lower readability typefaces may assist people in thinking deeply and
analytically, whereas higher legibility typefaces assist people in
reading and thinking fast according to their intuition. I felt that the
typography is connected to the reader's information processing and way
of thinking.
Hierarchical headings(https://practicaltypography.com/hierarchical-headings.html)
This website teaches you how you set your hierarchical headings in your
own work. The suggestion here seems a bit subjective, but it reflects
the knowledge of a professional typographer. This website introduces
many other typography hints, so as a beginner, it is very useful and
helpful.
The Vignelli Canon - Page 92 White Space
He mentions the importance of white space multiple times in this book.
On this page, he explains the role of white space.
- White space, non
only separates the different parts of the message but helps to position the message in the context of the page. Tight margins establish a tension between text, images and the edges of the page. Wider margins deflate the tension and bring about a certain level of serenity to the page. Tight type setting transforms words into lines just as loose type settings transform words in to dots.
I sense that he put the function of white space into the words really
well. We read not only the text in black, but also the white space at the
same time. We catch the impression in the contrast of black text and white
space. So I want to be careful not only text and grey value, but white
space.
Comments
Post a Comment