Advanced Typography
30/8/2023 - /2023 (Week 1 - Week 4)
NIE WEIQIU /0360239
Advanced Typography / Bachelor of Arts (HONS) in Creative Media
LECTURES
Week 1
Before classes commenced, Mr Vinod had kindly provided a prerecorded briefing and lecture on the mytimes app for anyone who wanted to get a headstart on the module assignments. With that said, the expectations and progress for this module was outlined in the briefing and course MIB for our reference. We were required to watch AdTypo_1_Typographic Systems (provided in the lecture playlist) and the subsequent two indesign tutorials in order to get a feel for the task at hand.Prerecorded lecture 1
Typographic Systems
"All designs are based on a structural system". There are eight major variations with an infinite number of permutations, and they are complex as the elements in typographical organizations are dependent in communication in order to function. Hierarchy, order of reading, legibility, and contrast are also important in the grand scheme of things.
1. Axial System
 |
| Fig 1.0, Axial System, Week 1 (30/8/2023) |
- all elements are organised to either the left or right of a single axis or on differing angles.
- not all are straight, and can be bent accordingly for experimentation.
- many have used multiple at once to create a good design.
2. Radial
 |
| Fig 1.1, Radial System, Week 1 (30/8/2023) |
- all elements are extended from a point of focus.
- spread out according to the point of focus.
- can have multiple points of focus.
3. Dilational
 |
| Fig 1.2, Dilational System, Week 1 (30/8/2023) |
- multiple rings of circles with information on either sides
- can be placed in a hierarchy circle wherein important information is in the inner ring
4. Random
 |
| Fig 1.3, Random System, Week 1 (30/8/2023) |
- elements appear to have no specific pattern or relationship
- fairly difficult to grasp first hand
- there's method in the chaos
5. Grid
 |
| Fig 1.4, Grid System, Week 1 (30/8/2023) |
- a system of horizontal and vertical divisions
6. Transitional
 |
| Fig 1.5, Transitional System, Week 1 (30/8/2023) |
- information is segregated within different bands
7. Modular
 |
| Fig 1.6, Modular System, Week 1 (30/8/2023) |
- a series of non-objective elements that are constructed in as standardised units
- modular refers to being able to move each branch of information individually because they're the same size with each other
- they can be shifted with each other much unlike the grid layout
8. Bilateral
 |
| Fig 1.7, Bilateral System, Week 1 (30/8/2023) |
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
Handwriting
Handwriting would become the basis or standard for form, spacing and conventions mechanical type would try and mimic. The shape and line of hand drawn letterforms are influenced by the tools and materials used to make them. Sharpened bones, charcoal sticks, plant stems, brushes, feather and steel pens all contributed to the unique characteristics of the letterform.
Additional factors included the material upon which the forms were written: clay, papyrus, palm leaf, animal skins (vellum and parchment) and paper.
 |
| Fig 2.5 Evolution of Latin alphabet |
Cuneiform, the earliest system of actual writing, was used in a number of languages between the 34C. B.C.E. through the 1st century C.E. Its distinctive wedge form was the result of pressing the blunt end of a reed stylus into wet clay tablets. The cuneiform characters evolved from pictograms. Cuneiform was written from left to right.
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.
Handwriting
The oldest writing systems present in Southeast Asia were Indian scripts. There were a few, but the most important would be Pallava(or Pallawa in Malay), a South Indian script originally used for writing Sanskrit and Tamil.
Pallava was highly influential, becoming the basis for writing systems across Southeast Asia.
But Pallava wasn't the only Indian script in use in the Malay Archipelago. Another was Pra-nagari, an early form of the Nagariscript, used in India for writing Sanskrit.
 |
| Fig 2.6 Kedukan Bukit inscription |
This is the Kedukan Bukit inscription from Sumatra, written in Old Malay using the Pallava script.
 |
| Fig 2.7 Pra-nagari |
Pra-nagari, an early form of the Nagari script, used in India for writing Sanskrit. It can be seen today in the Blanjong inscription of Bali
 |
Incung comes from a South Sumatran grouping of scripts known as Rencong. Indonesia has a great number of historical writing systems. We will look into the scripts of the communities that assimilated into Peninsula Malay communities.
 |
| Fig 2.9 Rejang Script |
A related script to the Rencong grouping is the Rejang script, also from South Sumatra
 |
| Fig 2.10 Batak Script |
The Batak script: This is a page from a Batak handbook on magic and divination
 |
| Fig 2.11 Lontara |
 |
| Fig 2.12 Surya Ngalam |
The Javanese script is a medieval descendant of Kawi. This is the Surya Ngalam, a legal treatise.
 |
| Fig 2.13 Demak |
Demak was a Muslim Javanese kingdom, yet here's a manuscript from the 19th century which still uses the traditional Javanese writing system
In modern Malaysia, Jawi is of greater importance because it's the script used for all our famous works of literature. Every hikayat and Malay charm book is written in Jawi. Unlike Indonesia, we don't have a huge wealth of pre-Jawi inscriptions and writings—this part of the reason why some tend to ignorantly claim that Jawi is "tulisan asal Melayu", which is of course untrue.
 |
