Advanced Typography-Task 1
8.30.2023-13.9.2023 (week 1-week 3)
ZHAO GUANMEI / 0363166
Advanced Typography / Bechelor Of Design in Creative Media
TASK 1- EXERCISE : TYPOGRAPIC SYSTEM& TYPE AND PLAY
INDEX
Lectures:
Typographic system
Typographic composition
Context and Creativity
Designing Type
Exercise 1:Typographic system
Exercise 2:Type &Play
Feedback
Reflections
Further Reading
Lectures
week 1/Typographic system
There are eight major variation,provides a framework for infinite
number of permutations.
1.Axial system- All elements are organised to the left
or right of a single axis.
Fig. 1.0 Axial System
2. Radial system - All elements emenates or derives from a central point of focus.
Figure 1.2 Radial System
3. Dilatational system- All elements expand from a central point in a circular fashion.
Figure 1.3 Dilatational System
4. Random system- Elements appear to have no specific pattern or relationship.
Fig. 1.4Random System
5. Grid system - A system of vertical and horizontal divisions.
6. Modular system - A series of non-objective elements that are constructed in as a standardized units.
Figure 1.6 Modular System
7. Transitional system- An informal system of layered banding.
Fig. 1.7 Transitional System
8. Bilateral system - All text is arranged symmetrically on a single axis.
Fig. 1.8 Bilateral System
Week 2/Typographic composition
Principles of Design Composition: Emphasis, Isolation, Repetition,
Symmetry/Asymmetry, Alignment, Perspective.
Fig.2.1 Principle of Design - emphasis
Fig. 2.2 The rule of thirds
Other systems
Environmental Grid: Based on the exploration of an existing structure or numerous
structures combined.
Fig.2.3Environmental grid, Typographic design: Form and communication
(2015)
Fig. 2.4 form and movement
Week 3/Context and Creativity
Advanced Typography: Context and Creativity
Handwriting is crucial in typography as it inspired the first
mechanically produced letterforms, mimicking its style. Hand-drawn
letter shapes and lines are influenced by tools, materials, and writing
surfaces.
1. Cuneiform
Tools and materials ：Sharpened bones, charcoal sticks, plant stems,
brushes, feather and steel pens all contributed to the unique
characteristics of the letterform.
written from left to right.
2.Hieroglyphs
Egyptian hieroglyphics, a writing system intertwined with relief
carving, combined rebuses and phonetic characters. Hieroglyphic images
served three purposes: as ideograms representing actual objects, as
determinatives indicating the general idea of a word, and as
phonograms spelling out individual words. This system laid the
foundation for future alphabetic systems.
|
Fig. 3.2 Hieroglyphs |
3. Letterforms through the Ages
|
| Fig. 3.3 Letterforms through the Ages |
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.
Roman Uncials: By the 4th century Roman letters were
becoming more rounded, the curved form allowed for fewer strokes and
could be written faster.
English Half Uncials (8th C.): In England, the uncial
evolved into a more slanted and condensed form.
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.
Black Letter (12-15 C. CE): Characterized 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.
The Italian Renaissance: Newly rediscovered letterforms
Antica. The renaissance analysis of form that was being applied to art
and architecture was directed toward letterform — resulting in a more
perfect or rationalized letter.
4. The Indus Valley Civilization (IVC)
The Indus Valley Civilization (IVC), dating back to 3500-2000 BCE, had
a script that remains undeciphered. The script appears to be
logo-syllabic, combining symbols that may have represented both sounds
and concepts. There are differing opinions on whether the symbols are
non-linguistic or represent a Dravidian language.
5. The Brahmi Script
India produced the first writing system after the Indus script. All
contemporary Indian scripts as well as several hundred other scripts
found in Southeast and East Asia are descended from Brahmi, one of the
most prominent writing systems.
Week 4 - Lecture 4
Advanced Typography: Designing Type
In the introduction of his typeface Malaga, Xavier Dupré (2007)
suggested that designing a typeface serves a dual purpose: it carries
a social responsibility by continuously enhancing legibility while
also providing a platform for artistic expression.
Type Design Process
1. Research
- Understand type history, anatomy, conventions, and terminologies.
- Determine the intended purpose and specific applications of the typeface.
- Consider usage scenarios such as school buses or airport signage.
- Examine existing fonts for inspiration, ideas, and usage patterns.
2. Sketching
Traditional Tool Set Method:
- Designers use brushes, pens, ink, and paper to sketch typefaces.
- Sketches are scanned for digitization.
- Provides better control and confidence with hand movements.
Digital Tool Set Method:
- Designers use digital tools, like Wacom tablets, within font design software.
- Allows for quicker, more persistent, and consistent results.
- Can impede the natural movement of hand strokes.
Positives and Negatives:
a) Traditional Tool Set Method:
- Positive: Better control and confidence in hand movements.
- Negative: Additional steps are required for digitization.
b) Digital Tool Set Method:
- Positive: Quick, persistent, and consistent results.
- Negative: Potential loss of natural hand stroke movement.
3. Digitization
- Leading software for typeface digitization: FontLab and Glyphs App.
- Some designers use Adobe Illustrator for initial design before transferring to font apps (not favored by purists).
- Pay attention to both the whole form and counter form for readability.
|
Fig. 4.1 Sketch of Johnston Sans |
4. Testing
- Testing is a crucial aspect of the design thinking process, aiding in refining and correcting aspects of the typeface.
- Prototyping is a key part of testing and provides valuable feedback.
- Readability and legibility are particularly important considerations for text typefaces, while display typefaces prioritize expressive form over readability.
- The typeface category influences the level of emphasis placed on readability and legibility.
|
| Figure 4.2 Prototype Stencil (Stenz) developed and designed by Vinod J. Nair. |
5. Deploy
- Teething problems may arise even after deploying a completed typeface that was not identified during the prototyping and testing phases.
- The task of revision continues even after deployment to address these unforeseen issues.
- Thorough testing is crucial to minimize the occurrence of major teething problems.
- The rigor of testing helps identify and address minor issues in the typeface.
Typeface Construction
Employing a grid system that incorporates circular shapes can be
advantageous when crafting Roman capital letterforms. This grid
comprises a square intersected by a circle, with the circle touching
the square's lines at four specific points. Furthermore, a smaller
rectangle, located at the square's center, is sized at three-quarters
of the square's dimensions. This approach presents a viable method for
constructing and shaping letterforms. For additional insights and
in-depth information, referring to the provided sources is
recommended.
|
| Figure 4.3 Construction grid for the Roman Capital using 8 x 8 cells. |
Construction and Considerations
Designing a typeface involves factors like shaping curves, aligning
vertically, and adjusting letter spacing. However, the complexity of
typeface creation can't be fully covered in a single lecture. Further
exploration through reading is recommended to delve deeper into this
subject, considering various additional approaches and considerations.
Figure 4.4 Construction and Considerations
Week 5- Lecture 5
Advanced Typography: Perception and Organisation
Perception pertains to how something is understood, including whether
it's based on genuine observation or influenced by manipulation. In
typography, it relates to guiding the reader's visual experience through
elements like contrast, form, and content organization, with a specific
focus on text presentation.
Contrast
There are several methods in typography to create contrast.
|
| Figure 5.1 Contrast |
1. Size
|
| Fig. 5.2 Size |
Size contrast directs attention by making certain elements larger than
others. For example, a big letter will be noticed before a small one.
This is often used in titles or headings to make them stand out from the
body text.
2. Weight
|
| Fig. 5.3 Weight |
Weight refers to how bold type stands out among lighter type of the same
style. It can be achieved through bold type, as well as using rules,
spots, and squares to create visual emphasis. Weight is not limited to
type alone, as other design elements can also provide powerful points of
attraction or emphasis.
3. Form
|
| Fig.5.4 Form |
The contrast of form encompasses distinctions between capital and
lowercase letters, regular and italic variants, as well as condensed and
expanded versions within a typeface.
4. Structure
|
| Fig. 5.5 Structure |
Structure refers to the distinct letterforms found in different types of
typefaces. Examples include the contrasting characteristics of a
monoline sans serif compared to a traditional serif, or the differences
between an italic and a blackletter typeface.
5. Texture
|
| Fig. 5.6 Texture |
By combining size, weight, form, and structure contrasts in a block of
text, we achieve the contrast of texture. Texture refers to the overall
appearance of the lines of type, influenced by both the letterforms and
their arrangement on the page.
6. Direction
|
| Fig. 5.7 Direction |
The contrast of direction involves the opposition between vertical and
horizontal orientations, as well as the angles in between. It can be
achieved by rotating words or combining wide blocks of long lines with
tall columns of short lines, resulting in a visually striking contrast.
7. Color
|
| Fig. 5.8 Color |
Considerations should be given to emphasize specific elements and pay
attention to the tonal values of colors used, as a secondary color tends
to have less emphasis than plain black on white.
Instruction
Task progress
Exercise 1/Typographic system
We were asigned to explore 8 defferent typographic systems, wich are Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and Bilateral system.
Task Requirements:- Use InDesign
- Page Size: 200 x 200 mm
- Other than black, can use one another colour.
- Limited graphic elements are allowed.
we are required to use the following content:
The Design School,
Taylor’s University
Taylor’s University
All Ripped Up: Punk Influences on Design
or
The ABCs of Bauhaus
Design Theory
or
Russian Constructivism and Graphic 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
Page | 7
Lecture Theatre 12
Research
At first I looked at Pinterest for examples of a few systems I was less familiar with.
Fig. 2.0-2.2 refference from pinterest (week 1 1.9.23)
week 1 Attemps
3.Dilatational system
Fig. 2.6 Dilatational system (week 1 2.9.23)
Fig.3.2 Week 1 attempt overview
Final Outcome/ Task 1 Typographic system
Fig. 4.0Transitional system(week 2 11.9.23)
Fig. 4.1 Radiol system (week 2 11.9.23)
Fig. 4.3 Modular system (week 2 11.9.23)
Fig. 4.4 Grid system (week 2 11.9.23)
Fig. 4.5Bilateral system (week 2 11.9.23)
Fig. 4.6 Axial system (week 2 11.9.23)
Fig. 4.7 Random system (week 2 11.9.23)
Typographic System Final Outcome - PDF (week 2 11.9.23)
Typographic System Final Outcome With Baseline - PDF (week 2 11.9.23)
Exercise 2/Type &Play
In this exercise,we are require to extract at least five letter that can carry the characteristics of the picture we choosed, and finally make a poster.
size follow:1024 ×1024
chosen photo：
.jpg)
I chose the rocks where the objects are not obvious but have many
lines.
.jpg)
Fig. 3.0 chosen photo (week 2 11.9.23)
Digitalisation progress
Fig. 3.1 extracted letters (week 2 11.9.23)
I tried to find distinct shapes throughout the image as letters, and then I used the Pen Tool to draw them into rough shapes in Adobe Illustrator.
Fig. 3.2 Extracted letterfotms ( week 2 11.9.23)
Fig. 3.3 Reference font-Futura Extra Bold(week 2 11.9.23)
After selecting the reference font and drawing the general shape
of the letters, I began to make detailed adjustments to the
letters, simplifying and improving the letters while retaining the
original characteristics and shapes
Fig. 3.4Refinement(week 2 11.9.23)
Fig. 3.5 words with grids(week2 11.9.23)
Fig.3.6 Comparasion extrated and adjuested letters (week
2 11.9.23)
I got feedback from Mr. Vinod after adjusting here,
using the grid to help me adjust the font will make the
font size more balance
Fig.3.7 letters in grids (week 2 11.9.23)
Type and play Final Outcome
Fig. 3.8 Complied Process (week 3 17.9.23)
Fig. 4.0 Type and play Final outcome(week 3 17.9.23)
Fig. 4.3 Letter E (week 3 18.9.23)
Fig. 4.5 Letter Y (week 3 18.9.23)
Fig. 4.6 Letter L (week 3 18.9.23)
Fig. 4.7 Final Type and Play Poster Design(week 3 18.9.23)
Type and play Final Outcome-PDF(week 3 20.9.23)
Feedback
Week 2
General Feedback:The use of shapes and lines is
auxiliary
Specific Feedback:Do not use italics to make reading
difficult. Do not open the content of the same part
separately, which will cause some content to be missed.
Week 3
General Feedback:The letters we pick out from the
picture should retain the character of the picture If the
selected part too small,the character cannot be
displayed.
Specific Feedback: The letters did not show the
character od the stone.
Reflections
Experience: Both task 1 and Task 2 are quite challenges for me. I think that I am not good at typography😭, nor am I good enough in aesthetics, especially because I have few ideas and creativity. I can only start from imitation by constantly looking at other people's works. But I'm still on my way and hopefully things will get better and better.
Observations:Through type & play tasks, I noticed that everyone has many possibilities in understanding the pictures and finding the letters. In class, I saw many different ways of expression and understanding of pictures. When searching materials, I also found that although some pictures were similar, they still had different characteristics that could reflect the same object.
Findings:Through these tasks, I explored typographic systems, gave full play to my creativity in designing on a systematic basis, learned a variety of layout methods.type and play exercise let me noticed that each type of font is made up of many small details that people associate with different things.
Further Reading
Fig.5.0 Typograpjoc Design:Form and
Communication
Typographic Design: Form and Communication" authored by Rob Carter, Ben Day, and Philip Meggs. It explores the fundamental principles of typography and its role in visual communication.
The first chapter traces the history of typography, showing various works from many different periods.
Fig.5.1-5.2 reference from book
The book explores how to select appropriate typefaces, establish hierarchy, and create compelling layouts. It also delves into typography's role in branding, advertising, and digital design.
Fig 5.3-5.4 Examples of Grid system
"Two terms important to the understanding of signs are denotation and connotation. When considering the meaning of typographic signs, denotation refers to objective meaning, the factual world of collective awareness and experience."
Fig5.5-5.6 Exsample of the extension signs
Communication: Typography is a fundamental tool for effective communication in design.It explores how typography can be used to establish hierarchy, create emphasis, guide the viewer's eye, and evoke specific responses from the audience. Effective communication through typography is a central theme, helping readers understand how to use typography to convey meaning and engage viewers.
Feedback:
There are many cases of pictures in this book for my reference. Through this book, I not only have a clearer understanding of typography format, but also through constantly watching good works, I have learned the role of various changes in typography in visual communication, especially the development of font symbols, which is very helpful for me to complete the next task.
Comments
Post a Comment