Advanced Typography - Task 1: Exercises 1 & 2 - Typographic Systems and Type & Play
Advanced Typography - Task 1: Exercises 1 & 2 - Typographic Systems and Type & Play
25/9/2024 - (Week 1 - Week 4)
GU QIANKUAN / 0369385
Advanced Typography / Bachelor of Design (Hons) in Creative Media /
Taylor's University
Task 1: Exercises 1 & 2 - Typographic Systems and Type &
Play
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Task 1: Exercise 1 - Typographic Systems
4. Task 1: Exercise 2 - Type & Play
5. Feedback
6. Reflections
7. Further Reading
8. Reference List & Bibliography
Lectures
WEEK 1 (22/9/2024) - LECTURE 1
Advanced Typography: Typographic Systems
Student designers often initially find the grid system awkward,
but understanding its organization process allows them to
realize its creative potential in terms of permutations and
combined uses. Typographic systems allow designers to break free
from rigid grid systems and use more fluid means to create
typographic messages.
Shape grammar is a set of shape rules that apply in
a step-by-step way to generate a set, or language, of designs.
• Axial System: All elements are organised to the
left or right of a single axis.
• Radial System: All elements are extended 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 horizontal
divisions.
• Transitional System: An informal system of layered
banding.
• Modular System: A series of non-objective elements
that are constructed as a standardised unit.
• Bilateral System: All text is arranged
symmetrically on a single axis.
WEEK 2 (29/9/2024) - LECTURE 2
Advanced Typography: Typographic Composition
1. Principles of Design Composition: Emphasis, isolation, repetition, balance
(symmetry/asymmetry), alignment, perspective, rhythm,
contrast.
2. The Rule of Thirds: A composition guide for
photographers. The points of interest are positioned inside the
allotted space using the intersecting lines as a guide.
3. Environmental Grid: Based on an investigation of
an existing structure or a combination of multiple structures.
4. Form and Movement: Based on the exploration of an
existing Grid System. There is movement when a form is
positioned over many pages. The forms could be text, colour, or
graphics.
WEEK 3 (6/10/2024) - LECTURE 3
Advanced Typography: Context and Creativity
The first mechanically produced letterforms were designed to
directly imitate handwriting. The base or standard for form,
spacing, and traditions that mechanical type would attempt to
imitate would be handwriting.
Cuneiform c. 3000 B.C.E.: The earliest system of
actual writing, written from left to right and evolved from
pictograms.
Hieroglyphs: The writing system ancient Egyptians used
for inscriptions mostly on walls of temples and tombs, as well as
statues, coffins, and sarcophagi.
• Ideograms represent
things they depict.
• As determinatives to
indicate general word ideas.
• As phonograms
to represent sounds that spell out individual words.
Letterforms through the Ages
1. Early Greek (5th C. B.C.E.): Drawn freehand, not
constructed with compasses and rules, and they had no serifs. In
time the strokes of these letters grew thicker, the aperture
lessened, and serifs appeared.
2. Roman Uncials: By the 4th century Roman letters
were becoming more rounded, the curved form allowed for fewer
strokes and could be written faster.
3. English Half Uncials (8th C.): In England, the uncial
evolved into a more slanted and condensed form.
4. Carolingian Minuscule: Capitals at the start of a
sentence, spaces between words and punctuation. It was this style
that became the pattern for the Humanistic writing of the
fifteenth century; this latter, in turn, was the basis of our
lower-case Roman type.
5. Black Letter (12-15 C. CE): Characterised by tight
spacing and condensed lettering. Evenly spaced verticals dominated
the letterform. Condensing line spacing and letter spacing reduced
the amount of costly materials in book production.
6. The Italian Renaissance: Newly rediscovered
letterforms Antica. The Renaissance analysis of form that was
being applied to art and architecture was directed toward
letterforms — resulting in a more perfect or rationalised letter.
‘Indian’ subcontinent the Indus Valley Civilization (IVC)
script (3500-2000 BCE): The oldest writing was found, is as yet undeciphered and seems to
have been somewhat logo-syllabic in nature.
Brahmi script (450–350 BCE): The earliest writing
system developed in India after the Indus script. It is one of the
most influential writing systems; all modern Indian scripts and
several hundred scripts found in Southeast and East Asia are
derived from Brahmi.
WEEK 4 (13/10/2024) - LECTURE 4
Advanced Typography: Designing Type
Type Design Process
1. Research: Gain knowledge of type history, anatomy,
conventions, and terminologies, determine type purpose and
applications, and study existing fonts for inspiration, ideas,
reference, context, and usage pattern.
2. Sketching: Traditional/ digital.
3. Digitisation Professional Software: FontLab and
Glyphs App. Some designers also use Adobe Illustrator then only
the specialised font apps. This however is frowned upon by the
purist.
4. Testing: Testing and prototyping are crucial in
refining and correcting typefaces, with readability and legibility
being important depending on the typeface category (display
type/text type), but less so for display types.
5. Deploy: Despite deploying a completed typeface,
teething issues may arise post-deployment, necessitating ongoing
revision and rigorous testing to minimize these issues.
Typeface Construction
• Construction grid for Roman capitals (8 x 8 cells): One possible way to build, produce, or design your letterform is
to use grids (with circular forms) to make the process easier.
Construction and Considerations
When designing a new type, consider different forms and
constructions, including visual corrections like overshoot and
vertical alignment between curved and straight forms.
• Fitting the type: The text requires a visual
correction for letter distance and uniform white space, ensuring
the same appearance between the letters.
• Ink Traps: commonly utilized for fast, fast, and
less precise printing on cheap absorbent paper, as they allowed
excess ink to remain visible at the corners.
Instructions
Task 1
23/09/2024 – 06/10/2023 (Week 01 — Week 02)
Exercise 1 - Typographic System
We have been assigned the task of creating a total of eight posters
according to the typographic systems taught in Lecture 1.
To take note:
- make sure the hierarchy is there
- the designs should be easy to read
- choose colors wisely and do not choose more than 2 colors
- take note of the leading, tracking, and font size should be
8-12pt
- the elements should be inside the margin
Work Progress in InDesign
I started creating the margins and columns according to different
typographic systems. After that, I preferred to experiment immediately in
InDesign with the different layouts. It was easy for me to make variations
in compositions so I didn't do any layout sketches.
|
| Axial System - Work Progress, Week 1 (26/9/2024). |
Margins: 10 mm, 10 mm, 10 mm, 10 mm
Columns: 2, 5 mm
Guides: (Row) 3, 5 mm
|
| Modular System - Work Progress, Week 1 (26/9/2024). |
|
| Grid System - Work Progress, Week 1 (26/9/2024). |
|
| Dilatational System - Work Progress, Week 1 (26/9/2024). |
|
|
Random System - Work Progress, Week 1 (26/9/2024).
|
|
| Bilateral System - Work Progress, Week 1 (26/9/2024). |
|
| Transitional System - Work Progress, Week 1 (26/9/2024). |
|
| Random System - Work Progress, Week 1 (26/9/2024). |
Further Refinement
|
| Axial System - Further Refinement, Week 2 |
|
| Radial System - Further Refinement, Week 2 |
|
| Dilatational System - Further Refinement, Week 2 |
|
| Random System - Further Refinement, Week 2 |
|
| Random System - Further Refinement, Week 2 |
|
| Modular System - Further Refinement, Week 2 |
|
| Transitional System - Further Refinement, Week 2 |
|
| Bilateral System - Further Refinement, Week 2 |
First Attempt
These are my first attempts at 8 typographic system layouts. I think
there was still room for improvement.
（jpeg）Final Task 1 - Exercise 1: Typographic Systems Grids and Guides
Final Task 1 - Exercise 1: Typographic Systems (PDF)
4. TASK 1: EXERCISE 2 - TYPE & PLAY
EXERCISE 2 - PART 1: FINDING TYPE
Chosen Object & Letterform Extraction
Chosen Object: Crumpled Paper, Week 2 (29/4/2024).
Paper folds create organic shapes, adding character and personality to type
designs. They also introduce texture and depth, adding visual interest.
Experiment with shading and shadowing techniques to emphasize the
three-dimensional qualities. The letters that I found were E, L, O, R, T and V.
I used Pen Tool in Adobe Illustrator to trace the letterforms. I paid
attention to details such as line thickness.
|
From observation, the letters do not have the same thickness or weight
of strokes or patterns. During the digitization process, I need to focus on the consistent thickness of the strokes and the
overall visual balance.
The reference is used to help with the construction/refinement of our typeface. From the 10 typefaces, I chose Bembo Std because it has a roughly similar "E" and my typeface would be a serif.
I tried my best to combine the characteristics of Bembo Std and the
characteristics of my traced letterforms.
Digitalisation & Testing
Further Refinement
Final Outcome (Exercise 2 - Part 1: Finding Type)
EXERCISE 2 - PART 1: TYPE & IMAGE
First Attempt
I tried to added
Further Refinement
Creating an effective movie poster by balancing the size of elements like
logos with the overall theme and maintaining the poster's visual impact and
coherence. Colours and fonts play a significant role in readability and
conveying the intended mood or tone of the film. A good composition ensures
that the viewer's attention is directed to key elements without feeling
overwhelmed.
Final Outcome (Exercise 2 - Part 2: Type & Image)
Final Poster Design
Final Type & Image - Movie Poster Design
5. FEEDBACK
WEEK 1 (22/0/2023)
General Feedback: The blog should be organised well, and the provided link must be linked
to the Advanced Typography page.
WEEK 2 (29/9/2023)
General Feedback: We need to update our work progress
on weekly basis so we can submit our tasks on time. We need to be
responsible and finish the tasks before the class starts. For the
designs, we need to ensure the most important information stands out
first, then only add the extra graphics to avoid distracting the
audience. For a good informative layout, we need to make sure viewers
focus on looking at the important information.
Specific Feedback: The radial
system design is fine. The
dilatational system design is nice and interesting. The random
system design is not a random composition. I need to do it again. The
grid system design is fine. The modular system design is not a modular
composition. I need to watch the lecture video again. The
transitional system design is the best one in this class. The
bilateral system design has been constructed in two lines. I need
to rearrange the text on one line.
WEEK 3 (6/10/2024)
General Feedback: There are areas where further attention could enhance the overall
clarity and coherence of the design. We have introduced
consistency in height, width, and contrast, there's room to refine the
shapes to improve legibility. Additionally, maintaining
consistency in stroke weight and spacing will contribute to a more
polished look.
Specific Feedback: I need to ensure that in every phase, the letterforms have a
consistent characteristic, weight, and proportion. Consider simplifying complex strokes or curves to ensure that each
letter is easily recognizable at various sizes. My efforts are
commendable, and with continued refinement, the letterforms will
achieve the desired impact.
WEEK 4 (16/10/2024)
General Feedback: A logo that is too large will conflict with the theme, and the poster will lose focus. It is also necessary to choose the right colours and fonts to ensure the readability of the poster and to pay attention to the design of the poster. Optical measurement is necessary to make the poster have a good composition.
Specific Feedback: I need to improve the integration of text with the background poster. To improve text integration with background posters, choose a good texture image that can be applied to the type design that complements the theme, adjust colour contrast, and position text strategically. Experiment with font size, weight, and subtle effects, and use optical alignment techniques for optimal design refinement.
6. REFLECTIONS
EXPERIENCE
Both exercises provided valuable hands-on experience in exploring different aspects of typography and design. Through practical experimentation in InDesign and visual analysis of photographs, I gained a deeper understanding of typographic systems and the relationship between visual forms and letterforms.
I learned the 8 typographic systems to create interesting compositions in Exercise 1. By using InDesign, I can learn to design insights with different typographic systems. The axial system revolves around a central axis, creating balance and symmetry. The radial system arranges text elements in a circular pattern, conveying movement and dynamism. The dilatational system expands or contracts text elements to create a hierarchy. The random system breaks away from traditional conventions, allowing for more experimental layouts. The grid system allows precise alignment and spacing of text elements, while the modular system arranges text elements within predefined modules. The transitional system smooths transitions between different typographic styles, while the bilateral system emphasises symmetry and balance.
In Exercise 2, identifying and examining possible letterforms in a photograph of an object, knowing the relationship between visual forms and typographic letterforms. Besides that, analyzing shapes and contours, potential letterforms that could be extracted and manipulated to create unique typographic compositions.
OBSERVATION
A variety of typographic systems were explored in Exercise 1 to demonstrate the adaptability of typography. Designing with distinct typographic principles in mind is crucial, as each system presents a variety of options for text organisation and presentation. It was a challenge to recognise and extract letterforms from unexpected sources, including objects in photos, in Exercise 2, which promoted creative inquiry. This activity showed how we might use inspiration from our surroundings to inform typographic design ideas.
InDesign offers various typographic systems for creating visually striking designs, such as axial, radial, dilatational, random, grid, modular, transitional, and bilateral. These systems create balance, symmetry, movement, hierarchy, and experimentation. In Exercise 2, by exploring the natural forms and shapes that emerge from the folds, I was tapping into a rich source of inspiration that can lead to truly unique and expressive letterforms.
FINDINGS
I learned the importance of a methodical approach to typography through Exercise 1. Every typographic system has its own set of guidelines that provide a framework for efficiently arranging and structuring text. Through comprehension and utilisation of these frameworks, designers can produce more unified and aesthetically pleasing typographic arrangements. Exercise 2 demonstrated how unusual letterform development techniques can lead to innovative typographic design. Designers can push the limits of typography and find new ways to express themselves by eschewing conventional typographic sources and embracing innovation.
7. FURTHER READING
WEEK 1 (25/9/2024)
Elam, K. (2007). Typographic Systems. Princeton Architectural Press, New
York.
WEEK 2 (29/9/2023)
The random system organises the elements randomly without a
definite aim, pattern, direction, rule, method or purpose. The
random system creates a dynamic composition.
The bilateral system is based on mirrored symmetry and is
therefore both classic and ubiquitous. Because of its
predictability, it is a challenge for designers to work
with.
WEEK 3 (6/10/2024)
Modular System VS Grid System
The modular system focuses on organizing content within predefined
modules, allowing for flexibility and creativity within a
structured framework. On the other hand, the grid system provides
a strict framework based on intersecting lines, promoting
consistency and efficiency in design layouts. Depending on the
project requirements and design objectives, designers may choose
to employ either the modular system, the grid system, or a
combination of both to achieve their desired outcomes.
Introduction
Design is based on a structural system, broken down into eight major
variations. Understanding visual organization systems allows designers to
organize words or images, with typographic organization being complex due to
communication, hierarchy, and legibility. Typographic systems, similar
to shape grammars, identify styles through rule-based compositional systems.
These systems provide a sense of purpose, directing decision-making and
creating a visual language. The focus and restraint of these systems
encourage creativity in design exploration.
评论
发表评论