| Fig 2.14 Baloo |
Baloo: A perfect blend of pointy paws in a coat of fur, Baloo is an affable display typeface by Ek Type. A multi-script typeface, it is available in nine Indian scripts along with a Latin counterpart, the family is Unicode compliant and librelicensed.
Week 4 _ Lecture 4 _ Designing Type
Malaga suggested two reasons for designing a 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
2.Sketching
3.Digitization
4.Testing
5.Deploy
1. Research
When creating type, we should understand type history, type anatomy and type conventions. We should also know terminologies, side-bearing, metrics, hinting…
It is then important to determine the type’s purpose or what it would be used for, what different applications it will be used in such as whether the typeface is for school busses or airport signages, etc.
We should also examine existing fonts that are presently being used for inspiration/ideas/reference/context/usage pattern/etc.
2. Sketching:
Some designers sketch their typeface using the traditional tool set (brushes/ pens, ink and paper) then scan them for the purpose of digitization. They are more confident with their hands and have better control using it.
Some designers sketch their typeface using digital tool sets, such as Wacom directly into a font design software (much quicker, persistent, and consistent) but this can sometimes impede the natural movement of hand strokes.
Both methods have their positives and negatives.
3. Digitisation
There are professional software that are used in the digitization of typefaces, amongst the leading software are: FontLab and Glyphs App.
There are designers that also use Adobe Illustrator to design or craft the letterforms and then introduce it into the specialized font apps. This however is frowned upon by the purist.
Attention should not only be given to the whole form at this stage but also to the counter form. The readability of the typeface is heavily dependent on it.
4. Testing
Testing 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.
Depending on the typeface category (display type/text typ) the readability and legibility of the the typeface becomes an important consideration. However 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 testing phases. Thus, the task of revision doesn’t end upon deployment.
The rigour of the testing is important in so that the teething issue remain minor.
Typeface Construction
 |
| Fig 2.15 Construction grid for the Roman Capital |
Roman Capital: The grid consists of a square, and inside it a circle that just touches the lines of the square in four places. Within the square, there is also a rectangle. This rectangle is three quarters the size of the square and is positioned in the centre of the square. More here and here.
Thus, using grids (with circular forms) can facilitate the construction of a letterforms and is a possible method to build/create/design
your letterform.
 |
| Fig 2.16 Construction and considerations |
Construction and considerations:
Classification according to form and construction
Depending on their form and construction, the 26 characters of the alphabet can be arranged into groups, whereby a distinction is made between a group for the capitals and a group for lowercase letters.
 |
| Fig 2.17 Capitals and a group for lowercase letters |
Classification according to form and construction
Depending on their form and construction, the 26 characters of the alphabet can be arranged into groups, whereby a distinction is made between a group for the capitals and a group for lowercase letters.
Many 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.
A visual correction is also needed for the distance between letters. It is not possible to simply place letters next to each other with equal spacing between them. The letters must be altered to a uniform ‘visual’ white space. This means that the white space between the letters should appear the same. This is called ‘fitting’ the type.
 |
