Advanced Typography / Task 1 : Exercises

March 28, 2022

Advanced Typography / Task 1 : Exercises

28.3.2022- 25.4.2022 (Week 1 - Week 5)
Cheryl Voo Yie Qi / 0349878
Advanced Typography / Bachelor of Design in Creative Media
Task 1 / Exercise : Typographic Systems & Type & Play

Jumplinks:

LECTURES

AdTypo 1:Typographic Systems

8 major variations:

Axial system
- All elements are organized to the left or right of a single axis.

Fig 1.1, Axial system
Radial system
- All elements are extended from a point of focus.

Fig 1.2, Radial system
Dilatational system
- All elements expand from a central point in a circular fashion.

Fig 1.3, Dilatational system
Random system
- Elements appear to have no specific pattern or relationship.

Fig 1.4, Random system
Grid system
- A system of vertical and horizontal divisions.

Fig 1.5, Grid system
Modular system
- A series of non-objective elements that are constructed in as a standardized unit.

Fig 1.6, Modular system
Transitional system
- An informal system of layered banding.

Fig 1.7, Transitional system
Bilateral system
- All text is arranged symmetrically on a single axis.

Fig 1.8, Bilateral system

Typographical organization is complex because the elements are dependent on communication in order to function. Additional criteria such as hierarchy, order of reading, legibility, and contrast also come into play.

AdTypo 2:Typographic Composition

Principles of Design Composition

When we think about composition, we think about the dominant principles underpinning design composition (emphasis, isolation, repetition, symmetry and asymmetry, alignment, perspective)
These abstract notions seem ambiguous when translating it into typographic layouts/ composition. (Seem more relevant to imagery than complex units of information that consist different elements)
Some of the principles are a little more easily translatable than others.

The Rule of Thirds

Is a photographic guide to composition, basically suggest that a frame/space can be divided into 3 columns and 3 rows. The intersecting lines are used as guide to place the points of interest within the given space.
No one will ever use the rule of thirds when there are other more favourable options.

Fig 1.9, The Rules of Thirds, https://photographylife.com/the-rule-of-thirds

The most used and most pragmatic system is the Grid System (or Raster Systeme), which is derived from the grided compositional structure of Letter Press Printing.

The grid system may seem to be old, but the versatility of the system and its modular nature tend to allow an infinite number of adaptations. That's why it remains popular.

Fig 1.10, Grid system

In this very ordered approach to Typography of the modernist era, a group of younger designers began to question and challenge this notion of order. Thus, was born the post-modernist era in Typographical systems where chaos, randomness and asymmetry were explored. Legibility and readability were relegated to the back seat however the bests examples seem to combine the two seamlessly. (David Carson, Paula Scher, Jonathan Barnbook)

Fig 1.11, Examples

Other systems:

Environmental Grid

- It is based on the exploration of an existing structure or numerous structures combined. An extraction of crucial lines both curved and straight is formed.

- The designer then organizes his information around this super-structure, which includes non-objective elements to create a unique and exciting mixture of texture and visual stimuli.

Fig 1.12, Example

Form and Movement

- It is based on the exploration of an existing Grid system.

- Explore : The multitude of options the grid offer / to dispel the seriousness surrounding the application of the grid system / to see the turning of pages in a book as a slowed down animation in the form that constitutes the placement of image, text and colour.

- The form could represent images, text or colour.

Fig 1.13, Example

AdTypo 3: Context&Creativity

Handwriting

- We study handwriting because 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 hand-drawn letterforms are influenced by the tools and materials used to make them.
(Sharpened bones, charcoal sticks, plant terms, brushes, feathers and steel pens = all contributed to the unique characteristics of the letterforms.)

Fig 1.14, Evolution of the 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.

Fig 1.15, Cuneiform (c.3000 B.C.E)

Hieroglyphics (2613-2160 B.C.E)
The Egyptian writing system is fused with the art of relief carving. The system was a mixture of both rebus and phonetic characters- the first link to a future alphabetic system. Hieroglyphic images have the potential to be used in three different ways:

1. As ideograms, to represent the things they actually depict.

2. As determinatives to show that the signs preceding are meant as phonograms and to indicate the general idea of the word.

3. As phonograms to represent sounds that "spell out" individual words.

Fig 1.16, Hieroglyphics (2613-2160 B.C.E)

Context & Creativity

Why do we talk about Greek influence on Rome?

