Advance Typography - Task 01 Exercise 1 n 2
22.4.2024 - 00.7.2024 (Week 1 - Week 14)
Aidi Rafiq | 0353422 | Bachelor of Design (Honours) in Creative Media
ADVANCE TYPOGRAPHY
LECTURER
Week 1 - Lecture 1
Typographic System
"Typographical organization is complex due to the element are
dependent on communication in order to function.
- Hierarchy
- Order of reading
- Legibility
- Contrast
Typographic systems are similar with the systems that has a set of rules
that provides sense of purpose that focuses and direct the decision
making" (Elam, 2007)
or right of a single axis
All the elements are extended
from a point of focus
fig 1.2 example of Dilatational System
All the elements expand from a central
point in a circular fashion
that are constructed in as a standardized
units
Week 2 - Lecture 2
Typographic Composition
Regularly, composition is about dominant principles underpinning design
composition. For example, emphasis, isolation, repetition, symmetry and
asymmetry, alignment, perspective to name a few. Typographic composition
are more relevant to imagery than complex units of information that
consist different elements.
fig 1.8 rule of thirds
Typographic System
There are 8 systems in the typographic system. From there are mostly used
system which is the Grid System, it derived from the gridded
compositional structure of Letter Press printing.
fig 1.9 example of the Grid System
Legibility and readability were relegated to the back seat however the bests examples is to combine the two seamlessly. Order was replaced with apparent chaos but current chaos was exciting and 'new; for a generation that was being exposed to Punk anti-establishment though and music.
Environmental Grid
This system is based on the exploration of an existing structure or
numerous structures combined. Designer organizes their information
around the super-structure, which includes non-objective elements to
create a unique and exciting mixture of texture and visual
stimuli.
Form and Movement
This system is based on the exploration of an existing Grid System.
The placement of a form on a page, over many pages creates movement.
Whether the page is paper or screen is irrelevant.
fig 1.12 example of static version of the form placed on spread
fig 1.13 example of the level of complexity increases as newer elements
are introduced
Week 3 - Lecture 3
Context & Creativity
Handwriting
We all need to study handwriting is because its mechanically produced
letterforms were designed to directly imitate handwriting. The shape and
line of hand drawn letterforms are influenced by the tools and materials
used to make them.
For example:
- Sharpened bones
- Charcoal sticks
- Plant stems
- Brushes
- Feather
- Steel pens
fig 1.14 Evolution of the Latin Alphabet
fig 1.15 Ancient Egypt Hieroglyphics Chart
The reason we are studying about Greek influence on Rome, but not
Egyptian or Near Eastern influence on Greece is because in the 19th
century, it became out of styles to credit Africans with anything of value
and therefore Greece and Rome were elevated over much older.
fig 1.16 Evolution of Middle Eastern alphabets and Chinese script.
In Malaysia, spear-headed by programmer and typographer Muthu Nedumaran. The programming language needed to encode the different types of vernacular writing systems was cracked by Muthu.
A local group of graphic design called "Huruf" interested in the localized
lettering of Latin and vernacular letters painted. The movement in South
East Asia lacks enough self-organization and coordination's. However, with
greater awareness and guidance from more a bigger neighbors such as India,
has a larger talent pool and resources, techniques and tactics employed are
becoming more accessible.
Week 4 - Lecture 4
Designing Type
"Adrian Frutiger is a renowned twentieth century Swiss graphic designer. He is the responsible for the advancement of typography into digital typography. He contributed to typography include the typefaces; Univers and Frutiger."
fig 1.17 Adrian Frutiger contributed typefaces
his goals for this new typeface was to create a clean, distinctive and legible typeface that is easy to see from both close up and far away.
"Matthew Carter is the son of Harry Carter, Royal Designer for industry, contemporary British type designer and ultimate craftsman. They are responsible for Crosfield's typographic program in the early 1960s. Mergenthaler Linotype's house designer 1965-1981."
The purpose of this font was tuned to be extremely legible even at the very small sizes on the screen due in part to the popularity of the internet and electronic devices.
Edward Johnston is the creator of the hugely influential London "Underground" typeface, which would later come to be known as "Johnston Sans"
The purpose of this font is because London's Underground railway request a new typeface for its posters and signage from the calligrapher Edward Johnston. He handed over details and examples of letter shapes that would set the tone for printed text.
General Process of Type Design:
1. Research
When creating a typeface, we should understand the type history, anatomy and conventions.
- Should examin the existing font that are presently being used for inspirations
2. Sketching
The traditional way is to hand sketch them to the paper then scan for the purpose of digitization.
- This will improve on the controls when holding the pen
3. Digitization
Designers would mainly use a professional software like Font lab, Glyphs etc.
Mostly would use Adobe illustrator to craft the letterforms then paste it to the font app
4. Testing
Testing is a very important stage for design process that lead to an important feedback
- Readability
- Legibility
5. Deploy
There would still be a problem that did not appear in the testing phase.
The rigour of testing is important so that there wont be any minor issue.
Typeface Construction:
The grid consist of a square, and inside it a circle that just touches the lines of the square in four places.
Within the square, there also a rectangle which is a three quarters the size of the square and is positioned in the center of the square.
fig 1.24 baseline, cap line
It is important visual correction is the extrusion of curved forms past the baseline and cap line.
This applies to vertical alignment between curved and straight forms.
Week 5 - Lecture 5
Perception n Organisation
Perception
Perception is "the way in which something is regarded, understood, or interpreted".
In typography, perception deals with the visual navigation and interpretation of the reader via contrast, form and organisation of the content
fig 1.25 Contrast in font
fig 1.26 Contrast and size
fig 1.27 Contrast and weight
fig 1.28 Contrast and Structure
fig 1.29 Contrast and Texture
fig 1.30 Contrast and Direction
fig 1.31 Contrast and Colour
Form
For refer to the overall look and feel the elements that make up the typographic composition. Its a form in typography tends to be visually intriguing to the eye; it leads the eye from point to point.
Typography means to write in accordance with form. They can be seen as having two functions:
- to represent a concept
- to do so in a visual form
fig 1.33 Example of Form in typography
fig 1.33.1 Example of Form in typography
Organisation / Gestalt
Gestalt is a German word meaning the way a thing has been "placed", they are an attempt to understand the laws behind the agility to acquire and maintain meaning full perceptions.
Instead of breaking down thoughts and behavior to their smallest elements, the gestalt psychologist believed that you must look at the whole of experience.
fig 1.34 Gestalt: Perceptual Organisation
fig 1.34.2 The Law of Closure and Continuation
fig 1.34.3 The Law of Symmetry
INSTRUCTIONS
TASK 1 - EXERCISE 1 - TYPOGRAPHIC SYSTEM
Week 1, we have to explore different types of typographic system for
example:
Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and
Bilateral. Understanding this topic for the designer to use a more fluid means to
create typographic messages through the eight system of typographic
organization.
WEEK 1 - ATTEMPTING
The axial system is simple as it sounds but need the creativity to make the
simplicity into an impact layout is a difficult. I got used to create formal
and neat poster but the second axial attempt was uncomfortable to
produce.
Font used:
Font used:
Left - Adobe Caslon Pro
Right - Univers LT Std
The Radial system was simple because I just need to rotate the
words to focus from a point.
Attempting the Dilatational system was really difficult for
me, especially I've never use InDesign. I have so much difficult dealing
with the circle text due to its only can write it outside the
circle.
Font used:
Left - Futura Std
Middle - Futura Std
Right - Futura Std
Right - Futura Std
fig 2.2 attempt of Random System (22/04/24)
Random system is very easy to make one because of you can place
them an any sort of direction with no relationships. I like the idea of messy look because it brings the
attention quickly of how chaotic it looks.
Font used:
Left - Univers LT Std
Middle - Bembo Std
Right - Gill Sans Std
Right - Gill Sans Std
fig 2.3 attempt of Grid System (22/04/24)
The Grid system is very similar with the
Modular system. I feel like I could do better but the creativity
from my head is limited me with the simplicity of the layout that the
system give. The Grid system is also very nice because of
how formal and neat the layout is but the composition of the words can
still be universally.
Font used:
Left - Adobe Caslon Pro
Right - Univers LT Std
fig 2.4 attempt of Transitional System (22/04/24)
Transitional system reminds me of the painting "The Starry
Night" by Van Gogh because of the movement that reminds me of the
painting. Transitional system is very new to me because I've
never heard of this system before and when I found out how to create it
is surprisingly simple.
Font used:
Bembo Std
fig 2.5 attempt of Modular System (22/04/24)
This is very identical with Grid system which confuses me a lot,
even though the example shows the variations. The thought process behind
this attempt is that I want fill every space that in each grid and
therefore I use the shape as to fill the negative space.
Font used:
Univers LT Std
fig 2.6 attempt of Bilateral System (22/04/24)
This is very similar to Axial system but I made this as
simple as it can be and formal. I also create a hierarchy by placing
which comes first and last according to people's eyes. Purposely making
the main title bigger and bold compare to others which is to attract the
audiences eyes
Font used:
Univers LT Std
fig 2.7 Final Task 1 - Exercise 1 - Typographic System - Week 1
(25/04/24)
fig 2.8 Final Task 1 - Exercise 1 - Typographic System - Guides -
Week 1 (25/04/24)
TASK 1 - EXERCISE 2 - TYPOGRAPHIC SYSTEM
fig 3.1 traced letters - M A L E, Week 3 (09/05/24)
fig 3.2 extracted letterform - M A L E, Week 3 (09/05/24)
fig 3.4 simplified letterform - M A L E, Week 3 (11/05/24)
In fig 3.2 noticed how complex the body and irregular with the size and
the positions. I use ITC New Baskerville Std as a reference because the
E and A has the same feature as the reference font.
fig 3.5 FINAL (maybe) letterform - M A L E, Week 3
(11/05/24)
I made the M less sharp with the top bit because in fig 3.4, it looks
like a crown or a shoulder armor so there fore I made it round and soft
to represent the head of the jellyfish.
fig 3.6 (12/05/24)
Feedback:
Can be improve on the letterforms a bit
with the overlapping and movement
Integration with the poster and title
because of the white color font and white color background
+ additional
for the poster, have the title mix with water since its an underwater
related.
fig 3.7 FINAL (16/05/24)
I start to integrated with my title and the jellyfish. Therefore you can see the overlapping with the body and some parts of the letterforms.
REFLECTION
Experience
This task brough me back sem 1, from learning the composition in InDesign. Especially extracting a letter from an image to produce a font and as a result, I am sort of happy with the poster.
Observation
For this task I notice that I need to understand on when producing a font coming from a certain object, the small detail in the letterform is important because that's what makes the font has its character.
Findings
Learned different type of typographic system because I usually just simply put the shapes into a certain composition.
When digitalize a font from dissecting it from an image, it is important to focus on the details of the typeface to relate the front and the theme.
FURTHER READING
Typographic System
- Kimberly Elam
This book is about exploring the eight major structural system of the grid. For example, random, radial, modular, and bilateral systems.
Knowing the essential visual organization systems, the designer can fluidly organize words or image within the variation of a structure.
This book benefits me a lot because instead of huge paragraph talking about the system, it shows an example with pictures so that we have a clear vision of the certain topics.






.png)
.png)
.png)
.png)



.jpg)
.png)

.png)
.png)




Comments
Post a Comment