| Fig 2.18 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.
INSTRUCTIONS
Task 1: Exercise 1 - Typographic Systems
Fig 1.1 sketch
Fig 1.2 Axial, attempt - JPEG 1 （6.9.2023）
Fig 1.3 Bilateral, Final - JPEG (6.9.2023)
Fig 1.4 Final Radial System - JPEG, Week 2 （6.9.2023）
Fig 1.5 Final Dilatational System - JPEG, Week 2 （6.9.2023）
Fig 1.6 Final Grid System - JPEG, Week 2 （6.9.2023）
Fig 1.7 Final Modular System - JPEG, Week 2 （6.9.2023）
Fig 1.9 Final Transitional System - JPEG, Week 2 （6.9.2023）
Fig 1.10 Final Random System - JPEG, Week 2 （6.9.2023）
Fig 1.11 Final Task 1 - Exercise 1: Typographic Systems - PDF (Week 2 - 8/9/2023)
Fig 1.12 Final Task 1 - Exercise 1: Typographic Systems with Grids - PDF, (Week 2 - 9/9/2023)
Our task is to select and analyze images. Through the images we will dissect and identify any potential letter forms that may be found in the image
Chosen image
Fig 2.0, Chosen Picture of Dissectation, Week 3 (10/9/2023)
Letterform extraction:
Figure 2.1 Selected Letters (Week 3 - 10/9/2023)
References
We need to have a reference to help us improve the font. I chose Gill Sans MT Bold from 10 fonts
Fig 2.2 References font (Week 3 - 10/9/2023)
Digitization
Fig 2.3 Compiled process (Week 3 - 11/09/2023)
Fig 2.4 Final Type & Play - JPEG (Week 3 - 11/9/2023)
Fig 2.5 Final Type & Play - PDF(Week 3 - 12/9/2023)
2. Implementation of font into poster
Fig 3.3 Final poster JPG （Week3 - 14/9/2023)
| Fig 3.4 Final outcome - JPEG (Week 3 - 14/9/2023) |
Part B - HONOR Competition
Fig.3.5 HONOR Competition (16.9.2023 - Week 4)
For exercise 2 part B, we need to participate in this HONOR competition. I chose the theme of "Renewal of Life - Return" to think about the relationship between humans and all things. I chose the category of wallpaper, there are two types, foldable wallpaper and ordinary wallpaper.Need to create an overall visual design with dimensions of 6000 px X 3000 px and an animation
I want whales and humans as my design theme. In the background I will use underwater whirlpools, their two main characters represent the coexistence of everything and mankind
I use Ping for creative writing.Because it is quite difficult to create in Adobe After Effects
Final HONOR Competition
Fig.4.1 Adobe Illustrator Outline View (23.9.2023 - Week 4)
Fig.4.2 Final Full Visual Design (23.9.2023 - Week 4)
Fig.4.3 Final Foldable Wallpaper Design (23.9.2023 - Week 4)
Fig.4.4 Final Wallpaper Design (23.9.2023 - Week 4)
Fig.4.5 Final Animation (23.9.2023 - Week 4)
FEEDBACKS
week 1
General feedback:
Do some research before designing your layout, watch lectures to learn about typography systems.
Week 2
General feedback:
In the design, color matching is important and the design points should not be too many. If the box of unit exceeds the lines for modular system then it is more than one unit. When using graphical elements do not let it overtake the texts. Use text to strike a balance between images, and don't overdo it with embellishments. Bilateral system is center aligned.
Specific feedback:
The color contrast is too bright, you need to change the color
Week 3
General Feedback:
Maintain consistency of width, height and stroke of the letterforms. Does the letterforms extracted have the nature of the object in the image? The objective of this task is the letterforms should have the characteristics of the objects. Learn to evaluate ourselves!
Specific Feedback:
Ultimately letter forms don't really represent objects. Back to Mr. Nord building my font outline like the first letter a.
Week 4
General Feedback:
We need to have a good explanation and meaning of my world. Some companies have wordmarks that can be aspirational and sometimes simple. It is important to communicate the design. At this stage, we should put the key artwork is I can put symmetry and balance play an important role in the word mark.
Specific Feedbacks: The work has to make sense, let's make it simple. Justify a design.
REFLECTION
Experiences
We completed a total of three exercises over the weeks. The first exercise was to design a layout based on eight printing systems. In this exercise I found it more difficult. So I so I looked at a lot of templates. Also you read the rules of various printing systems several times. Guess clearly understand each system. In the later exercises, typing and games. I find the letters according to the shape of the foam. But the first time I did it I didn't do so well. Through Mr. Vinod's feedback. I modified on the original font again. Finally we made a poster with the font. The third exercise was a competition. We had to participate in it. In this contest, I used whales and humans as the theme. To convey that the ocean coexists with us. We should protect the ocean.
Observations
In the first exercise, I realized how different printing systems create layer structures depending on the position and size of the text. In the second exercise, I think that observation is very important because we have to find the letterforms in the objects.
Findings
I found the introduction to the layout system gave me a new perspective and understanding of layout and structure in layout design. I learned through the clapperboard course that typefaces provide more than just letters. When creating fonts, good type creation starts with in-depth observation. In the end, it takes a lot of trial and error to get a better design.
FURTHER READINGS
 |
| Fig 1.0, Typographic Systems by Kimberly Elam, Week 1 (29/08/2023) |
I decided to do some further reading according to the piece that Mr Vinod recommended us in order to familiarize ourselves with the concepts of the different system.
Graphical elements are most often used to elevate an otherwise plain composition. A circle is one of the more popular choices as an element in typography design, and plays a role in the balancing and emphasis of a particular composition. The circle gives the designer a tool to guide the eye of viewers, which in turn help with:
- Emphasis placement
- Stopping Point placement
- Emphasis and Tension placement
- Emphasis and Tension placement
- Organization placement
- Organization and Emphasis placement
- Balance placement
- Organization and Emphasis placement
- Balance placement
- Pivot point
The circle is also able to signify the start and stopping point in a composition, which can lead to ease of readability for viewers.
2. Non objective elements
The circle is also able to signify the start and stopping point in a composition, which can lead to ease of readability for viewers.
2. Non objective elements
 |
| Fig 1.2, Non-objective elements (pg 14 - 15), Week 2 (1/09/2023) |
Rule Series
- Organize and emphasize on a message
- Function primarily as elements of an organization
- Creates movement and guides the eye according to the weight
- Creates an hierarchy accordingly
Circle Series
- Acts as a pivot point
- Creates movement and guides the eye according to the weight
- Creates an hierarchy accordingly
Circle Series
- Acts as a pivot point
- Can be used to create hierarchy
- Draws the eye to a single word
Tone Series
Tone Series
- Can be used to dramatically alter the hierarchy of a message
- Words or portions can be emphasized
- Gives the message a sense of visual punctuation
Comments
Post a Comment