- Because in the 19th century and the rise of the modern British Empire, it became out of style to credit Africa or Africans with anything of value, and therefore Greece and Rome were elevated over much older, much more influential civilizations like Mesopotamia, the Indus Valley, China, etc.

- Example of this insidiousness is how the European academic process worked to create the discipline of "Indology". Max Mueller who was central to this, never actually visited India. By viewing historical evidence through colonial lenses they ignorantly postulated ideas that were self-serving.

And the same is true for: Classicism, Egyptology, Africanism, Indology and Orientalism.

Handwriting

- Later day typographers, through research, curiosity and a respect for history would pay homage to these developments. This would result in books being written and published, the recreation of the handwritten styles into mechanical forms for printing.

- With the digital revolution, the west would begin to digitize many of its historical creations and type foundries would create, market and sell or license them. The recognition of the importance of these historical letterforms is something to be admired and learned from.

- With the colonization of the east by the west, much of the heritage and cultural practices in literature, arts and crafts, languages and scripts would be halted or stunted.

- The oldest writing systems present in Southeast Asia were Indian scripts. There were a few, but the most important would be Pallava, 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 Nagari script, used in India for writing Sanskrit.

Fig 1.17, Pra-Nagari, an early form of the Nagari script

Eastern developments in handwriting:

Fig 1.18, Evolution of Middle Eastern Alphabets

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 1.19, the Indus Valley Civilization (IVC) script (3500-2000 BCE)

Fig 1.20, Examples of Indus script seals

The Brahmi script (450-350 BCE) 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 derived from Brahmi. The origin of the script is still much debated.

Fig 1.21, The Brahmi script (450-350 BCE)

- Kawi, based on Nagari, but indigenous to Java.
- The word Kawi comes from the Sanskrit term kavya meaning poet.

- Kawi is the script used for contact with other kingdoms, it became the basis of other scripts in both Indonesia and the Philippines.

- Ancient kingdoms in of the Malay Peninsula would have been using both Indian scripts and Kawi to write old Malay language.
- Laguna Copperplate Inscription written in Kawi, "the bearer of a debt, Namwaran, along with his children Lady Angkatan and Bukah, are cleared of a debt by the ruler of Tondo."

Fig 1.21, The Brahmi script (450-350 BCE)

Fast forward
Indonesia has a great number of historical writing systems. We will look into the scripts of the communities that assimilated into Peninsula Malay communities.

This is Incung from Kerinci. If you have family from Kampung Kerinci, this is your "tulisan asal" or original writing system, not Jawi.

Fig 1.22, Incung

- Jawi, the Arabic-based alphabet. We all know Jawi was introduced along with Islam.
- Ancient Hindu societies in both South and Southeast Asia were classist and often caste-based. The lower classes were generally illiterate. Obviously, Islam didn't change this completely, but it did encourage teaching for the sake of proselytization.

- When those traders engaged in missionary work, they would have taught Jawi to people that might otherwise not have learned to read and write. This allowed it to spread among the upper and middle-class in the trading ports. However it took a while for Jawi to supplant other scripts, and in some areas never did so completely.

Fig 1.23, Jawi - the Arabic-based alphabet

Why is handwriting important in the study of type/typography?

We study handwriting because the first mechanically produced letterforms were designed to directly imitate handwriting.
Handwriting would become the basis or standard that for form, spacing and conventions mechanical type would try and mimic.

For decades, Asia/East has neglected much of its written heritage,and by adapting western printing technologies (letter press, linotype, Unicode), it was difficult to create many of the old text in printed form, because it would take know-how, much time, effort and mony.

However with a mild renaissance in the East, with the advent of computer programmers in large numbers, we are starting to see the proliferation of indigenous scripts on phones, tablets and computers.

Programmers and Type Design

More vernacular scripts are being produced by software giants (Google): in their employment a great many Asian programmers and designers. More and more vernacular and "multi-script" typefaces, a term coined by Muthu Nedumaran, are being produced to cater to situations where the written matter is communicated in the vernacular script or vernacular script or vernacular and Latin scripts.

Fig 1.24, Baloo (a perfect blend of pointy paws in a coat of fur,
and it is an affable display typeface by Ek Type)

+ Ek Type and Indian Type Foundry are organizations that have done groundbreaking work with the development of vernacular typefaces in India.

AdTypo 4: Designing Type

Why design another typeface?
Xavier Dupré (2007) in the introduction of his typeface 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.

Adrian Frutiger is a renowned twentieth-century Swiss graphic designer. His forte was typeface designing and he is considered typography. His valued contribution to typography includes the typefaces: Univers and Frutiger.

