Advanced Typography: Task 1 Exercises
22/4/25 (Week 1-Week 4 )
SUN YUTONG (0377440)
Advanced Typography / Bachelor of Design (Honours) in Creative Media
LECTURE
LECTURE 1: AdTypo_1_Typographic Systems:
In the first lecture, Vinod introduced us to 8 types of Typography Systems:
- Axial System: All elements are arranged on the left or right side of an axis.
- Radial System: All elements extend from a focal point.
- Dilational System: All elements extend from the midpoint in a circular manner.
- Random System: Elements have no specific pattern or relationship.
-
Grid System: A system divided vertically and horizontally.
- Transition System: An information system is layered into strips.
- Modular System: A series of elements are built in the form of standard units.
- Bilateral System: All texts are arranged symmetrically on an axis.
Fig 1.1 Typography Systems (type 365.com)
LECTURE 2: AdTypo_2_Typographic Composition
In the lecture, Mr. Vinod first introduced us to the
design principles: emphasis, isolation, repetition, symmetry,
asymmetry, alignment, and perspective.
Application of the rule of thirds:
Guidelines: Intersecting lines serve as a reference for placing points of
interest in the layout.
Example: Important information is best placed at these intersections to
enhance visual appeal.
Then, Mr. Vinod introduced us to postmodernism. Postmodern design systems
include: asymmetry, randomness, repetition, expansion, and radiation
systems.
Fig 2.1
Environmental Grid is a typesetting system that explores real-world
structures. The biggest feature of this system is that the design form and
the environment are interconnected.
Form and Movement: Breaking the seriousness of its traditional
application, the turning of pages of a book or screen is regarded as a "slow
motion animation", emphasizing how the continuous layout of the form creates
visual movement.
LECTURE 3: AdTypo_3_Context&Creativity
In this lecture, Mr. Vinod introduced us to handwriting. Understanding the
evolution of handwriting requires looking back at its historical context and
looking for the connection between form and function. The shapes of
hand-drawn letter forms are influenced by the tools and materials used to
make them, sharpened bones, charcoal, beefsteak, plant stems, brushes,
feathers.
Then the evolution of the Latin alphabet was introduced. The understanding
of the Phoenician alphabet is that this is where the literature of writing
or written language took a turn, this was an important turning point, this
happened in Phoenicia, basically on the east-west coast of Central Asia, the
Phoenician alphabet would influence the ancient Greek alphabet, then Latin,
and then the Roman alphabet.
Fig 3.1 The evolution of the Latin alphabet
Fig 3.2 Evolution of Chinese
LECTURE 4: AdTypo_4_Designing Type
This talk is about random typography, and first introduces two reasons why new
fonts are always being designed:
- Font design carries a social responsibility and must continuously improve readability.
- Font design is a form of artistic expression.
General Process of Type Design:
1. Research: We need to understand the history of fonts, font
anatomy, technical details, including relevant terminology. Clarify the
purpose and application scenarios of fonts, and analyze existing fonts for
reference.
2. Sketching: Designers use two methods to sketch:
Traditional tool drawing: Use traditional tools (such as brushes/pens, ink
and paper) to draw fonts, and then scan these drawings for digitization.
Digital tool drawing: Use digital tools to draw directly in the font
design software. This method is faster, more consistent and sustainable,
but may limit the natural flow of gestures.
3. Digitization: In the process of font digitization, commonly
used software includes FontLab and Glyphs App.
4. Testing: Testing is very important and is a key part of the
design thinking process. Testing can discover and improve the shortcomings
of fonts.
5. Deploy: Even after the font is deployed, it still needs to
be tested multiple times.
The Roman capitals font is built on a grid of squares and circles. Using
circles allows for better construction of the letterforms.
Fig 4.1 Construction of Roman fonts
Construction and considerations:
Alphabet table medium 26 single characters possible or more combinations
Fig 4.2 Construction and considerations
LECTURE 5: AdTypo_5_PerceptionAndOrganisation
The lecture discussed how to improve the visual navigation and interpretation
efficiency of information through contrast and form in typography design.
The lecture discussed the layout of typesetting and several contrasting ways
of typesetting:
Fig 5.1 Comparison method
Analyzes various methods of creating contrast in typography, including seven
types of contrast: font size, weight, form, structure, texture, direction, and
color.
Fig 5.2 7 types of contrast
INSTRUCTIONS
Task 1: Exercise 1 - Typographic Systems:
In this exercise, we learned 8 systems: Axial, Radial, Expansion, Random,
Grid, Modular, Transition and Bilateral. We learned these 8 systems based on
the video provided by Mr. Vinod, how to complete our exercise in Indesign.
We need to choose one of 3 titles:
- All Ripped Up: Punk Influences on Design
- The ABCs of Bauhaus Design Theory
- Russian Constructivism and Graphic Design
Content Details:
The Design School,
Taylor’s University
All Ripped Up: Punk Influences on Design
Open Public Lectures:
June 24, 2021
Lew Pik Svonn, 9AM-10AM
Ezrena Mohd., 10AM-11AM
Suzy Sulaiman, 11AM-12PM
June 25, 2021
Lim Whay Yin, 9AM-10AM
Fahmi Reza, 10AM-11AM
Manish Acharia, 11AM-12PM
Lecture Theatre 12
Week 1 Sketches:
Based on the content of the video, I gained a deeper understanding of the 8
systems and completed sketches of the related systems:
Fig 1.1 Sketch
Week 1 Attempts:
1. Axial
Fonts Used:
Univers LT Std (67 Bold Condensed, 75 Black, 65 Bold)
Futura Std (Book, Bold, Medium Condensed, Extra Bold, Extra Bold Condensed))
Fig 1.2 Axis System Process
I tried using axes that were not straight lines, but to make it more
interesting I chose to have some inflection points on the axis.
2. Radial
Fonts Used:
Univers LT Std (65 Bold )
Futura Std (Extra Bold, Medium Condensed, Heavy, Medium, Book)
Serifa Std (75 Black, 65 Bold)
Radial System Process
When completing the Radial system exercise, I used some circles to
draw the eye to important information.
Fig 1.4 Radial System (Week 1)
Fig 1.5 Radial System (Week 1)
3. Dilatational
Fonts Used:
Univers LT Std (59 Ultra Condensed )
Futura Std (Extra Bold Condensed, Book, Medium Oblique, Extra Bold, )
ITC Garamond Std(Ultra Condensed Italic, Bold Condensed, Bold Condensed
Italic)
Dilatational System Process
I chose to allow the reader's eyes to move along the arc of the circle so
that they can read the information.
Fig 1.6 Dilatational System (Week 1)
4. Random
Fonts Used:
Serifa Std (75 Black)
Gill Sans MT (Bold Italic)
Futura Std (Extra Bold, Extra Bold Condensed, Heavy, Bold )
ITC Garamond Std(Ultra Italic, Ultra Condensed, Ultra Condensed Italic
)
Univers LT Std (39 Thin Ultra Condensed, 67 Bold Condensed, 49 Light
Ultra Condensed, 59 Ultra Condensed )
Random System
Process
I used overlapping to create a sense of randomness. In the title I chose to
brighten the colors to highlight important information. When completing the
exercise, I added a lot of geometric shapes.
Fig 1.7 Random System (Week 1)
5. Grid
Fonts Used:
Univers LT Std (85 Extra Black, 67 Bold Condensed Oblique )
Futura Std (Book, Medium, Medium Oblique, Light Condensed Oblique )
ITC Garamond Std(Bold, Ultra Narrow)
Grid System Process
Fig 2.1 Axial System Final Week 2
Fig2.2 Radial System Final Week 2
Fig 2.3 Dilattional System Final Week 2
Fig 2.4 Random System Final Week 2
Fig 2.5 Grid System Final Week 2
Fig 2.6 Transitional System Final Week 2
Fig 2.7 Modular System Final Week 2
Fig 2.8 Bilateral System Final Week 2
Fig 3.3 Extracted fonts - A B E K M
Fig 1.8 Grid System
(Week 1)
6. Transitiona
Fonts Used:
Bembo Std (Semibold ）
ITC Garamond Std (Ultra Condensed
Futura Std (Heavy, Bold Condensed Oblique, Bold,Medium Condensed)
Serifa Std （75 Black）
Transitiona System Process
In the transition system, I chose two ways to reflect the feeling of
transition.
Fig 1.9 Transitiona System (Week 1)
7. Modular
Fonts Used:
ITC Garamond Std (Ultra Condensed )
Futura Std (Book, Heavy, Bold Condensed )
Janson Text LT Std ( 75 Bold )
Univers LT Std (49 Light Ultra Condensed, 59 Ultra Condensed)
Modular System Process
Fig 1.10 Modular System (Week 1)
8. Bilateral
Fonts Used:
ITC Garamond Std (Ultra Condensed, Ultra Narrow)
Futura Std (Bold, Book )
Univers LT Std (59 Ultra Condensed)
Bilateral System
Process
Fig 1.11 Bilateral System (Week 1)
Week 2 Attempts:
Vinod sir pointed out that my transition was too far down and not very
transitional.
This was my second attempt:
Final Outcome of Typographic System：
Fig 2.9 Typographic System Final (PDF) Week 2
Fig 2.10 Typographic System Final (Grid ) Week 2
Task 1: Exercise 2-Type & Play: Finding type
Exercise 2 We need to analyze, dissect and identify potential letter
forms in the selected image and extract them.
Refernce Image:
Fig 3.1 Reference images
Fig 3.2 Letter Extraction
Reference fonts：
I observed that the letters A M were similar to the reference font, which
I chose as the reference font.
Next, I moved the anchor points of the fonts and modified their weight and
proportions.
To create a broken feel for the font, I used the Pen Tool to draw lines,
used the Divide function to break the letters apart irregularly, and then
I adjusted the different shapes to create a feeling similar to the seams
in the glass.
Font extraction process:
Mr. Vinod told me that the proportion of my letters extracted from each font
is not the same and the letter M is not harmonious with the whole.
Next, I used the reference lines to adjust each letter to ensure that their
proportions were harmonious.
Fig 4.2 Font extraction process (2)
Optimization process of extracted fonts:
Fig 4.3 Font extraction process (3)
Fig 4.4 Extracted letterforms (baseline)
Fig 4.5 Reference fonts (baseline)
Fig 4.6 Original extraction (top) and final letterform (bottom) comparison
Task 1: Exercise 2-Type and Image:
In this part, Mr. Vinod asked me to make a movie poster.
Here are the photos I selected:
Fig 4.1 Photo Selection
Reference movie poster:
.jpg)
I collected some movie award logos and extracted them in Photoshop.
Final Outcome of Part 2:
Fig 4.2 Final poster (Week 3)
Fig 4.3 Final poster (PDF Week 3)
FEEDBACK
WEEK 1
WEEK 2:
General Feedback: Mr. Vinod checked our first week's exercises and
gave us some advice. He taught us how to do exercise 2.
Specific Feedback: Mr. Vinod pointed out that my transition system
as a whole was too far down and the bilateral system was too tilted.
WEEK 3:
General Feedback: Mr. Vinod checked our font extraction
assignment of week 3. And told us how to complete the font and poster.
Specific Feedback: Mr. Vinod told me that the proportion of the
font needs to be paid attention to, and the proportion of the letter M is not
harmonious with the whole.
WEEK 4:
General Feedback: Mr. Vinod checked the poster we made and gave us
suggestions for modification. Then Mr. Vinod explained to us how to complete
Task 2 and showed us how to make a mindmap. This process was very interesting.
Specific Feedback: Mr. Vinod said my poster is good.
REFLECTION
Experience: When completing Exercise 1, I learned 8 types of
typesetting systems and applied them. When completing Exercise 1, I tried
different methods in each system, which gave me a better understanding of
how to use these 8 systems and made me feel that typesetting is very
interesting. When completing Exercise 2, I thought about the process of
finding objects to extract fonts for a long time, but it was an interesting
attempt to integrate typesetting knowledge into life and complete the
production of movie posters.
Observation: In class, Mr. Vinod
told us about the importance of classroom feedback. We need to use the
knowledge we have learned to improve our work. We must dare to take risks
and learn during this period.
Discovery: When completing these two
exercises, I found that typesetting is often indispensable in life. When
watching Mr. Vinod's lectures, I can learn a lot of typesetting knowledge.
FURTHER READING
《Typographic Systems: Rules for Organizing Type》
The book introduces the definition of 8 systems more clearly. Eight basic
typographic systems are structural methods used by designers to organize
text. These systems provide logic, beauty and clarity for the layout of
text.
In the book, the author encourages us to think beyond the traditional grid
system. It is hoped that diverse systems can create more different layouts
and works.
Comments
Post a Comment