Advance Typography Task 1 : Exercise 1 & 2

2024.04.16-2024.2024.06.21

Rachel Yeo Rong Qing / 0368901

Advance Typography / Bachelor of Design (HONS) in Creative Media

Task 1 : Exercise 1 & 2

CONTENT


LECTURES

  1. Pre-recorded Lectures
Week 1 - Typography Systems

    • Introduction

🌟Typography systems are different with the particular historical systems.

Typography Systems


- All design is based on a structural system.

- Typography systems give decision making a direction and a sense of purpose.

- Student designers may encounter with a design system, but as we progress, we will discover its creative potential, offering an alternative to traditional grid systems and enabling more fluid typographic design.

- "Typography is the use of type to advocate, communicate, celebrate, educate, elaborate, illuminate, and disseminate. Along the way, the words and pages become art." - James Felici, The Complete Manual of Typography

⤷ Axial

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

- Axis not must be straight can be bend also.

Fig. 1.1 Example of Axial systems (Source : type 365)

⤷ Radial

- All elements are extended from a point of focus.

Fig. 1.2 Example of Radial systems (Source : type 365)

⤷ Dilatational

- All elements expand from a central point in a circular fashion.

Fig. 1.3 Example of Dilatational systems (Source : type 365)

⤷ Random

- Elements appear to have no specific pattern or relationship.

Fig. 1.4 Example of Random systems (Source : Tamara Audrey)

⤷ Grid

- A system of vertical and horizontal divisions.

Fig. 1.5 Example of Grid systems (Source : Tamara Audrey)

⤷ Modular

- A series of non-objective elements that are constructed in as a standardized units.

Fig. 1.6 Example of Modular systems (Source : Tamara Audrey)

⤷Transitional

- An informal system of layered banding.

Fig. 1.7 Example of Transitional systems (Source : Type 365, Julius Teoh Hoong Boon)

⤷ Bilateral

- All text is arranged symmetrically on a single axis.

Fig. 1.5 Example of Bilateral systems (Source : Tamara Audrey)

Week 2 - Typography Composition

Typography Composition


- Think about the dominant principles when we think about the composition.

⤷ Rule of thirds

- Photographic guide to composition, Basically suggest that a frame (space) can be divide into 3*3.

- Used as a guide to place the point of interest, within the given space.


⤷ Typographic Systems

- The most pragmatic and the most used systems is the Grid System.

- Grid systems may seem to be old or rigid but the versatility of the system and its modular nature tends to allow an infinite number of adaption.



⤷ Environment Grid

- This system based on the exploration of an existing structure or numerous structure combined. 

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

⤷ Form and Movement

- This system based on the exploration of an existing Grid systems.

- The placement of a form (irrespective of what it is) on a page, over many pages creates movement. Whether the page is paper or screen is irrelevant.

- Level of complexity increase as newer elements are introduces in an incremental fashion. (Such as : addition color, image, text)


Week 3 - Context & Creativity

Context & Creativity

⤷ The importance of the study of type / Typography

- Studying handwriting is because of the first mechanically produced letter forms 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.


⤷ Cuneiform (3000 B.C.E)

- Earliest system of actual writing. Distinctive wedge form is the result of pressing the blunt end of a reed stylus into wet clay tablets.

⤷ Hieroglyphics (2163 - 2160 B.C.E)

- Egyptian writing system is fused with the art of relief carving. 

- Potential to be used in : 

    ~ represent the things they depict as ideograms.

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

    ~ Represent sounds that "spell out" individual words as phonograms.

⤷ Early Greek (5th C.B.C.E)

- Built on the Egyptian logo-consonantal system. Words seen in a row but reading direction would be from left to right in one row then switch from right to left in the next row.

- Early Greek are drawn freehand, not with compasses and rulers, and without serifs.

⤷ Roman Inscription

- Written with a flat brush, held at an angle like a broad nib pen. 

- Served in their turn as models for calligraphers and type designers for the past two thousand years.

⤷ Roman Uncials (4th C.) 

- More rounded, and the curve 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 (8th C.) 

- Used for all legal and literary works to unify communication between the various regions of the expanding European empire.

- Its important as it becomes the pattern for the Humanistic writing of the 15th century.


⤷ Black letter (12 - 15th C.) 

- Characterized by tight spacing and simple fonts. 

- Evenly spaced vertical lined dominate the font.

- Condensing line spacing reduced the amount of costly materials in boo production.

⤷ Movable Type (11 - 14th C.) 

- Pioneered in china but achieved in Korea.