Fig 1.25, Univers and Frutiger

Fig 1.26, Frutiger

The typeface Frutiger is a sans serif typeface designed by him in 1968 specifically for the newly built Charles de Gaulle International Airport in France.

Purpose: “The goal of this new typeface was to create a clean, distinctive and legible typeface that is easy to see from both close-up and far away. Extremely functional.”

Considerations/ Limitations: Letterforms needed to be recognized even in poor light conditions or when the reader was moving quickly past the sign. He tested with unfocused letters to see which letterforms could still be identified.

Fig 1.27, Adrian Frutiger at the National Institute of Design (NID)

Fig 1.28, Georgia/Verdana

Matthew Carter is the son of Harry Carter, Royal Designer for Industry. Carter was Trained as a punchcutter at Enschede by Paul Radisch, responsible for Crosfiled's typographic program in the early 1960s.

Many of carter's fonts were created to address specific technical challenges. [Verdana (1996) for Microsoft]

Purpose: The font was tuned to be extremely legible even at very small sizes on screen due in part to the popularity of the internet and electronic devices.

Considerations/ Limitations: The Verdana fonts exhibit characteristics derived from the pixel rather than the pen, the brush or the chisel. Commonly confused characters, such as the lowercase i j l.

Fig 1.30, Bell Centennial and Matthew Carter

AT & T commissioned the design of the new typeface, the design had to solve multiple technical and visual problems related to the existing phonebook typeface, Bell Gothic. The solution is named in honour of the company's 100th anniversary, Bell Centennial.

General Process of Type Design

Research
- Should understand type history, type anatomy and type conventions when creating a type.
- It is important to determine the type's purpose / what it would be used for.
- Should examine existing fonts that are presently being used for inspiration.
Sketching (Both methods have their positives and negatives)
- Some designers sketch their typeface using traditional tools (brushes/pens/papers). They are more confident with their hands and have better control using them.
- Some designers sketch using digital tools such as Wacom directly into a font design software, but this sometimes impedes the natural movement of hand strokes.
Digitization
- Professional software used in the digitization of typefaces: FontLab and Glyphs.
- Designers also use Adobe Illustrator to design or craft the letterforms and introduce them into the font apps.
- The readability of the typeface is heavily dependent on it.
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.
-The readability and legibility of the typeface become an important consideration.
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.
- Task of revision doesn't end upon deployment.
- The rigour of the testing is important so that the teething issue remains minor.

Typeface Construction:

Fig 1.31, Roman Capital

Roman Capital: The grid consists of a square and inside it is a circle that just touches the lines of the square in four places. Within the square, there is also a rectangle. The rectangle is three quarters the size of the square and is positioned in the centre of the square.

Using grids can facilitate the construction of letterforms and is a possible method to build your letterform.

Construction and considerations:

Fig 1.32, Capitals and lowercase Constructions

Fig 1.33, the example of letters "c" and "e"

Many different forms and constructions must be taken into account when designing a new type. An important visual correction is the extrusion of curved forms past the baseline and cap line.

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) This is called "fitting" the type.

AdTypo 5: Perception&Organisation

Perception is "the way in which something is regarded, understood, or interpreted".

Perception in typography deals with the visual navigation and interpretation of the reader via contrast, form and organisation of the content.

Contrast

Fig 1.34, Methods to create contrast

Carl Dair posits 7 kinds of contrast:

Size
- Contrast of size provides a point to which the reader's attention is drawn.
- Most common use of size is in making a title or heading noticeably bigger than the body text.

Fig 1.35, Size
Weight
- Describes how bold type can stand out in the middle of the lighter type of the same type.
- Using rules, spots, and squares provides a "heavy area" for a powerful point of visual attraction or emphasis.

Fig 1.36, Weight
Contrast of form
- It is the distinction between a capital letter and its lowercase equivalent, or a roman letter and its italic variant. condensed and expanded versions of the typeface are also included under the contrast of form.

Fig 1.37, Contrast of form
Contrast of structure
- Structure means the different letterforms of different kinds of typefaces.

Fig 1.38, Contrast of structure
Contrast of texture
- By putting together the contrasts of size, weight, form and structure, and applying them to a block of text on a page, you come to the contrast of texture.
- It refers to the way the lines of type look as a whole up close and from a distance.

Fig 1.39, Contrast of texture
Contrast of colour
- The use of colour is suggested that a second colour is often less emphatic in values than plain black on white.
- It is important to give thought to which element needs to be emphasized and to pay attention to the tonal values of the colours that are used.

