Typography - Task 1: Exercises
- >
23/09/2024-26/10/2024( Week 1 - Week 5)
TANG LILIN (0376668)
Bachelor OF DESIGN (HONERS) IN CREATIVE MEDIA || TYPOGRAPHY
Typography
Task 1 - Exercise
LIST
Week 1 Typo_0_Introduction & Typo_1_Development
For first week's lecture , Mr. Vinod taught us about the introduction and
the development of typography.
- Typography Introduction
Typography deemed the act of visual manner creating letters. It is the
creation of typefaces or type families. It can be used in animation, movie
title, UI/UX, signage design, and most importantly, used in website
design. Typography as a subject in a module is a fundamental aspect in any
design. It also can be used in other areas. For the importance of
typography ,it has to be mentioned the story about Steve Jobs who created
the Apple Mac Typography System. In his college, he dropped out of his
programme and dropped in Calligraphy. Because of calligraphy, he created
unique typography.
What is TYPOGRAPHY?
Typography is the art and technique of arranging type to make written
language legible, readable and appealing when displayed.
Typography has evolved over 500 years:
Revolution : Calligraphy > Lettering > Typography
Calligraphy--->writing style
Lettering --->draw out the circumference of the letter
Typography--->type out on computer and print it out
Typography makes the design more readable and legible . We can use it
affect what we want to design.
Differences between Fonts & Typeface
Font: individual font or weight within the typeface
Typeface: entire family of fonts that share similar style.
Fig 2.1 Example of TYPEFACE&FONTS (10 fonts that be given)
- Typography History - Phoenician to Roman
Initially writing scratch into wet clay with sharpened stick or carving
into stone with a chisel.
Forms of uppercase letter forms can be seen combined with straight
lines and pieces of circles.
Greeks change the direction of writing into reading or writing text
alternately from right to left and left to right.
|
| Fig 2.2 Direction of Reading After Changing |
Square capitals which found in Roman monuments have serifs added
to finish of the main strokes using reed pen held at an angle of
approximately 60 off the perpendicular. Later, rustic capitals was
created. It was a compressed version of Square capitals, and allowed to
write more words spending much less time.For faster writing, the
lowercase letterform came out. Lowercase letters were created because
people wanted to write faster.
Uncials incorporated the shape of the A, D, E, H, M, U and Q. It
did not have uppercase or lowercase , it integrates with some aspects in
writing system.What's more, half-uncials mark the formal beginning of
lowercase letterforms, which is a plump font.
Because of Charlemagne, the text was rewritten and standardized by monks
, establish the foundation of calligraphy for a century. It can convey
messages more accurate and precisely.
Blackletter to Gutenberg's type
After the dissolution of Charlemagne's empire, there emerged a condense
strongly vertical letterform known as Blackletter.
Gutenberg developed a mechanism that printing can be done very quickly.
What's more , in this style , monks scribed their religious scripts will
be faster than before. In that cases , more people can get the bibles
soon.
|
| Fig 2.3 Some Typefaces mentioned in the lecture and revolution of Letter A |
- Timeline
Afterwards, Mr. Vinod introduced us to the typography timeline
19th century types-> The first square serifs->Early
twentieth-century sans serif (1923 Bauhaus, Moholy-Nagy, 1959
Muller-Brockman)
Typeforms have developed in reponse to prevailing technology, commercial
needs, and esthetic trends.
Week 2 Typo_3_Text P1
Kerning refers to the adjustment of space between letters.
Tracking refers to the additional adjustment.
We need adjust the space between letters and texts according to the
certain circumstances and the meaning of the texts.
Normal tracking
Loose tracking that make the letters in a word separate from each other,
decreasing the readability
Tight tracking that make the letters in a word so tight that can
not read clearly.
There is a strong resistance with the type community to letter space
lowercase letters within texts. because lowercase letterforms require the
counter form to maintain the line of reading.When adding the letter
spacing that will breaking the counter forms, and reduces the
readability.
|
| Fig. 2.4. Kerning&Tracking |
Formatting Text
Flush left : It mirrors the asymmetrical experience of handwriting. In
flush left alignment, there always have jagged edge on the right , we must
make this edge looks smoothly.
Centering alignment : It imposes symmetry upon the text .Sometimes, it is
difficult to read.
Flush right : It places emphasis on the end of a line as opposed to its
start. We can use this format to combine the pictures and text
naturally.
Justified format imposes a symmetrical shape on the text. No jagged edge
on both sides, it looks smoothly.
If you see the type before you see the words, change the type.
Texture
When doing alignment of words or text , we may influenced by those
factors:personal preference , current trends and what we want to express.
We need to choose the logical fonts to fit the meaning or effect we want
to express. The most important thing is different typefaces shows the
different meaning in the same words or texts.
Leading and Line Length
Type size: It should bu large enough to be read easily at arms
length.
Leading: Tight yexy encourages vertical eye movement.
Line Length: A good rule of thumb is to keep line length between 55-65
characters.
Type Specimen Book
It is provide an accurate reference for type, type size, type leading,
type line length etc.
Week 3 Typo_3_Text P2
Indicating Paragraph
Pilcrow is a symbol that is available in most typefaces, and be used in
text to indicate paragraph spacing.
Line Spacing (Leading)
Rule:
a): Line space is 12, paragraph space is equal to 12, due
to ensure that the text columns are cross aligned.
b): Line space is 2.5 - 3 points larger than the point size
(typeface space)
About typeface point, leading, paragraph spacing
For instance, If typeface point is 10, and we assume the leading is 12,
then paragraph spacing is 12, due to maintain cross alignment.
Line Space vs Leading
Line Space = Bread + Jelly(Leading)
Leading is just Jelly.
Standard Indention
Rule: Intent point = line spacing = point size
Indention is used to justified the ragging on the left or right.
Widows and Orphans
A short line settle left alone at the end / start of a column text. We
should avoid these circumstances happen in the text.
Highlighting Text
Ways to highlight the text:
a): Using italics
b): Changing color of the text
c): Making it bold or Medium
d): Change the typeface family
e): Create a box around the text
f): Using the quotation marks
Headline
A head indicates a clear break between the topics within a section.
We need to stratify the headlines and distinguish between main headlines
and sub-headlines.
- A head : It indicates a clear break between topic within a section
- B head : It is subordinate to A head. It indicates a new supporting argument or example for the topic at hand.
- C head : not common, highlights specific facets of materials within B head text.
|
| Fig 2.5 Some Images For the Lecture |
Week 4 Typo_2_Basic
|
| Fig 2.6 Image for the lecture |
- Baseline: The invisible line on which all characters sit.
- Cap-height: The height of uppercase letters from the baseline to the top of the letter.
- X-height: The height of lowercase letters from the baseline to the top of the letters, excluding ascenders and descenders.
- Ascender: The part of a lowercase letter that extends above the x-height.
- Descender: The part of a lowercase letter that extends below the baseline.
|
| Fig 2.7 the letterforms |
The letterforms:
- Stroke: Any lines defines the basic letterform
- Apex/Vertex: the point created by joining two diagonal stems
- Arm: short strokes off the stem of the letterform.
- Ascender: the portion of the stem of a lowercase letterform that projects above 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.
- 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.(in the lowercase letter "f""t")
- 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 stoke extending out from the main stem or body of the letterform.("g")
- Em/En: An En is half of size of an Em when they are in the same size. Most often used to describe em/en spaces and em/en dashes.
- Finial:the rounded non-serif terminal to a stroke.
- Leg:short stroke off the stem of the letterform(in the lowercase letterform"L""R""K")
- 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 the descender of the lowercase "g"
- Serif: the right-angled or oblique foot at the end of the stroke.
- Stem: The significant vertical or oblique stroke.
- Spur: Extension the articulates the junction of the curved and rectilinear stroke.
- Spine: the curved stem of the S.
- Stress: the orientation of the letterform, indicated by the thin stroke in round forms.
- Swash: the flourish that extends the stroke of the letterforms.( mostly used in wedding invitation)
- Tail: The curved diagonal stroke at the finish of certain letterforms.
- Terminal: the self-contained finish of a stroke without a serif.
The Fonts:
- Uppercase: Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.
- Lowercase: same as uppercase.
- Small Capital (Expert Sets):uppercase letterforms draw to the x-height of the typeface.
- Uppercase Numerals(Lining Figures): same height as uppercase letters, same kerning width.
- Lowercase Numerals (Old Style Figures/Text Figures): set to x-height with ascenders and descenders.
- Italic: Oblique are typically based on the roman form of the typeface.
- Punctuation, miscellaneous characters
- Ornaments: used as flourishes in invitations or certificates.
Typefaces
- Roman & Italic
- Blodface & Light
- Book & Semibold
- Condense & Extened
INSTRUCTION
EXERCISE
EXERICSE 1 - TYPE EXPRESSION
In this exercise, we need to create type expressions for four words. We
chose four words in class: SPICY SMOKE BLOOM FANCY.
Then choose the best looking type expression to make an animation
The Sketches
|
| Fig 4.1 Sketch 1 |
- SMOKE 1: I wanted to associate the word smoke with tobacco, so I designed the letters to look like they were made of tobacco.
- SMOKE 2:I wanted the letters in the word to form rising smoke, and each letter to look like smoke. The middle letter O was made to look like a smoke ring.
- SMOKE 3:I want to make many smoke words into a rising smoke shape. The words have different thicknesses and sizes. The words are small at the beginning and end of the smoke, and the words are sparse and large in the curved part of the smoke.
- SMOKE 4:I want to make the words feel like they are disappearing.
|
| Fig 4.2 Sketch 2 |
- SPICY 1:I wanted to make the shape of the word look like eating chili peppers and feeling hot. So the letters S and Y at the beginning and end are super large. The letter I in the middle is very small. The letter C is designed to be in the shape of a chili pepper, and is hollowed out, leaving only the outer contour.
- SPICY 2:I thought the word Spicy was heavy, so I added a shadow. I added a little flame to each letter, as if it was burning. For the letter I, I changed the dot above to a pepper shape.
- SPICY 3:I designed the top part of each letter into a flame shape, and the other parts into irregular flame outlines.
- SPICY 4:I lengthened the stroke of the letter S to make it into the shape of a pepper, and the rest of the letters surround the pepper. The left side is designed to look like sweating after eating peppers.
|
| Fig 4.3 Sketch 3 |
- FANCY 1:I used brush fonts to express the meaning of fancy, and added some bouncing and flourishing to form a heart element.
- FANCY 2:In this design, a lot of love elements are added to make the whole word look delicate and reflect the meaning of the word fancy.
- FANCY 3:The whole word is designed to be in the shape of a heart, and the words inside are irregularly arranged to fit the shape of the heart. The letters look fat. The strokes of the letter N are changed to form the tip of the heart. The strokes of the letter A are replaced with small hearts.
- FANCY 4:The letters in the whole word are short and fat, and the letter N is replaced by a heart. The letter Y is designed to look like a wine glass to reflect the meaning of fancy.
|
| Fig 4.4 Sketch 4 |
- BLOOM 1: I stretched the strokes of the letter B to make the antennae of the butterfly, and stretched the strokes of the letter L to make a vine, ending with a leaf at the end. Both letters O are designed to look like flowers with four petals.
- BLOOM 2:Use the brush font and connect the letters together to form an arc shape to express the meaning of bloom.
- BLOOM 3:The letters of the word are bolded. The stroke of the letter L is extended to the end of the word, and the middle of the two letters O is hollowed out to form a flower shape.
- BLOOM 4:Use the brush font to connect the letters together and use the shape of each letter to form a flower.
the Final Type Expression
|
| Fig 4.5 Final Expression |
- SMOKE:I want to design the word smoke to look like a burning cigarette. The cigarette part is composed of two smoke words. To better fit the appearance of a cigarette, keep the first three letters at 100% transparency and reduce the transparency of other letters by 30%. Add shadows to make the subject look more layered. The smoke produced by burning is composed of many small smoke words. Use transparency to create a light and dark relationship to reflect the looming smoke.
- FANCY: Enlarge and tilt the letter F to make it look like a parasol on the beach. Slightly adjust the angle of the letters A, N, C. Design the letter Y to look like a drink. Use the Line Tool to make a straw. Use the Pen Tool to outline the drink. Add a short horizontal line under the letter Y to form a cup.
- BLOOM 1: Regarding the letter B, I copied several letters B with different shades of gray to add shadows to the main B to reflect the meaning of bloom. I stretched the stroke of the letter L to the end of the word.
- BLOOM 2:The whole word is arranged in an arc shape, and four O's are used to form a flower to express the meaning of Bloom.
- SPICY :Create this spicy expression based on the previous sketch. The letter c has no fill, only a stroke. Add a small letter I to form a chili pepper shape.
Fig 4.6 Final words expression - PDF
ABOUT THE ANIMATION
|
| Fig 4.7 About the Animation 1 |
The first version was to use the letters O to arrange around the center
point to create a blooming animation. But Ms.Vitiyaa gave me feedback that
this did not meet the requirements. Because there are only two letters O
in the word BLOOM, and my animation uses 8 Os, so this is not
allowed.
Then I changed my design.
|
| Fig 4.8 About the Animation 2 |
So I continued with the previous design, using the letters O to arrange
around the center point to create a blooming animation. Then the flowers
fell one by one, and finally only two letters O remained to form the word
BLOOM.
the Final Animation
|
| Fig 4.9 Final Animation |
Later, Ms. Vitiyaa looked at my design and gave me feedback that the
effect might be better if the letter O in the animation had different
shades. So I adjusted the light and dark depths in the entire animation.
The letters B, L, and M that fell in sequence at the beginning of the
animation were particularly light at the beginning, and then darkened to
normal after falling. The depth of the flower composed of the letters O
was adjusted, and the petals formed the flower from light to dark. When
only two letters O were left, the depth of the two letters O was
swapped, and then darkened to normal. Finally, the whole animation ended
with adding shadows to the words.
Fig 4.10 GIF of the
final animation
EXERCISE 2 - TEXT FORMATTING
In this exercise, we need to watch four videos and complete four
tasks.
|
| Fig 4.11 Kerning & Tracking 1 |
To be honest, after watching the video, I was confused about how to do
kerning & tracking. I only adjusted the distance between each letter
to make the distance equal or more comfortable. But I didn't consider the
overall effect.
Also, I didn’t know how to choose fonts at first, so the fonts I chose
were all the same, and the results were also very similar.
|
| Fig 4.12 Kerning & Tracking 2 |
Later, I read more about kerning and tracking. I chose to choose some
unique fonts from typefaces as much as possible. I used different degrees
of kerning and tracking to create different effects, making it more vivid
and interesting.
|
| Fig 4.14 Kerning & Letter Spacing Text formatting |
After constant revisions, my final text formatting looks like this. According to Ms. Vitiyaa's feedback, I know that golden ratio is needed in text formatting, so I used the golden ratio template for all the layouts. I want the whole picture to look simple and powerful. During the adjustment process, I often have headaches because of widows and orphans. After continuous efforts, they did not appear in my text.
Among my six layouts, I like the second and fifth the most. Finally, I
chose the fifth as my final layout.I think the fifth layout is a clever
use of the golden ratio layout.
|
| Fig 4.15 the Final Text formatting |
HEAD LINE
Typeface: Janson Text LT Std
Font/s: 55 Roman
Type Size/s: 48 pt
Leading: 24 pt
Paragraph spacing: 0
BODY
Typeface: Bembo Std
Font/s: Bembo Std Regular
Type Size/s: 10 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 57
Alignment: left justified
Alignment: left justified
Margins: 127 mm top, 75.4 mm left + right + bottom
Columns: 2
Gutter: 10 mm
Fig 4.16 PDF Final text formatting (grid / without
grid)
|
|
|
UPDATES( 21/11/2024 )
|
| Fig 4.18 Updated text formatting 1 |
HEAD LINE
Typeface: Futura Std
Font/s: Bold
Type Size/s: 26 pt / 67 pt
Leading: 26 pt
Paragraph
spacing: 0
BODY
Typeface: Bembo Std
Font/s: Bembo Std Regular
Type Size/s: 11 pt
Leading: 13 pt
Paragraph spacing: 13 pt
Characters per-line: 50
Alignment: left justified
Alignment: left justified
Margins: 123 mm top, 72mm left + right + bottom
Columns:
2
Gutter: 12mm
Fig 4.19 PDF Updated text formatting 1
Fig 4.20 PDF Updated text formatting 1(grid)
|
| Fig 4.21 updated text formatting 1(grid) |
|
| Fig 4.22 updated text formatting 2 |
HEAD LINE
Typeface: Futura Std
Font/s: Medium / Bold
Type Size/s: 26 pt / 67 pt
Leading: 26 pt
Paragraph
spacing: 0
BODY
Typeface: Bembo Std
Font/s: Bembo Std Regular
Type Size/s: 11 pt
Leading: 13 pt
Paragraph spacing: 13 pt
Characters per-line: 50
Alignment: left justified
Alignment: left justified
Margins: 123 mm top, 72mm left + right + bottom
Columns: 2
Gutter:
12mm
Fig 4.23 PDF Updated text formatting 2
Fig 4.24 PDF Updated text formatting 2(grid)
|
|
|
FEEDBACK
Specific Feedback: Making the words expression helps us understanding the letter design . With the practice, become familiar with the various functions of AI . I realized that design need to be alter over and over again.
Specific Feedback: In my words expression of SPICY, I used different fonts. I need fix it up. Also, I need to further improve my E-portfolio.
Week 1
General Feedback: In the first week , Ms.Vitiyaa briefs us
about the Typography Module and Tasks we need to do for this semester.
Also, Ms.Vitiyaa taught us about the rules in the class and some
advices for this course. What's more , we elected four words to do
letter expression and composition. The words are: SPICY, SMOKE, FANCY,
BLOOM.
Specific Feedback: In the course of Typography, we need the capacity of creative thinking and the skill of Photoshop and Illustrator to do some amazing design to express our ideas. Also , we need to promote and develop self-study ability, so we can receive more expertise to improve our skills.
Week 2
General Feedback：In this lesson, Ms.VItiyaa checked out our
sketches and gave us feedback. And we alter our designs making it
better.
Specific Feedback: Making the words expression helps us understanding the letter design . With the practice, become familiar with the various functions of AI . I realized that design need to be alter over and over again.
Week 3
General Feedback: Ms.Vitiyaa helped us with some instructions in AI, Creating Outlines, Grouping.
Specific Feedback: I am more familiar with the basic functions and shortcut keys of AI.
Week 4
General Feedback: In this class, Ms. Vitiyaa gave us some
feedback about the final words expression that we post on the
Facebook. First, we are not allowed to use the fonts that not be
given. Second, we can not use different fonts in one expression. We
need to constantly update our design and E-portfolio.
Specific Feedback: In my words expression of SPICY, I used different fonts. I need fix it up. Also, I need to further improve my E-portfolio.
Week 5
General Feedback: Ms. Vitiyaa gave us feedback on last
week's assignment and told us that we should follow the golden ratio
principle when doing text formatting and try to put all elements in
the page in the golden section. This will result in a good
design.
Specific Feedback: I realized that the designs I made
before were just for the sake of looking good, and I didn’t consider
how to layout based on design principles. I think I should read more
about design principles and theories.
REFLECTION
Understand that the reading direction of readers is Z-shaped, and design the layout according to it. This will help us better distinguish the primary and secondary relationships of the picture and better place the focal point in a reasonable position
When designing, we should first consider the size and proportion of the page. When designing, follow the golden ratio principle and try to put the text in the golden section.
Experience:
This is the first time I have done a typography task in the first
semester. To be honest, it is quite difficult to learn.
After a few weeks of study, I really feel that typography is an
essential course and part of design. It is used in many areas and is
implemented in all aspects of life. Exercise 1 will be more design and
creative, but there are many restrictions, which makes the whole work
more difficult. But this also makes the whole design more concise and
generous.According to the weekly tasks, I understand the steps of
overall design. First, determine the design theme, then, conceive a
sketch without violating the restrictions. The sketch can be wild and
unrestrained. Then, digitize the sketch using software. Then choose the
best version of the design to make an animation. In the process of
making the animation. Maybe not many software functions are used, but
good ideas are needed. Regarding exercise 2, it is more complicated to
make than exercise 1. It seems that there are no restrictions, but there
are many theoretical knowledge we need to understand and design
principles to follow.When doing the two exercises, you will feel that it
is more difficult, but when you actually complete the work, you will
experience the charm of typography, which is attractive and requires
patience.
Observations:
After studying for a few weeks, I found that the learning mode is to
read a lot of books about the course, watch videos, understand the
knowledge and principles, and communicate with the professor in class
about what I don’t understand. The professor gives feedback in class and
I change my design. In addition, there is a lot of knowledge to learn in
the subject of typography, which requires a lot of patience.
Findings:
As a designer, we need to constantly adjust the design ideas and
plans.
There will be deviations in this process. You will find that some
designs that can be realized on the sketch cannot be realized in the
digitization process. However, when I was doing my type expression
animation , when I design the subsequent animation steps, I may
change the previous design. Because I didn’t consider the steps or the
position of this letter clearly when I made it before, I need to make it
again. So I know need to first consider the overall structure and the
order of the animation, and the combination of static and dynamic.When I
finished exercise 2, I found that I had little understanding of columns
and gutters, which led to me often having to spend a lot of effort to
adjust widows and orphans when importing text into the page. So I
learned that we need to adjust the gutters according to the text. And in
order to make a better design, we need to better understand the text
content, find reasonable matching pictures, and use formatting suitable
for the text to convey the information the text wants to express.
FURTHER READING
In the lecture, Mr.Vinod suggested us to read books on Typography
because this course acquires more knowledge from books and
practice on your own. Among the given books I chose
A Typo Primer that can helps me to understand the lecture
better and Typographic-System and
Typography Referenced which can helps me to know more about
Typography .
In the book of Typographic-System, there are 8
visual organization system to gives me an in-depth knowledge of the
design process.
|
| Fig 7.1 Typographic-System Introduction (5-14) |
- Axial System: All elements are organized either to right or left of a single axis.
- Radial System: All elements extend from a point of focus.
- Dilatational System: All elements expand from a central point in a circular fashion.
- Random System: Elements appear to have no specific pattern or relationship.
- Grid System: A system of vertical and horizonal divisions.
- Transitional System: An informal system of layered banding.
- Modular System: A series of non-objective elements that are constructed as standardized units.
- Blateral System: All text is arranged symmetrically on a single axis.
The Circle and Composition: Aligning the circle with lines gives a
sense of organization.
|
|
Fig 7.2 Typographic-System Introduction&Axial System (17-33 pp) |
Axial System Design to the left and right of a
single axis
In this part, it introduced what axial system is and gives several
layouts that used this system. in the list of methods to construct
radial layout, I think the most interesting methods are Explicit
Shaped Axis and Implied Shaped Axis. It adds a sense of flexibility and creativity to the layout, making
the originally boring radial layout full of vitality.
|
| Fig 7.3 A Type Primer Placing text on a page (126-128 pp) |
In the era of medieval illustration books, there was born a layout
based on the golden ratio, which took up only 40% of the page.But as
times changed and the printing press was born, this principle
gradually ceased to apply.To meet the new demands of the times,
printers combined old principles with readability to produce new ones.
Margins were designed to allow readers to read without obscuring the
text by holding the book in their hands.
|
| Fig 7.4 Typography Referenced Reading Direction and Scanning (214-218 pp) |
Understand that the reading direction of readers is Z-shaped, and design the layout according to it. This will help us better distinguish the primary and secondary relationships of the picture and better place the focal point in a reasonable position
|
| Fig 7.5 Typography Referenced Format (210-211 pp) |
When designing, we should first consider the size and proportion of the page. When designing, follow the golden ratio principle and try to put the text in the golden section.
Comments
Post a Comment