- In the late 1300 - 1399 CE, several decades before the earliest printing in Europe (Guttenberg's bible 1439), the Koreans establish a foundry to cast movable type in bronze.

⤷ Evolution of Middle Eastern Alphabets 

- Phoenician letter marks a turning point in written language, the script itself has been possibly influenced by the Egyptian Hieroglyphics and Hieratic Scripts.

⤷ Evolution of Chinese script 

- From the Oracle Bone to Seal Script to Clerical Script, Traditional and Simplified scripts.

⤷ The Brahmi Script script (450 - 350 B.C.E)

- Earliest writing system developed in India after the Indus script.

- One of the most influential writing systems

⤷ Southeast Asia script 

- Oldest writing systems present in Southeast Asia were Indian Scripts.

- There was a few but most important would be Pallava.

- South Indian script originally used for writing Sanskrit and Tamil.

- Pra-Nagari also important, early form of the Nagari script was used in India for writing Sanksrit.

- Nusantara also has its writing system which is Kawa, based on Nagari but indigenous to Java.

- Used for contacting other kingdoms, thus it was widespreads and became the basis of other script in both Indonesia and the Philippines.

⤷ Jawi 

- Arabic-based alphabet.

- in modern Malaysia, Jawi is of greater importance because it's the script used for all our famous works of literature.

⤷ Programmers and Type Design

- More vernacular scripts are being produced by software giants (Google). 

- More and more vernacular and "multi-scripts" typefaces are being produced to cater to situations where the written matter is communicated i the vernacular scripts or vernacular and Latin scripts.

Week 4 - Designing Type

- Reason for designing other typefaces : 

    ~ Type design carries social responsibility so one must continues to improve its legibility.

    ~ A form of artistic expression.

Frutiger

- Sans serif typeface designed by the Swiss type designer Adrian Frutiger.

- 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 : The letterforms needed to be recognized even in poor light conditions or when the

reader was moving quickly past the sign.

Example of Frutiger Arabic
Verdana

- Created by Matthew Carter.

- Purpose : "The font was tuned to be extremely legible even at very small sizes on the screen due in

part to the popularity of the internet and electronic devices."

- Considerations : "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."

Example of Verdana
Johnston Sans

- Created by Edward Johnston.

- He was asked to create a typeface with with "bold simplicity" that was truly modern yet rooted in tradition. Johnston’s design completed in 1916, combined classical Roman proportions with humanist warmth.

- Purpose : The London Underground has ordered a new font for posters and signage from calligrapher Edward Johnston. He provided details and examples of letter shapes that set the tone for printed texts to this day.

- Considerations : "Johnston's job is to unite the London Underground Group, a group of different companies that all use the same railways and tunnels. All the signage is completely different - there's this harsh lettering, and Johnston applied the proportions of Roman capital letters to his typeface, so it's rooted in history, rooted in traditional calligraphy. But it has an elegance and simplicity that is absolutely perfect for the modern era."

Example of Johnston Sans

General Process of Type Design

- Research

    ~ When creating type, not only needs to understand type history, type anatomy and type conventions but also has to know terminologies, side–bearing, metrics, hinting, etc.

    ~ It is 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.

Example of Top

- Sketching

    ~ There are two methods to sketch: hand drawing or digital painting. Both methods have their positives and negatives.

Example of sketching

- Digitization

    ~ 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.

Example of digitization

- Testing

    ~ Testing is an important component in the design thinking process. The result 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 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.

Example of sketching

- Deploy

    ~ Even after deploying a completed typeface there are always teething problems that did not come to the fore during the prototype 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.

Example of Deploy

* Typeface Construction

- 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.

- Using grids (with circular forms) can facilitate the construction of letterforms and is a possible method to build/create/design your letterforms.

Example of typeface construction

*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.

Example of Construction

- Many different forms and construction 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.

Example of fitting type

- The consideration when creating a typeface cannot be covered in its entirety in a single lecture or in a couple of slides.

Example of consideration



     2. Class Summary

  • Week 1 : Mr. Vinod ask us to watch the lectures and set up our e-portfolio before we start our first class. After watching the lectures, we need to update our lectures notes into our e-portfolio. Besides that Mr. Vinod also brief us about our module and also InDesign formatting.
  • Week 2 : Due to the Labor day, there is no physical class therefore Mr. Vinod create a short online class for giving us the exercise 1 feedback. After that, Mr. Vinod ask us to start the exercise 2.
  • Week 3 : Mr. Vinod ask us to refine and complete Exercise 1 and 2 by week 4 and complete the Task 1 E-portfolio.
  • Week 4 : Mr. Vinod asked us to complete our task 1 blogger, including Exercise 1 and Exercise 2. After that, he has brief us about Task 2.




INSTRUCTIONS



Task 1 : Exercise 1 - Typographic Systems

In this exercise, we have been asked to explore 8 types of typographic systems that Mr. Vinod has teach in the lecture by using the content that given in MIB. Below are the 8 typographic systems : 

  1. Axial
  2. Radial
  3. Dilatational
  4. Random
  5. Grid
  6. Modular
  7. Transitional
  8. Bilateral

Requirement of this exercise: 

  • Size 200*200 mm
  • Black may be used with one additional color, but only one
  • Limited use of graphic element

Research

Before proceed to the sketches, I have do some research on Internet.

Reference #1


Reference #2


Sketches 

Sketch #1

Sketch #2

Digitization 

Progress #1

Based on the sketches above, I have digitize 3 different format for each systems. After getting the feedback from Mr. Vinod, I have do some adjustment on my format. 

Final 

Axial System (JPG)

Radial System (JPG)

Dilatational System (JPG)

Random System (JPG)

Grid System (JPG)

Modular System (JPG)

Transitional System (JPG)


Bilateral System (JPG)



Task 1 Exercise 1 Final Outcome Without Guideline (PDF)


Task 1 Exercise 1 Final Outcome With Guideline (PDF)


Task 1 : Exercise 2 - Type & Play

In this exercise, we have been asked to finding type from the image that we select. We need to analyze, dissect and identify potential letterforms within the dissected image. After that, we need to use the fonts that we create to create a poster.

Requirement of this exercise : 

  • Image
  • Extracted Letterforms on baseline (illustrator)
  • Reference font
  • Final letterforms on baseline
  • Original extraction and final letterforms next to each other

Digitization letterform

Before I start the sketches, I choose the image that I want to use for finding type first. As shown as below, I has choose the cat as the selected image to finding type. 

Selected image for Type & Play

As shown as the image below, I have found five letters from the cat which is 'M', 'V', 'T', 'C', 'O'.

Extplored letterform

For more easy to see the type that I found, I move it to a plain artboard and I start to digitize.

Extract letterform

Below are the progress of my digitization. First, I extract the letterform then I adjust the angle of the letterform to increase the readability. After that, I adjust the letterform based on the reference typeform. During this session, I found that my letterform are lack of the element of cat, it doesn't present like the letterform that related with cat. Therefore, I decide to add some element to let the letterform looks like cat such as the cat ear and cat beard.

Digitize progress

Image below has shown the final digitization of my letterform.

Final digitization

Digitization Poster

First, based on the image that I choose to explore letterform is a picture of cat, therefore I have choose a cat fur as the background picture.

Digitization Progress #1

Next, I added on the letterform that I create on the artboard and arrange them in sequence. I also add some line to seems like letterform tied up by the rope.

Digitization Progress#2

Last, I add some word and some logo on the poster to make it seems like a movie poster. After I confirm there is no more adjustment, I export the poster.


Below are the final outcome of my poster.



Final Task 1 : Exercise 2 Type & Play

Final type finding (JPG)

Final Type & Play Poster (JPG)

Final Type & Play (PDF)







FEEDBACK

Week 2 : 

General Feedback : Focus on the modular system more and the hierarchy. Black color with red color doesn't work.

Specific feedback : Don't put all the background become black color. Need to redo for the Bilateral system, Modular system and axial systems. Other need to do some adjustment.

Week 3 : 

General Feedback : Don't forget to focus on the characteristic of the sample picture that you choose.

Specific feedback : The fonts looks nice. Can proceed to poster.

Week 4 : 

General Feedback : Make sure the background and the font is related.

Specific feedback : Absent.


REFLECTIONS

    *Experience

          During this tasks,  I found that system really have a lot of different and we must pay a lot of attention when we design the formatting. Sometimes a little detail can make the formatting not align with the system that we choose. I have faces a hard challenge on the typography system especially the modular system. Fortunately, I have solved these problem with the helps of Mr. Vinod. Besides that, I also found that design the letterform based on the characteristic of the image that we choose are quite fun and can let the letterform become special. 

    *Observation

            During this tasks, I found that the typography systems is useful on formatting, it helps designer to arrange the text in a pretty way more easier and it has increase the readability of the text. Besides that, the characteristic can really makes the letterform become special and memorable. 

    *Findings

             Different types of typography systems can convey different feeling to audience. Therefore we should try to arrange the text by following the typography systems so that we could create a great formatting. Besides that, to let the typeform we create, we should not only pay attention on the readability but also the characteristic of the typeform. Different characteristic can lets the typeform convey different emotion to audience.



FURTHER READING

The picture below are the books that I choose for my further reading. Due to I have faced some challenge during the exercise 1, I decide to read this book to try to solved my problem that I faced in my exercise.

Typographic System Book - Kimberly Elam



The picture above has shown the example of axial system that given in this book. Axial system is one of the simplest systems. In axial systems, all elements are organized either to the left or right of a single axis. This is a branching arrangement from an implied main line. The axis can exist anywhere in the format to create a symmetric or asymmetric composition.



Picture above are the example of radial systems that given by this book. Compare to axial system, radial systems doesn't organize all elements to the left or to the right of a single axis but it organized all elements from a central point of focus like rays. In radial systems, the compositions are dynamic because the eye is drawn to the focal point of the radial compositions.

Comments