________________
5 April 2023 - 26 April 2023, (Week 1 - Week 4)
Christine Tan Yuen Yan, 0344039
Advanced Typography, GCD 61004 / Bachelor of Design (Hons) in Creative
Media
Task 1 _ Typographic Systems and Type and Play
LECTURES
Week 1 _ Lecture _ Typographic Systems
"All design is based on a structural system" and according to Elam, 2007,
there are eight major variations with an infinite number of permutations.
These eight major variations are
1) Axial
2) Radial
3) Dilational
4) Random
5) Grid
6) Transitional
7) Bilateral
8) Modular
Fig 1.1, eight major variations, from Taking the Mystery Out of Arranging
Type by Katherine Humphreys. (5.4.2023, Week 1)
"Typographical organization is complex because the elements are dependent
on communication to function. Additional criteria such as hierarchy, order
or reading, legibility, and contrast as well. The typographic systems are
akin to what architects term shape grammars. The typographic systems
are similar in that the systems have a set of rules that is unique and
provides a sense of purpose that focuses and directs the decisions making by
Elam, 2007.
1) Axial System
Elements are organised to the left or right of a single axis. To create an
axial design, divide everything by an imaginary line (an axis)
Fig 1.2, Axial System, from Type 365, (5.4.2023, Week 1)
2) Radial System
All elements are extended from a point of focus. To create a radial design,
pick a central focal point, and place all the content so that it radiates
out from that point.
Fig 1.3, Radial System, from Type 365, (5.4.2023, Week1)
3) Dilatational System
All elements expand from a central point in a circular fashion. An example,
the words create a full circle, and the text at the bottom will be upside
down. This makes dilatational designs suited for small blocks of text and
posters.
Fig 1.4, Dilatational System, from Type 365, (5.4.2023,
Week1)
4) Random System
Elements appear to have no specific patterns or relationships.
Fig 1.5, Random System, from ultrabook (5.4.2023, Week1)
5) Grid System
A system of vertical and horizontal divisions. Learning to create a good
grid layout takes some math, some preparation, and a heavy dose of
discipline. With a grid, all the text and graphics fit neatly into columns
and rows.
Fig 1.6, Grid System, from Type 365, (5.4.2023, Week1)
6) Transitional System
An informal system of layered banding. They look like the cross-section
earth with layers of sediment and stone.
Fig 1.7, Transitional System, from Type 365, (5.4.2023,
Week1)
7) Bilateral System
All text is arranged symmetrically on a single axis.
Fig 1.8, Bilateral System, from Type 365, (5.4.2023, Week1)
8) Modular System
A series of non-objective elements that are constructed as a
standardised unit.
Fig 1.9, Modular System, from Type 365, (5.4.2023, Week1)
Week 2 _ Lecture 2 _ Typographic Composition
Principles of Design Composition: Emphasis, Isolation, Repetition,
Symmetry, Asymmetry, Alignment and Perspective.
Fig 2,1 Principles of Design _ Emphasis
The Rule of Thirds
The Rule of Thirds is a photographic guide to composition, it basically
suggests that a frame (space) can be divided into 3 columns and 3 rows. The
intersecting lines are used as a guide to place the points of interest,
within the given space.
Fig 2,2 The Rule of Thirds
No one would use the rule of thirds when there are other more favourable
options.
Environment Models/ Systems
This system is based on the exploration of an existing structure or
numerous structures combined. An extraction of crucial lines both curved
and straight is formed. Organised information around this
super-structure, which includes non-objective elements to create a
unique and exciting mixture of texture and visual.
Fig 2,3, Environment Models/Systems
Form and Movement
Based on the exploration of existing Grid Systems. The placement of a
form on a page, over many pages, creates movement. The forms could
represent images, text or colour.
Fig 2.4, Form and Movement
Week 3 _ Lecture 3 _ Context and Creativity
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.
Fig 3.1, Cuneiform c. 3000 B.C. E
The earliest system of actual writing, written from left to right and
evolved from pictograms.
Fig 3.2, Hieroglyphs
- Ideograms, represent the things they actually depict.
- As determinatives to show that the signs preceding are meant as
phonograms and to indicate the general idea of the word.
- As phonograms to represent sounds that "spell out" individual
words.
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): Characterised by tight spacing and
condensed lettering. Evenly spaced verticals dominated the letterform.
Condensing the line spacing and letter spacing reduced the number 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 towards letterforms - resulting in a more
perfect o rationalised letter.
Fig 3.4, 'Indian' subcontinent the Indus Valley Civilization (IVC)
script (3500-2000 BCE)
The oldest writing found in the 'Indian' subcontinent the Indus Valley
Civilization (IVC) script (3500 - 2000 BCE), is as yet undeciphered and
seems to have been somewhat logo-syllabic in nature.
Fig 3.5, 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.
Fig 3.6, Southeast Asia scripts, scripts of the communities that
assimilated into Peninsula Malay communities.
Week 4 _ Lecture 4 _ Designing Type
Type Design Process
1. Research
Understanding the type history, type anatomy, type conventions and
terminologies. Determine the type's purpose or what it would be used for
and what different applications it will be used in. Studying existing
fonts that are presently being used for
inspirations/ideas/reference/context/usage pattern/etc.
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
The results of testing are 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. Depending on the typeface category
(display type/ text type) the readability and legibility of the typeface
become an important consideration. However, it is not as crucial if the
typeface is a display type, where the 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 testing
phases. Thus, the task of revision doesn't end upon deployment. The rigour
of the testing is important so that the teething issues remain
minor.
Typeface Construction
Fig 4.1, Construction grid for Roman capitals (8x8 cells)
Construction and considerations
Fig 4.2, Classification according to form and construction
Different forms and constructions must be taken into account when
designing a new type. An important visual correction is an extrusion of
curved (and protruding) forms past the baseline and cap line
(overshoot). 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 should appear the
same.
Fig 4.2, Ink traps
Ink traps were generally used when printing on cheap absorbent paper and when printing is fast and not very precise. Excess ink gathers at the corners, but with ink traps, the corners remain visible.
Week 5 _ Lecture 5 _ Perception and Organisation
Contrast
Fig 5.1 Size
Fig 5.2 Form
Fig 5.3 Weight
Fig 5.4, Form
Fig 5.5, Structure
Fig 5.6, Direction
Fig 5.7, Colour
Fig 5.8, Texture
Form
The overall look and feel of the elements that make up the typographic
composition. To represent a concept by doing so in a visual form. The
interplay of meaning and form brings a balanced harmony both in terms if
function and expression.
When a typeface is perceived as a form, it no longer reads as a letter because it has been manipulated by distortion, texture, and enlargement, and has been extruded into a space.
Fig 5.9, Gestalt theory for organisation
INSTRUCTIONS
MIB
Task 1 _ Typographic Systems
On week 1 we are assigned to explore the 8 systems which are Axial, Radial,
Dilatational, Random, Grid, Modular, Transitional and Bilateral in
InDesign using the content given in the Module Information Booklet.
Moreover, by next week we need to present our final attempt for the 8
system.
- Size 200 x 200mm
- Colours: Black and additional colour
- Minor graphical elements
- Limited colours selection (not more than 3)
Week 1 Practical
InDesign Progress
Fig 6.1, Axial Attempt #1, Week (7.4.2023)
My idea for the top left corner of the axial system was trying to create
an effect of the words that got 'ripped' hence the letter 'P' it looks
more irregular than the others, however, I feel like the space is not
being well used. On the top right corner, the idea was to create a slide
effect on the word "Ripped" focusing on the letter 'P' to separate the
word, but I feel like it does not look nice hence my preference will be
the bottom left corner.
Font Used
Top Left: Futura Std (Bold, Medium, Book, Light Condensed), Gill Sans (Regular, Semi Bold, Light, Italic)
Top Middle: Gill Sans (Regular, Light Italic, Light, Semi
Bold), Futura Std (Bold)
Top Right: Futura Std (Bold, Medium, Light, Book) Gill Sans (Light, Semi Bold, Light Italic)
Bottom Left: Futura Std (Bold, Medium, Book, Light) Gill Sans (Regular, Semi Bold, Light Italic)
Bottom Middle: Futura Std (Bold, Medium, Book, Light) Gill Sans (Regular, Semi Bold, Light Italic)
Bottom Right: Futura Std (Bold, Medium, Book,
Light) Gill Sans (Regular, Semi Bold, Light Italic)
Fig 6.2, Bilateral Attempt #1, Week (7.4.2023)
I was just playing around when I attempted the Bilateral system, for
the centre one the idea was like playing a game, an aeroplane and
shooting weapons at their enemy. I prefer the right-corner ones,
however, it is not the correct way to express myself and hence needs
some changes.
Font Used
Left: ITC Garamond Std (Bold, Book), ITC New Baskerville Std
(Bold), Futura Std (Book)
Middle: Futura Std (Book, Extra Bold, Heavy), ITC New Baskerville Std (Bold), ITC Garamond Std (Book).
Middle: Futura Std (Book, Extra Bold, Heavy), ITC New Baskerville Std (Bold), ITC Garamond Std (Book).
Right: ITC Garamond Std (Book, Bold Condensed), ITC New Baskerville Std (Bold), Futura Std (Book)
Fig 6.3, Dilatational Attempt #1, Week (7.4.2023)
For the left one, my idea is to create hurricane effects hence the
words are presented as circularly which also represents the same
practice of the dilatational system. Nevertheless, I feel that I should
attempt another one and I thought of playing around with the words,
hence I make the words like a wheel moving in circles.
Font Used:
Left: Futura Std (Extra Bold, Medium), Janson Text LT Std
(55 Roman, 75 Bold)
Right: Futura Std (Bold, Heavy, Medium)
Fig 6.4, Grid Attempt #1, Week (7.4.2023)
Among all the other systems, I quite enjoy the grid system probably is
quite straightforward and easy system compared to the others, overall my
ideas are based on albums, hence wanted to have an album that gives a
trending vibe but with a minimalistic touch.
Font Used:
Left: Futura Std (Heavy, Extra Bold, Book)
Middle: ITC New Baskerville Std (Bold, Roman) Bembo Std (Regular)
Middle: ITC New Baskerville Std (Bold, Roman) Bembo Std (Regular)
Right: Futura Std (Heavy, Extra Bold, Book)
Fig 6.5, Modular Attempt #1, Week (7.4.2023)
For the modular system, I was quite confused hence my idea for the left
one is creating a sweet inside the container, hence 'Punk Influences on
Design', 'Open Public Lecture' and 'Lecture 12' is inside the box.
Whilst, 'All Rip' is on top of the box symbolizing the cover, and
'ped up' I think it will be nice to rotate the words. Nevertheless,
based on the feedback on week 2, I realized both of my attempts were
wrong and thus need to change.
Font Used:
Left: Gill Sans (Ultra Bold, Regular, Light Italic, Semi
Bold, Bold)
Right: Futura Std (Extra Bold) Gill Sans (Ultra Bold, Bold, Regular)
Fig 6.6, Radial Attempt #1, Week (7.4.2023)
Radial Systems are actually quite straightforward as well, my personal
favourite is the middle one, as it's really nice and easy to read and
understand, I like the words attached on the circle and the letter 'RIP'
on top of it as it pulls the words altogether.
Font Used:
Left: Adobe Caslon Pro (Regular, Light Italic, Semi Bold,
Semibold Italic, Bold), Serifa Std (55 Roman, 45 Light)
Middle: Futura Std (Bold) Adobe Caslon Pro (Regular, Semi Bold), Bembo Std (Semibold, Regular), Serifa Std (55 Roman)
Middle: Futura Std (Bold) Adobe Caslon Pro (Regular, Semi Bold), Bembo Std (Semibold, Regular), Serifa Std (55 Roman)
Right: Gill Sans (Bold, Light Italic), Universe LT Std (55
obliques), Bembo Std (Regular, Semibold), Serifa Std (55 Roman), Adobe Caslon Pro (Regular)
Fig 6.7, Random Attempt #1, Week (7.4.2023)
As the system is random, hence I used different fonts for each word and
changes the font size and colour as well. I think the process of
creating randomised artwork comes with some challenges while I was
making thoughts of "What if audiences can't understand the message' kept
lingering inside my mind so I was being careful about the placement but
turns out it's not bad.
Font Used:
Left: ITC Garamond Std (Ultra), ITC New Baskerville Std (Italic, Bold, Roman), Janson Text LT Std (75
Bold), Futura Std (Heavy, Book), Gill Sans (Light)
Right: TC New Baskerville Std (Bold), Janson Text LT Std (56 Italic), Gill Sans (Regular, SemiBold), Futura
Std (Medium).
Fig 6.8, Transitional Attempt #1, Week (7.4.2023)
Font Used:
Left: ITC Garamond Std (Book, Bold), Adobe Caslon Pro (Regular,
Bold, SemiBold)
Right: Bodoni 72 (Bold, Book, Book Italic) Serifa Std (46 Light
Italic)
Fig 6.9, Attempt, Week (8.4.2023)
Fig 6.10, Modernised Modular, Week (7.4.2023)
Fig 6.11, Modernised Dilatational, Week (7.4.2023)
Fig 6.12, Modernised Axial, Week (7.4.2023)
Fig 6.13, Modernised Bilateral, Week (7.4.2023)
Fig 6.14, Modernised Transitional #1, Week (7.4.2023)
Fig 6.15, Modernised Transitional #2, Week (7.4.2023)
Final Task 1 _ Exercise 1 _ Typographic System
Fig 7.1, Final Bilateral System in JPEG, Week 2
(14.42023)
Fig 7.2, Final Dilatational System in JPEG, Week 2
(14.42023)
Fig 7.3, Final Grid System in JPEG, Week 2 (14.42023)
Fig 7.4, Final Modular System in JPEG, Week 2
(14.42023)
Fig 7.5, Final Radial System in JPEG, Week 2
(14.42023)
Fig 7.6, Final Random System in JPEG, Week 2
(14.42023)
Fig 7.7, Final Axial System in JPEG, Week 2
(14.42023)
Fig 7.8, Final Transitional System in JPEG, Week 2
(14.42023)
Fig 7.9, Final Task 1 _Exercise 1 _ Typographic System in PDF,
Week 2 (14.42023)
Fig 7.10, Final Task 1 _Exercise 1 _ Typographic System Grids and
Guides in PDF,
Week 2 (14.42023)
Task 1 _ Type and Play
3A _ Finding Type
1) Find a suitable object
This image is downloaded from Pinterest, I choose this close shoot of a
plant as I feel that if able to extract letterform from the details of a
leave it's interesting and quite challenging. Through my observations, I
noticed a few letterforms and I uses a pen tool from Adobe Illustrator and
extracted the letters of F, V, Y, and A.
Fig 8.1, Chosen subject 'Close up plant', (Week 3, 19.4.2023)
2) Letterform Extraction
I think that I was being careful hence when I extracted it it kinda looks
like too 'timid', and wasn't really satisfied with the outcome.
Fig 8.1, Chosen subject 'Close up plant', (Week 3, 19.4.2023)
Below are the ones that I have extracted out. I noticed that there are
curvier, there are thin and thick strokes and slightly slanted
stems.
Fig 8.2, Extracted Letterform. 1st attempt (Week 3,
19.4.2023)
4) References
We were assigned to have a reference to assist us with the refinement and
construction of our typeface, I chooses Gill Sans as I feel that is the
closest one to the extracted one and has straightened and thinner strokes.
Besides, it do kinda look alike based on my own opinion.
Fig 8.3, Gill Sans. (Week 3, 19.4.2023)
5) Digitalisation
Below is an overview of attempts in Adobe Illustrator, The artboard are
1000px height and 3000px width.
%20FAIL.jpg)
Fig 8.4, 1st attempt of digitalisation. (Week 3, 19.4.2023)
6) Second Attempt after the feedback from Week 3
Based on Week 3 feedback and I realised that I did not truly understand the
task, as based on Mr Vinod's feedback, my extraction is not complete and not
in detail. Thus, I feel like I should redo it and pay more attention and not
miss out on the details. I really extract the letter properly and I would
say the outcome is different than my first attempt, it is much more
detailed.
Fig 8.5, Second attempt of letterform Extraction, (Week 3, 19.4.2023)
7) 2nd attempt at Digitalisation
Fig 8.6, Second attempt at Digitalisation. (Week 3, 19.4.2023)
8) 3rd attempt at Digitalisation (After Week 4 feedback)
Based on Week 4 feedback from Mr Vinod, the letter that we supposed should
find should be 5 in total, not 4 hence need to extract one more letter.
Moreover, the letter A was not refined as it still looks the same as the
first attempt. I find another letter on the object that I select which is
the letter 'L' and I refined the L more slanted and make the edges more
rounded.
Fig 8.7, Final attempt at Digitalisation. (Week 4, 26.4.2023)
The process of creating the final outcome.
Fig 8.8, Final attempt at DigitalisationPDF. (Week 4, 26.4.2023)
Fig 8.9, Final attempt at Digitalisation of letters. (Week 4, 26.4.2023)
Fig 8.10, Final attempt at Digitalisation of letters in pdf. (Week 4, 26.4.2023)
3B_ Type and Image
Fig 8.9, Reference from the movie '8 Miles' (Week 4, 23.4.2023)
Fig 9, Original photo sourced from Pinterest. (Week 4, 23.4.2023)
Fig 9.1, 1st Attempt. (Week 4, 23.4.2023)
Fig 9.2, 1st Attempt. (Week 4, 23.4.2023)
Fig 9.3, 2nd Attempt. (Week 4, 26.4.2023)
Fig 9.4, 3rd Attempt. (Week 4, 26.4.2023)
Fig 9.5, Final Attempt. (Week 4, 26.4.2023)
Final 3B _ Type and Image:
Fig 9.6, Final Attempt of 3B Type and Image in JPEG. (Week 4, 27.4.2023)
Fig 9.7, Final Attempt of 3B Type and Image in PDF. (Week 4, 27.4.2023)
Fig 9.8, Final Attempt of 3B Type and Image. (Week 6, 17.5.2023)
Fig 9.9, Final Attempt of 3B Type and Image in PDF. (Week 6, 17.5.2023)
FEEDBACK
Week 1
General Feedback :
Be wise of the font that we choose as choices of the font it affects the expression of the letters. Moreover, be aware of the spacing, normally the larger the paragraph it will disturb the rhythm thus applying small capitals allows more harmony and rhythm. Need to be aware of the spacing and it needs to be consistent or at least to be similar. The optical need to be neat.
Specific feedback:
For example, pay attention to the name and the time, the am and pm are in big capital letters which looks odd and it does not fit in hence the better solution is to select the text and downsize it by 0.5 size difference compared to the others. Thus by reducing the point size by 0.5 difference, the entire layout looks more harmonised than the same point size.
Another solution that is also plausible it will be changing the letters into small capitals however not all letters it has small capital so if the typeface does not have a small capital need to bear in mind that: If we force to change the letters it will cause chaos, for example, the thickness of the strokes will be inconsistency.
Week 2
General Feedback:
Form follows function. Need to create a logical texture.
Specific Feedback:
Axial: It is well organised, however for one of the column which is (June 25) it is not on the same axis and need to change. Moreover, the letter 'Lecture 12' the font is too light and hard to notice.
Radial: It's really nice, can try a different attempt at the spacing and the alignment.
Transitional: For poster 1, the letter "P, A, D" creates miscommunication hence can try to change it into a word that makes sense such as "PUNK" or "ALL"
Modular: It's hard to identify whether it is modular.
Dilatational: Try to make it more circle and some of the words it overlapped other words, and try to create some space.
Bilateral: The layout is nice however it should be all in one axis instead of two or three.
Grid: The layout is nice. The word "all ripped up" is sticking together but it is nice, it is readable.
Random: The title captured the eyes overall and is nice.
Week 3
General Feedback:
Important: the weight of the letter. If its round from the extraction should remain the same as the curve as if straighten, it will ruin the original characteristics. Just extract It, just follow the sketches Specific Feedback:
The extraction should be more precise. For example, the letter A extraction is not completely loyal, Should work more on it. Need to be some work on it. Follow the characteristics in the shape that it formulates.
Week 4
Specific Feedback:
The letter 'A' does not seem refined and needs to be changed and needs to
maintain a height that is consistent as it is all in capital letters, the
letter 'Y' may extend one of the strokes and make it higher. Moreover, it
will make sense if it uses a more similar poster that is related to the
font. The second one makes sense however there is no integration just an
image, and the integration part is not strong. Doesn't like the presentation
of the meaning of the letters F V Y A (Feeling, Vibrant, Young and
Achievement) and the poster size should be 1024px to 1024px.
REFLECTION
My whole experience with Exercises_Typographic Systems and Type and Play
was up and down. Personally, I enjoy the first task which is to create 8
posters based on the 8 typographic systems. I like the facts that we can
just explore without any restrictions but just need to be strict on the
systems.
I find Type and Play quite challenging for me, I think finding letters on
an object is fun, however, the refinement process is quite a challenge as
the letter that I find need to be extracted by using the pen tools and I
have to be extremely careful even on the small details as the
characteristics of the objects is the essence. For my 1st attempt, after
receiving feedback from Mr Vinod and I too agreed on it which is the letters
that I first extracted did not capture the characteristics of the object.
After the feedback, I paid more attention to the details and the final
outcome of the extracted letter is more detailed and better.
Type and Image I think the most challenging part is the integration of the
letters and image. The image that we find it needs to be
FURTHER READING
Fig Typographic Systems by Kimberly Elam (2007)
Based on this book provided by Mr Vinod, I obtained knowledge about
typography, and gained a better understanding of typographic systems,
especially the 8 systems; Axial, Bilateral, Random, Transitional,
Dilatational, Radial, Grid and Modular. While I was reading, I thought the radial system strictly stuck to the
circular composition and that it, however, it extended to right and obtuse
angles such as the squares/ angular shapes.
Comments
Post a Comment