Fig 1.40, Contrast of colour
Contrast of direction
- It is the opposition between vertical and horizontal, and the angles in between. Turning one word on its side can have a dramatic effect on a layout.
- Mixing wide blocks of long lines with tall columns of the short lines can also create a contrast.

Fig 1.41, Contrast of direction

Organisation/ Gestalt

Gestalt

A German word means the way a thing has been "placed" or "put together".
Gestalt Psychology is an attempt to understand the laws behind the ability to acquire and maintain meaningful perceptions.

Perceptual Organisation/ Groupings

Fig 1.42, Similarity and Proximity

The Law of Similarity: Similarity can refer to any number of features, including colour, orientation, size, or indeed motion.

The Law of Proximity: This law states that items close to each other tend to be grouped together, whereas items further apart are less likely to be grouped together.

Fig 1.43, Continuation and Closure

The Law of Closure: It refers to the mind's tendency to see complete figures or forms even if a picture is incomplete. (Partially hidden by other objects/ part of the information is missing)

Law of Continuation: Holds that humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect.

INSTRUCTIONS

Task 1/ Exercise : Typographic Systems
We are tasked to create 8 layouts using the 8 systems mentioned above. We are allowed to use one more color other than black and white. And the 8 systems mentioned above are to be explored using the following content:

The Design School,
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
William Harald-Wong, 11AM-12PM

Lecture Theatre 12

Below are my sketches:

Fig 2.1, Sketches
*didn't sketch for Random (directly did it in Indesign)

Below are my initial layouts (JPEG) :

Axial system
Font used:
ITC New Baskerville Std (Bold/ Roman/ Bold italic)
Gill Sans MT (Bold)

Fig 2.2, Axial System
Radial system
Font used:
Adobe Caslon Pro (Bold/ Regular)
Univers LT Std (73 Black Oblique)
ITC New Baskerville Std (Bold/ Roman)

Fig 2.3/2.4, Radial System
Dilatational system
Font used:
Futura Std (Book/ Extra bold/ Bold/ Medium)
Gill Sans Std (Light/ Bold/ Extra bold oblique)
Adobe Caslon Pro (Bold)

Fig 2.5, Dilatational System
Random system

Fig 2.6, Random System
Grid system
Font used:
Futura Std (Book/ Heavy)
ITC Garamond Std (Bold italic)
Janson Text LT Std (75 Bold)
Gill Sans MT (Bold)

Fig 2.7, Grid System
Transitional system
Font used:
Bembo Std (Regular/ Bold/ Bold italic/ Semibold)
ITC New Baskerville Std (Bold)
Gill Sans MT (Bold/ Regular)
Futura Std (Bold/ Book)

Fig 2.8, Transitional System
Modular system
Font used:
Gill Sans Std (Regular/ Bold/ Extra bold/ Extra bold display)

Fig 2.9, Modular System
Bilateral system
Font used:
ITC New Baskerville Std (Roman/ Bold)
Futura Std (Book/ Bold)
Gill Sans MT (Regular/ Bold)

Fig 2.10, Bilateral System

Revised

The four systems that I revised after feedback:

Fig 2.11, Axial System

Fig 2.12, Grid System

Fig 2.13, Random System

Fig 2.14, Radial System

Final Submission

PDF

Fig 2.15, Typographic Systems PDF (9/4/22)

PDF with grids

Fig 2.16, Typographic Systems PDF (with grids) (9/4/22)

Task 1/ Exercise : Type & Play-Part 1

Finding type
We are tasked to analyse, dissect and identify potential letterforms within the dissected image.

I used a box with decorative patterns and found 4 letters in it.

Fig 2.17, Attempt 1, Original Photo of the box

Fig 2.18, Attempt 1, 4 Letterforms found on the box (E, M, V, Y)

Mr Vinod told me to find a better picture to work on it, so I found a dinosaur skin picture online to work with:

Fig 2.19, Attempt 2, Dinosaur skin
https://www.shutterstock.com/search/dinosaur+skin+texture

And I found 4 letters from it : F,R,S,Y

Fig 2.20, Attempt 2, Dinosaur skin (4 letters)

I used cooper black as a reference.

Fig 2.21, Attempt 2, Cooper black (Regular)

Fig 2.22, Attempt 2, process

After Mr.Vinod's feedback, we should remain the characteristic of the original texture or element, and try to involve a larger section of the picture to show the texture of dinosaur skin to show the relationship between the words and the dinosaur skin.

