Advanced Typography - Task 1: Exercises1 & 2
Loh Shu Huan / 0349621
Advanced Typography / Bachelor of Design in Creative Media
The Rule of Thirds: A photographic guide to composition. The interesting lines are used as a guide to place the points of interest, within the given space.
Environmental Grid: This system is based on the exploration of an existing structure or numerous structures combined.
The Cuneiform is the earliest system of actual writing, which involved pictograms. It was written from left to right which sets it apart from Middle Eastern languages which the reading rhythm was from the right to left.
Early Greek (5th C. B.C.E.):
Drawn freehand, not constructed with compasses and rule, and they
had no serifs. In time the strokes of these letter grew thicker, the
aperture lessened, and serifs appeared.
The introduction of movable type was introduced in the 1000-1100 CE. This innovation was pioneered in China but achieved in Korea (Diamond Sutra).
The Brahmi script is 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 derive from Brahmi.
Lecture 5: Perception & Organisation week 5 - 29
Form: It is the distiction between a uppercase and its lowercase equivalent, or a roman letter and its italic variant, condensed and expanded of typeface are also include.
Structure: The different letterforms of different kinds of typeface.
Texture: By putting together the coontrasts of size, weight, form, and structure, and applying them to a block of text on page. Texture refers to the way the lines of type look as a wholeup close and form a distance.
Direction: The opposition between vertical and horizontal, and the angles in between.
Colour: The use of colour is suggested that a second colour is often less emphasis in values than plain blavk on white.
Axial
Some of the systems are really hard to tell by just looknat the composition and content, it's more easier to recognised with their grid and guide.
Final Task1 - Exercise 1: Typographic Systems
I proceed with my sketches in Adobe Illustrator and used Gill Sans Std (regular) as my reference typeface. To make sure the consistency of the letters, I used three different sizes of circles for the thickness of the strokes.
After receiving feedback from Mr. Vinod, I did some minor
amended on the letter forms. I made the gap in the letter forms thicker.
Final Task1 - Exercise 2 (Part 1): Finding Type
The third image that I've chosen is a door with red light in
the dark. It looks like a lighthouse in the dark.
Not only the focal point can be different from the circular. The type
that radiated can also be both curve and straight. It can also have both
at the same time.
In random system, the elements need to appear as unconstrained as the
text in their form and placement. To provide a starting point to read the
emphasis is the key element in this system.
Advanced Typography / Bachelor of Design in Creative Media
Task 1 / Exercises: Typographic Systems & Type & Play
LECTURE
Week 1
1/4/22
Introduction / Briefing
During our first class of this semester, Mr.Vinod brief us on how our
Facebook group work and the content of the MIB.
Lecture 1: Typographic Systems
week 1 - 1
/4/22
All design is based on a structural system and according to Elam, there
are eight major variations are as follows:
1. Axial
2. Radial
3. Dilatational
4. Random
5. Grid
6. Modular
7. Transitional
8. Bilateral
The typographical organization is complex because the elements are dependent on communication in
order to function. Hierarchy, order of reading, legibility, and
contrast are additional criteria.
Typographic systems provide a sense of purpose that focuses and directs
the decision-making.
Axial System: All elements are organized to the left or right of a single
axis.
|
| Fig 1.1 Axial System (source: Typographic Systems by Elam.K) |
Radial System: All elements are extended from a point of focus.
|
|
Fig 1.2 Radial System (source: Typographic Systems by Elam.K) |
Dilatational System: All elements expend from a central point in a circular
fashion.
|
| Fig 1.3 Dilatational System (source: Typographic Systems by Elam.K) |
Random System: Elements appear to have no specific pattern or
relationship.
|
| Fig 1.4 Random System (source: Typographic Systems by Elam.K) |
Grid System: A system of vertical and horizontal
divisions.
|
|
Fig 1.5 Grid System (source: Typographic
Systems by Elam.K) |
Transitional System: An informal system of layered
banding.
|
|
Fig 1.6 Transitional System
(source: Typographic Systems by
Elam.K) |
Modular System: A series of non-objective elements
that are constructed as standardized
units.
|
|
Fig 1.7 Modular System
(source: Typographic
Systems by Elam.K) |
Bilateral System: All text is arranged symmetrically on a
single axis.
|
| Fig 1.8 Bilateral System (source: Typographic Systems by Elam.K) |
Lecture 2: Typographic
Composition
week 2 -
8/4/22
Principle of Design
Composition: Emphasis, Isolation, Repetition,
Symmetry and Asymmetry, Alignment,
Perspective.
|
| Fig 2.1 Principle of Design - Emphasis |
The Rule of Thirds: A photographic guide to composition. The interesting lines are used as a guide to place the points of interest, within the given space.
|
| Fig 2.2 Example of The Rule of Third |
Environmental Grid: This system is based on the exploration of an existing structure or numerous structures combined.
|
| Fig 2.3 Example of Environmental Grid |
Form and Movement: This system is based on the exploration of existing Grid
Systems.
Lecture 3: Context and Creativity
week 3 - 15
/4/22
The first mechanically produced letterforms were designed to
directly imitate handwriting. Handwriting would become the basis or
standard for form, spacing, and conventions mechanical type would
try and mimic. The shape and line of the hand-drawn letterforms are
influenced by the tools and materials used to make them (sharpened
bones, charcoal sticks, plants, feathers and etc.
|
| Fig 3.1 Evolution of the Latin Alphabet |
The Cuneiform is the earliest system of actual writing, which involved pictograms. It was written from left to right which sets it apart from Middle Eastern languages which the reading rhythm was from the right to left.
|
| Fig 3.2 Cuneiform c. 3000 B.C.E. |
The Egyptian writing system. Its images have the potential to be
used in three different ways:
- As ideograms, to represent the things they actually depict.
- As determinatives to show that the signs proceeding are meant as phonograms and to indicate the general idea of the word.
- As phonograms to represent sounds the "spell out" individual words.
|
| Fig 3.3 Hieroglyphics 2613-2160 B.C.E. |
|
| Fig 3.4 Letterforms from different ages |
Roman Uncials:
By the 4th century, Roman letters were becoming more rounded, the
curved form allowed for less 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:
During Charlemagne's patronage book production increased and
languages was standardised - pronunciation and spelling as well
as writing conventions - capitals at the start of a sentence,
spaces, between words and puntuation.
Black Letter (12-15 C. CE): It is characterized by tight spacing and condensed lettering.
Evenly spaced verticals dominated the letterform.
The Italian Renaissance: Humanist named the newly rediscovered letterforms
Antica. The renaissance analysis of form that was being applied to
art and achitecture was directed toward letterform - resulting in a
more perfect or rationalized letter.
|
|
Fig 3.5 Movable Type 11C. - 14C. |
The introduction of movable type was introduced in the 1000-1100 CE. This innovation was pioneered in China but achieved in Korea (Diamond Sutra).
|
|
Fig 3.6 Evolution of Middle Eastern Alphabets |
|
|
Fig 3.7 Evolution of the Chinese script |
|
|
Fig 3.8 Valley Civilization (IVC) script (3500-2000
B.C.E.) |
The oldest writing found in the 'Indian' subcontinent the Indus
Valley Civilization (IVC) script is as yet undeciphered and
seems to have been somewhat logo-syllabic in nature.
|
|
Fig 3.9 Brahmi script (450-350 B.C.E.) |
The Brahmi script is 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 derive from Brahmi.
|
|
Fig 3.10 Southeast Asia Script, scripts of the communities
that assimilated into Peninsula Malay communities. |
Lecture 4: Designing Type
week 4 - 22
/4/22
Why design another typeface?
- Type design carries a social responsibility so one must continue to improve its legibility.
- Type design is a form of artistic expression
General Process of Type Design:
1. Research
- Understand type history, type anatomy and type conventions.
- Determine the type's purpose or what it would be used for and
what different applications it will be used in.
- Examine existing fonts that are presently being used for
inspiration/ ideas/ reference/ context/ usage pattern/ etc.
2. Sketching
Traditional and digital. Both methods have their positives and
negatives.
3. Digitization
Professional software includes: FontLab and Glyphs
App.
Adobe Illustrator are also used to design or craft
the letterforms and then introduce it into the
specialized font apps. This however is frowned upon
by the purist.
4.Testing
This is an important component in the design
thinking process. The results of the testing is part
of the process of refining and correcting aspects of
the typeface. Prototyping is also part of the
testing process and leads to important feedback.
Depandng on the typeface category (display type/
text typ) the readability and legibility of the
typeface becomes an important consideration. But, it
is not as crucial if the typeface is a display type,
where expression of the form takes a little more
precedence.
5. Deploy
Even after deploying a completed typeface there are
always teething problems that did not come to the
fore during the prototyping and test phases. Thus,
the task of revision doesn't end upon deployment.
The rigour of the testing is imporatant in so that
the teething issue remain minor.
Typeface Construction
Roman Capital: The gird consist os a square, and inside it a circle
that just touches the lines of the quare in four places.
Thus, using grids (with circular forms) can facilitate the
construction of a letterforms and is a possible method to build/
create/ design the letterform.
|
|
|
Construction and Considerations
Different forms and constructions must be taken into account when
designing a new type. An important visual correction is the
extrusion of curved (and protruding) forms past the baseline
and cap line. This also applies to vertical alignment between
curved and straight forms.
Fitting the type: a visual correction is also needed for the
distance between letters. The letters must be altered to a uniform
"visual' white space, the white space between the letters ahould
appear the same.
|
| Fig 4.2 Classification according to form and construction |
Lecture 5: Perception & Organisation week 5 - 29
/4/22
Contrast
Size: A contrast of size provides a point to which the reader's
attention is drawn. The most common of size is in making a title or
heading noticeably bigger than the body text.
|
|
|
Weight: Other than using bold, using rules, spot, square is also
provide a "heavy area" for visual emphasis.
|
||
|
Form: It is the distiction between a uppercase and its lowercase equivalent, or a roman letter and its italic variant, condensed and expanded of typeface are also include.
|
||
|
Structure: The different letterforms of different kinds of typeface.
|
||
|
Texture: By putting together the coontrasts of size, weight, form, and structure, and applying them to a block of text on page. Texture refers to the way the lines of type look as a wholeup close and form a distance.
|
||
|
Direction: The opposition between vertical and horizontal, and the angles in between.
|
||
|
Colour: The use of colour is suggested that a second colour is often less emphasis in values than plain blavk on white.
|
||
|
Form
The overall look and feel of the elements that make up the
typographic composition. A good form in typography tends to be
visually intriguing to the eye; it leads the eye from point to
point. It entertains the mind and is most often memorable.
To present a concept or To do so in a visual form.
The interplay of meaning and form brings a balanced harmony both
in terms of function and expression.
When a typeface is perceived as a form, it no longer reads as a
letter becaise it has been manipulated by distortion , texture,
enlargement, and has been extruded into a space.
|
||
|
Organisation /
Gestalt
Gestalt is a german word meaning the way a thing has been
"placed" or "put together". Gestalt theory emphasizes that the
whole of anything is greater than its parts - this is based on
the idea that we experience thingf as unified whole.
Organisation / Gestalt:
Perceptual Organisation
/ Groupings
-
Law of Similarity
-
Law of Proximity
-
Law of Closure
-
Law of Continuation
-
Law of Symetry
-
Law of Simplicity (Praganz)
INSTRUCTIONS
EXERCISE
Task 1 / Exercise 1: Typographic Systems
Week 1 - 1/4/22
For this exercise, we need to practice and explore 8 systems (Axial,
Radial, Dilatation, Random, Grid, Modular, Transitional, and Bilateral)
with the provided content in the MIB by using InDesign. Before starting
working on the exercise, we need to watch the InDesign tutorial videos
by Mr. Vinod.
- Size: 200 x 200mm
- Colours: Black, White (paper colour), One additional colour
|
|
|
Font used: Univers LT Std
In the first attemept of this exercise, I tried 180 and 90
degree axis and i also used line and a square to make the axis more
obvious. The third draft I tried make the composition looks more fun and
minimalist in a way.
|
|
|
Radial
Font used: Futura Std, Gill Sans
The first draft was me playing around with this system and
exploring for the possibility. After that, I came out with the
second draft which have two points and linked to each other. But it
looks bored with the white background and the black words so I tried
with the black background instead.
|
| Fig1.11 Dilatational - attempt #1, 5 Apr. 22 |
Dilatational
Font used: Univers LT Std
To be honest, this system was the one which took me the longest time
to do. It required me to create a lot of circle and keep adjusting the
text. I made it into a "∞" infinity symbol, to link two circle together. The big red dot was
created tomatch with the bold heading to looks more balance.
|
| Fig1.12 Random - attempt #1, 5 Apr. 22 |
Random
Font used: Univers LT Std, Gill Sans, Futura, Serifa, Baskerville, Minion
Pro
I tried to use different fonts and different sizes to it looks random
and also balanced at the same time.
|
| Fig1.13 Grid - attempt #1, 5 Apr. 22 |
Grid
Font used: Univers LT Std
I was a bit confused before doing grid system and modular system
while doing the first attempt. But I tried to differentiate them by
following the explaination and example given by Mr. Vinod. The
heading in the middle is counted as 4 (square) units, and 1 unit is
follow the square at the top right corner. The smaller text at the
edege are all 2 units.
|
| Fig1.14 Modular - attempt #1, 5 Apr. 22 |
Modular
Font used: Univers LT Std
In the begining, I was quite lost while doing the modular system.
It is quite hard to seperate all the text in similar unit. So I came
out with the second draft which is more simple and easy to find out
the "modular".
|
| Fig1.15 Transitional - attempt #1, 5 Apr. 22 |
Transitional
Font used: Futura Std
This is one of my favourite system, in the first draft I tried to
create some kind of flow by using just the simply line by line. But
after that, I wanted to make them into some kind of flow which looks
like a wave. So I created movement and rhythm in it and used two
circle to set off the curvy wave.
|
| Fig1.16 Bilateral - attempt #1, 5 Apr. 22 |
Bilateral
Font used: Futura Std, Univers LT Std
This is one of the hardest system to work with. It has a most
simplest looks but it's really difficult to make it looks designed
and special. In the first draft, I tried to seperate the content in
to two different parts, so I was playing around with inverted
colours. For the second draft, I tried to put the content into boxes
and tried to used the colour to create more hierarchy. But, I like
the first draft more at the end.
|
| Fig1.17 Progression Grid and Guide, 6 Apr. 22 |
|
| Fig1.18 Progression Grid and Guide, 6 Apr. 22 |
Some of the systems are really hard to tell by just looknat the composition and content, it's more easier to recognised with their grid and guide.
Week 2 - 8/4/22
After getting the feedback from Mr. Vinod, I did some amended on my
work.
|
| Fig2.4 Radial - Before vs After, 10 Apr. 22 |
Radial
I've changed the number of date into bold to make it looks more
obvious.
|
| Fig2.5 Dilatational - Before vs After, 10 Apr. 22 |
Dilatational
I actually did a few attempts with more graphic elements to fit in the
empty space, but after that I realised that the graphics are too
elements, so I decided to just make it bigger instead of adding graphic
elements.
|
| Fig2.6 Random - Before vs After, 10 Apr. 22 |
Random
The feedback that given by Mr.Vinod is "could be better", so I
decided to make it looks more "random". I added more shadows with
different fonts and sizes to make it looks more crowded, but not
affected the main information.
|
| Fig2.5 Modular- Before vs After, 10 Apr. 22 |
Modular
I made the improvement from my second draft instead of the first one.
Simpler layout but more obvious the system.
|
| Fig2.6 Final Axial System - JPEG, 11 Apr. 22 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Fig2.13 Final Bilateral System - JPEG, 11 Apr.
22 |
|
Fig2.14 Final Task 1- Exercise 1: Typographic
Systems - PDF, 11 Apr. 22 |
Fig2.15 Final Task 1- Exercise 1: Typographic Systems with
Grid - PDF, 11 Apr. 22
Task 1 / Exercise 2: Type & Play
Part 1: Finding Type Week 3 - 15/4/22
For the Part 1 of this exercise, we were required to analyse
and identify potential letterforms (4 letters only) within the
selected image of man-made objects or structures, and nature.
- All UPPERCASE or lowercase only
- Final artboard height: 1000px
To start the exercise, I start browsing on the internet
for the images. I decided to look for some images of nature.
I've chosen a plant image (Fig3.11) for my first attempt. I used Procreate to trace the
letters and sketch the transformation.
|
| Fig2.15 Chosen subject #1 (source: Unsplash), 12 Apr. 22 |
|
|
|
For the second attempt, I tried to use a picture of liquid
art. It's a bit hard to refine, but when I first saw it,
I can find some letters in it. I love this kind of rounded and
puffy look, so I decided to proceed with it.
|
|
|
|
| Fig2.18 Letter-forms Extraction - N, C, T, L, 12 Apr. 22 |
I proceed with my sketches in Adobe Illustrator and used Gill Sans Std (regular) as my reference typeface. To make sure the consistency of the letters, I used three different sizes of circles for the thickness of the strokes.
|
|
|
|
| Fig3.12 Draft #1 - N, C, T, L, 17 Apr. 22 |
|
| Fig4.3 Draft #1 vs Draft #2, 23 Apr. 22 |
|
| Fig4.4 Draft #2 - N, C, T, L, 23 Apr. 22 |
Final Task1 - Exercise 2 (Part 1): Finding Type
|
| Fig4.5 Final Type Design (N, C, T, L) - JPEG, 23 Apr. 22 |
|
|
|
|
|
Fig4.7 Letter C - JPEG, 23 Apr. 22 |
|
| Fig4.8 Letter T - JPEG, 23 Apr. 22 |
|
| Fig4.9 Letter L - JPEG, 23 Apr. 22 |
|
| Fig4.10 Type Showcase (N, C, T, L) - JPEG, 23 Apr. 22 |
|
Fig4.7 Final Type Design (N, C, T, L) - PDF, 23 Apr. 22 |
Part 2: Type & Image Week 4 - 22/4/22
In this exercise, we were required to combine a visual with
word. We need to select a picture and add a suitable word.
For the first attempt, I select a picture of a pair of hands
holding a rope which is almost broken. And it gave me a
feeling that the guy is almost falling down which make me feel
hopeless. So I create a falling and fading word "hopeless" as
a shadow.
image source:
Pinterest
Fig4.8 "Hopeless" Draft #1, 20 Apr. 22
According to the feedback of Mr.Vinod: "The text need to
interact with the elements in the image." So I decided to give
a try with different images.
When I first saw this image, it gave me a feeling of dark,
negative, dying, it makes me feel depression.
image source:
Unsplash
Fig5.9 "Depression" Draft #1, 23 Apr. 22
After having the first draft of "Depression", I observed
that the letters in the dark space is hard to read, so I
separate the letters instead.
|
| Fig5.10 "Depression" Draft #2, 23 Apr. 22 |
image source: Unsplash
I found the image with two bicycles parked by the wall.
Looks like not only humans need rest, but bicycles
too.
|
Fig5.11 "Light" Draft #1, 23 Apr. 22 |
The word "Light" seems a bit weird and awkward with the
light so I decided to change to "RED".
|
|
|
image source: Unsplash
Fig5.13 "Where's next?" Draft #1, 23 Apr. 22
The dark colour looks a bit awkward in the image so I tried
with a lighter colour, and I feel it's better.
Fig5.13 "Where's next?" Draft #1, 23 Apr. 22
|
|
Fig5.14 "Where's next?" Draft #2, 23 Apr.
22
|
After receiving the feedback from Mr. Vinod, I used the words
"Where to next?" into Italian to match with the text in the
pic. I chose a serif font instead of a san serif
font.
|
| Fig5.15 "Dove andare dopo?" Draft #2, 30 Apr. 22 |
Final Task1 - Exercise 2 (Part 2): Type & Image
|
| Fig5.16 Final Type & Image - JPEG, 31 Apr. 22 |
| Fig5.17 Final Type & Image - PDF, 31 Apr. 22 |
FEEDBACK
Week 2
General Feedback: Make sure all the work is done in Indesign, Illustrator is only for some graphical edits.
Specific Feedback:
Radial - The small red text (date) is a bit difficult to read
Dilatational - Need to upsize the whole thing, to fit the space
Transitional - Good, very nice.
Random - Could be better.
Axial- Good job.
Grid - The layout is ok.
Modular - Not so sure, but the layout is ok, the alignmentneeds to be reconsidered.
Bilateral - It’s ok, no problem with it.
Week 3
General Feedback: Make sure to have a reference typeface and find characteristics.
Specific Feedback: The reference image is quite difficult to refine, but the work is very well done. Good Job. It’s quite representative of the image. It’s almost done, but I can closely look at it to see whether I can make it more consistent. Suggest making the strokes of the T and L (maybe) thinner to match with therest. But overall good job.
Week 4
General Feedback: Need to be consistence in our typeface.
Specific Feedback: The typeface looks nice. “T” still looks a little bit
thick. Good job in all. The gap in the alphabet looks
better in the previous one (thicker), this version is
kind of too thin which almost disappears.
Part B: The text is not really interacting with the elements in the image.
Week 5 Feedback
Specific Feedback: It does do the job. But it can be better if the details are shown. The edges won’t be in this perfect look if it is over years and years. The edges need to be more mottled to show their age. Besides, it doesn’t necessarily be in italic, but there’s no wrong if I have it. The typeface suggests using such as Bodoni since it’s an Italian picture and there is some text in it. It will be nicer if it can be in Italian words. It’s actually a nice thing that I could work on, but I just need to work properly.
REFLECTION
Experience: Exercise 1 wasn't as easy as I thought. Before started working on it, I felt that it doesn't seem that difficult. But after that, all the systems took time to experiment and explore. For me the hardest system would be the dilatational system, it took me a long time to experiment and to do amendments. Besides, those simple layouts such as modular and grid systems also made me struggle for a while. It is required to follow the system but it also needs to be different from others' work. The exercise of finding type would be my favourite part of Task 1. The difficult part would be looking for a suitable subject/picture. At first, I kept thinking to look for natural objects, and it made me struggle for a while. But after I found a picture that I was satisfied with, everything went smoothly.
Observation: This task probably made me more observant. Before working on this task, I don't think I can find a letter from a subject or picture. But after that, I learned that there is always a possibility in everything.
Findings: From exercise 1 I found that patience is the key element while dealing with type. It takes time to reach the expectation. I learnt how to see things from different perspectives in the exercise of finding type.
FURTHER READING
[Typographic Systems] - Kimberly Elam
|
|
Fig6.1 [Typographic Systems] - Kimberly Elam, 7 Apr. 22 |
Radial system is one of the difficult system to me, because the
angles are difficults to measure. Before reading this book, I thought
there is only text and achieve this system, but after that I learned that
it can also apply on graphic or image. Besides, it doesn't need to be
stricly in a circular form, such as the sole of the tap shoe (Fig6.3) can also be the focal point for type.
 |
|
|
|
| Fig6.3 Radial System - [Typographic Systems, page 38] |
|
|
|
|
|
Fig6.5 Random System - [Typographic Systems, page 80] |
Comments
Post a Comment