So I redo it and found 4 letters (F, Y, L,T):

Fig 2.23, 4 Letters

I used Univers LT Std (67 Bold Condensed) as reference. I decrease the pattern from the first one to the last one, because I feel like the first one's pattern is too concentrated so I decreased it and look more like a zoom-in version at the end.

Fig 2.24, Process

Fig 2.25, Details

Final Submission

Fig 2.26, Final JPEG (18/4/22)

Fig 2.27, Final PDF (18/4/22)

Fig 2.28, Final PDF (18/4/22)

Task 1/ Exercise : Type & Play-Part 2

Type and Image

I searched on Pinterest for these photos and I tried to work on three of them:

I wanted to make my words in the smoke or replace the smoke here.

Fig 2.29, "Smoke", https://www.pinterest.com/pin/9640586693762164/

I was thinking to place my text like the shadow of the girl.

Fig 2.30 , "Stay", https://www.pinterest.com/pin/850124867203250166/

And for "surf" I was thinking to replace the board with my text.

Fig 2.31 , "Surf", https://www.pinterest.com/pin/4292562136264740/

For smoke, I used Photoshop to remove the original smoke, and I was thinking to replace it with the word "smoke" by using a smoke effect brush that I learned to make it online.

Fig 2.32 , Left: Original / Right: Removed smoke in Photoshop

Fig 2.33 , Progress (Experimenting with the smoke brush)

Fig 2.34 , Final outcome (Smoke)

For the one with a girl standing in front of a car, I did it in a simple way by just adding the text "stay" at the bottom with Photoshop. And using the "perspective warp" in Photoshop to adjust the perspective and blend it in by adjusting it in "blending options".

Font: Adobe Caslon Pro (Regular)

Fig 2.35 , Left: Before / Right: After

Fig 2.36 , Final outcome (Stay)

And for the "surf", I removed the board by using the clone stamp tool in Photoshop. I place my text to fill the place of the board and make it looks like the shape of a surfing board.

Font: Univers LT Std (85 Extra Black Oblique)

Fig 2.37 ,
Left: Original / Middle: Removed board using clone stamp tool / Right: Place "surf" like a board

At first, I was going to make the text using the "envelope distort" to make the text on the surfboard. But it didn't turn out well like the two attempts on the right side of the image. So I make it manually by adjusting the anchor points using the selection tool.

Fig 2.38 , Progress

Fig 2.39 , Final outcome (Surf)

Final Submission

Fig 2.40 , Final Submission (Smoke) (23/4/22)

FEEDBACK

Week 2

General Feedback : Should be less reliant on graphical elements, text information 8-12pts

Specific Feedback :

Axial- Avoid exact 45-degree angles because it cause lots of tension
Random- the use of big words (Title) is good, the back could be more experimental
Grid- try to avoid centre alignment
Radial- graphical element is strong can reduce a bit

Week 3 General Feedback : Select the whole shape, study the shape of the texture Specific Feedback : Find another photo other than this.

Week 4 General Feedback : Remember to remain the characteristic of the original texture or element. Specific Feedback : Try to involve larger section of the picture to show the texture of dinosaur skin, can't see the relationship between the words and the dinosaur skin.

Week 5

Specific Feedback : It is good to go.

REFLECTION

Experience:

These exercises are fun to me, but also quite frustrating especially when brainstorming because I don't really have lots of ideas. I like all of the exercises, it is fun when doing all of them. For the typographic systems, I don't like how my random system turned out, it seems not "random" enough, seeing other's random systems are so random but still looks good and that's what I need to learn and improve.

Observation:
There are lots of observations in these exercises, especially the type and image part 1. I look through lots of pictures online, sit in my place and focus on every picture for a long time just to look for letters in the pictures, even though it doesn't turn out really good but still, I think my ability to observe improved a little through it. This exercise is quite interesting because it is to find letters through pictures or objects around us, so I learned that everything around us can also be used to create different interesting designs.

Findings:
Through exercise 1, I get to explore more online and in magazines, different systems have their use, I'm sure that I have seen some of them before but I did the layouts for the first time, and it was fun that we can play around with it. And for the finding type exercise, I think that it requires lots of imagination and creativeness to find letters from different objects and images, other's letterforms are just so creative and cool. Through these exercises, I found out that I really need lots of room to improve because I'm not quite satisfied with some outcomes. But through these exercises, I do learn a lot of observations.

Search This Blog

Cheryl Voo Yie Qi (0349878)