Advanced Typography: Task1 Exercises

 24/9/2024 - 15/10/2024 (Week1-Week4)

Amber Tan Jing Jing (0372746)

GCD61004 / Advanced Typography / Bachelor of Design in Creative Media 

Task1 Exercise 1 & 2

---

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Task 1-Exercise1 / Typographic System

               -Exercise2 / Type and Play

4. Feedback

5. Reflection

6. Further Reading

---

LECTURES

Week1

AdTypo_1_Typographic Systems

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.

1. Eight major variations:

• Axial System: All elements are organised to the left or right of a single axis.

 
Figure 1.1 Axial System

•  Radial System: All elements are extended from a point of focus.

  
Figure 1.2 Radial System

•  Dilatational System: All elements expand from a central point in a circular fashion.

 
Figure 1.3 Dilatational System

• Random System: Elements appear to have no specific pattern or relationship.

 

Figure 1.4 Random System

• Grid System: A system of vertical and horizontal divisions.

 
Figure 1.5 Grid System

• Transitional System: An informal system of layered banding.

 
Figure 1.6 Transitional System

• Modular System: A series of non-objective elements that are constructed as a standardised unit.

 
Figure 1.7 Modular System

• Bilateral System: All text is arranged symmetrically on a single axis.

 
Figure 1.8 Bilateral System

Week2

AdTypo_2_Typographic Composition

Principles of Design Composition

When we think about composition, we think about the dominant principles underpinning design composition, which are emphasis, isolation, repetition, symmetry and asymmetry, alignment, perspective to name a few.

Figure 1.9 Principles of Design 

The Role of Thirds

Suggest that a frame (space) can be divided into 3 columns and 3 rows. The intersecting lines are are used as guide to place the points of interest, within the given space.

Figure 1.10 The Role of Thirds

Typographic Systems

From the 8 systems the most pragmatic and the most used system is the Grid System (or Raster Systeme).It was further enhanced by what is now come to be termed as the Swiss (Modernist) style of Typography.

Environmental Grid

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

Figure 1.11 Environment Grid

Form and Movement

This system is based on the exploration of an existing Grid Systems.The turning of pages in a book as a slowed-down animation in the form that constitutes the placement of image, text and color. The placement of a form on a page, over many pages creates movement.

Figure 1.12 Form and Movement

Week3

AdTypo_3_Context & Creativity

Handwriting

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.

Figure 1.13 Evolution of the Latin Alphabet

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. 

Figure 1.14 Hieroglyphics

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.

Figure 1.15 The Evolution of Middle Eastern Alphabets

Figure 1.16 The Evolution of the Chinese script

Figure 1.17 The Brahmi script

Programmers and Type Design

More vernacular scripts are being produced by 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.

Local Movements and Individuals

Huruf a local group of graphic designers interested in the localized lettering of latin and vernacular letters painted or inscribed on walls and signages are amongst the more prominent organizations digitizing and revitalizing typefaces in Malaysia. 

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

Week4

AdTypo_4_Designing Type

General Process of Type Design

1. Research

	Understand type history, type anatomy and type conventions. We should also know terminologies, side-bearing, metrics, hinting... 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. 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. 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.
	3. Digitization Professional software: 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. Texting 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 type) the readability and legibility of 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.  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 a letterforms and is a possible method to build/create/design your letterform. Figure 1.18 Construction grid for roman capitals using 8 x 8 cells Construction and considerations 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. 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. Figure 1.19 Classification according to form and construction Context & Creativity The need/motivation can be intrinsic and extrinsic. Intrinsic can be best summed up this way, the designer has an inexplicable need driven by interest to design a typeface, and seeks out a form that comes close to fulfilling a desire. Extrinsic can be summed up in this way the designer has been commissioned or the student-designer has a task to complete that involves designing a typeface. Week5 AdTypo_5_PerceptionAndOrganisation Perception in typography deals with the visual navigation and interpretation of the reader via contrast, form and organisation of the content. Content can be textual, visual, graphical or in the form of colour.  Figure 1.20 Methods of Contrast by Rudi Ruegg 7 kinds of contrast 1. Contrast/Size Figure 1.21 Contrast/Size A contrast of size provides a point to which the reader's attention is drawn. The most common use of size is in making a title/ heading noticeably bigger compared to the body text. 2. Contrast/Weight Figure 1.22 Contrast/Weight Describes how bold type can stand out in the middle of lighter type of the same style. Using rules, spot, squares is also provide a "heavy area" for a powerful point of visual attraction or emphasis, therefore not only types of varying weight. 3. Contrast/Form Figure 1.23 Contrast/Form A distinction between a capital letter and its lowercase equivalent, or a roman letter and its italic variant, condensed and expanded versions of typeface are also included under the contrast of form. 4. Contrast/Structure Figure 1.24 Contrast/Structure A different letterforms of different kinds of typefaces. For example, a monoline sans serif and a traditional serif, or an italic and a blackletter. 5. Contrast/Texture Figure 1.25 Contrast/Texture Created by putting the contrasts of size, weight, form, and structure together. Texture refers to the way the lines of type look as a whole up close and from a distance. 6. Contrast/Direction Figure 1.26 Contrast/Direction 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 short line can also create a contrast. 7. Contrast/Colour Figure 1.27 Contrast/Colour The use of color is suggested that a second color 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 colors that are used. Form Figure 1.28 Form Form refers to the overall look and feel of the elements that make up the typographic composition. It is the part that plays a role in visual impact and first impressions.  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. Organisation / Gestalt Gestalt is a german word meaning 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.  The Gestalt psychologists, especially Max Wertheimer, developed a number of "laws" that predict how perceptual grouping occurs under a variety of circumstances.  Gestalt theory emphasizes that the whole of anything is greater than its parts-this is based on the idea that we experience things as unified whole. Perceptual Organisation / Groupings Figure 1.29 Gestalt Principles of Grouping 1. The Law of Similarity States that elements that are similar to each other tend to be perceived as a unified group.  Similarity can refer to any number of features, including color, orientation, size, or indeed motion.  2. The Law of Proximity States elements that are close together tend to be perceived as a unified group.  This straightforward law states that items close to each other tend to be grouped together, whereas items further apart are less likely to be grouped together. 3. The Law of Closure  Refers to the mind's tendency to see complete figures or forms even if a picture is incomplete, partially hidden by other objects, or if part of the information needed to make a complete picture in our minds is missing  4. Law of (Good) Continuation  Holds that humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect.  The alignment of the objects or forms plays a major role for this principle to take effect.

---

INSTRUCTIONS

---

TASK

Task 1: Exercise 1 - Typographic System

In this exercise, we need to create 8 typographic posters. We are to explore 8 major variations of typographic systems, like Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and Bilateral. The posters should be designed in Adobe InDesign, with a size of 200 x 200 mm. We can use black and one other colour. Graphical elements can be used but limitedly. 

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

Manish Acharia, 11AM-12PM

Lecture Theatre 12

Process

Figure 2.1 Process in InDesign, Week 1(24/9/2024)

Typographic Systems

1. Axial

Fonts Used:

ITC New Baskerville Std (Roman, Bold)

Figure 2.2 Axial System, Week 1(24/9/2024)

On the left side, during my first attempt, I didn’t use any rotation angles, which made the design look very monotonous. So, I set the rotation angles to 20° and -20°. However, the black text on white paper made the entire screen feel empty. To address this, I decided to use white text on black paper. On the right side, I used "Bauhaus Design Theory" as a central line. To create a sense of balance in the poster, I placed "The ABCs of" and "Lecture Theatre 12" on the left side.

 

2. Radial

Fonts Used:

Left: ITC New Baskerville Std (Roman, Bold)

Medium: Futura Std (Book, Bold, Medium)

Right: Futura Std (Book, Bold, Medium)

Figure 2.3 Radial System expand, Week 1(24/9/2024)

On the left side, I used the center as a focal point and arranged the text at right angles around it. Initially, the design was all in black and white, which felt very monotonous. To improve it, I changed the text to white on a black background and added some colored lines, making the overall design feel more dynamic and less monotonous. On the middle side, I used two circles to expand the text. Afterward, I removed the circles, leaving only the shapes. On the right side, since I thought the poster in the middle looked a bit too empty, I changed it to white text on a black background and also adjusted the color of the words inside the circle.

3. Dilatational

Fonts Used:

ITC New Baskerville Std (Roman)

Figure 2.4 Dilatational System, Week 1(24/9/2024)

For the dilatational system, I expanded all the text outward from a central point in a circular arrangement. Initially, I didn't add any lines at first, the whole design looked too messy. To improve it, I ended up adding some circular lines.

4. Random

Fonts Used:

Left: ITC New Baskerville Std (Roman, Bold, Italic, Bold Italic)

Right: Univers LT Std(49 Light Ultra Condensed, 39 Thin Ultra Condensed), Futura Std (Book), Serifa Std(45 Light, 56 Italic)

Figure 2.5 Random System, Week 1(24/9/2024)

On the left side, I filled the entire screen with text, but the key points were not visible, and the design felt cluttered. To improve it, I enlarged the title and added some color. On the right side, I wanted the poster to have a casual feel, so I used repeated text, overlapping it and placing it at different angles.

5. Grid 

Fonts Used:

Futura Std (Book, Heavy)

Figure 2.6 Grid System, Week 1(24/9/2024)

For the grid system, I started by placing the date and name on the right side. Then I was unsure about where to put the title. Eventually, it occurred to me that the title could be placed vertically. Then, I placed "Lecture Theatre 12" vertically to create a more coordinated look.

6. Transitional

Fonts Used:

Bodoni Std (Roman, Bold, Italic)

Figure 2.7 Transitional System, Week 1(24/9/2024)

 For the transitional system, I want to present a gradient form, so the edges of the text are not aligned.

7. Modular

Fonts Used:

ITC New Baskerville Std (Roman, Bold)

Figure 2.8 Modular System, Week 1(24/9/2024)

Before creating the modular system, I watched Mr Vinod's video, which taught us how to establish the rows, columns, and margins. Then, I followed that video to place my text where I wanted it.

8. Bilateral

Fonts Used:

Futura Std (Book, Heavy)

Figure 2.9 Bilateral System, Week 1(24/9/2024)

For the bilateral system, I placed all the text but felt that something was missing. Then I realized that adding a line in the middle made the entire poster more coordinated.

Final Task 1: Exercise 1 - Typographic Systems

Figure 2.10 Final Axial System-JPEG, Week2 (1/10/2024)

Figure 2.11 Final Radial System-JPEG, Week2 (1/10/2024)

Figure 2.12 Final Dilatational System-JPEG, Week2 (1/10/2024)

Figure 2.13 Final Random System-JPEG, Week2 (1/10/2024)

Figure 2.14 Final Grid System-JPEG, Week2 (1/10/2024)

Figure 2.15 Final Transitional System-JPEG, Week2 (1/10/2024)

Figure 2.16 Final Modular System-JPEG, Week2 (1/10/2024)

Figure 2.17 Final Bilateral System-JPEG, Week2 (1/10/2024)

Figure 2.18 Typographic System Final (PDF), Week 2 (1/10/2024)

Figure 2.19 Typographic System Final (PDF)-with guides, Week 2 (1/10/2024)

Task 1: Exercise 2 - Type and Play

Part 1: Finding Type

In this exercise, we are going to select an image of main object or structures, or something from nature.

We will identify potential letterforms within the dissected image. The forms would be explored and ultimately digitized. Image below are find from Pinterest.

Figure 2.20 Image 1 and 2, Week2 (1/10/2024)

After I find the image, I decided to find the letters in these images. Then I chose one to digitized.

 
Figure 2.21 Extraction, Week2 (1/10/2024)

After I used the pen tool in Adobe Illustrator to trace the gap, I decided to choose image 2 to digitized.

Figure 2.22 Traced letters - H, A, F, Y, R, Week2 (1/10/2024)

Figure 2.23 Extracted letterforms - H, A, F, Y, R, Week2 (1/10/2024)

Figure 2.24 Typeface References - Futura Std (Book), Week2 (1/10/2024)

Reference is helpful for us in providing direction when refining. I chose Futura Std as my typeface references. It was because I think this font is a bit similar to the letters I found.

Figure 2.25 Digitalization Progress (with guides and no guides), Week2 (1/10/2024)

Based on Mr Vinod's feedback, I need to observe the image more closely. I have to select a larger area to identify the letterforms more effectively. So, I redo it.

New Attempt

Figure 2.26 Traced letters - H, V F, Y, A, Week3 (9/10/2024)

Figure 2.27 Extracted letterforms - H, V, F, Y, A, Week3 (9/10/2024)

Figure 2.28 Typeface References - Futura Std (Bold), Week3 (9/10/2024)

Figure 2.29 Digitalization Progress, Week3 (9/10/2024)

Figure 2.30 Process, Week 3 (9/10/2024)

Final Outcome of Part 1

  Figure 2.31 Image and Extraction, Week4 (14/10/2024)

Figure 2.32 Overall Process, Week4 (14/10/2024)

Figure 2.33 Typeface References - Futura Std (Bold), Week4 (14/10/2024)

Figure 2.34 Final Letterform (baseline), Week4 (14/10/2024)

Figure 2.35 Final Letterform - JPEG, Week4 (14/10/2024)

Figure 2.36 Original extraction (top) and final letterform (bottom) comparison, Week4 (14/10/2024)

Figure 2.37 Final outcome of H - JPEG, Week4 (14/10/2024)

Figure 2.38 Final outcome of V - JPEG, Week4 (14/10/2024)

Figure 2.39 Final outcome of F - JPEG, Week4 (14/10/2024)

Figure 2.40 Final outcome of Y - JPEG, Week4 (14/10/2024)

Figure 2. 41 Final outcome of A - JPEG, Week4 (14/10/2024)

Figure 2. 42 Part 1, Final Finding Type - PDF Compilation, Week4 (14/10/2024)

Task 1: Exercise 2 - Type and Play

Part 2

I used Photoshop to select and crop the image.

Figure 2. 43 Photoshop, Week4 (14/10/2024)

Final Outcome of Part 2

Figure 2. 44  Part 2, Final poster - JPEG, Week4 (14/10/2024)

Figure 2. 45 Part 2, Final Poster - PDF, Week4 (14/10/2024)

Final Task 1: Exercise 2 Compilation

 

Figure 2.46 Image and Extraction, Week4 (14/10/2024)

Figure 2.47 Overall Process, Week4 (14/10/2024)

Figure 2.48 Typeface References - Futura Std (Bold), Week4 (14/10/2024)

Figure 2.49 Final Letterform (baseline), Week4 (14/10/2024)

Figure 2.50 Final Letterform - JPEG, Week4 (14/10/2024)

Figure 2.51 Original extraction (top) and final letterform (bottom) comparison, Week4 (14/10/2024)

Figure 2.52 Final outcome of H - JPEG, Week4 (14/10/2024)

Figure 2.53 Final outcome of V - JPEG, Week4 (14/10/2024)

Figure 2.54 Final outcome of F - JPEG, Week4 (14/10/2024)

Figure 2.55 Final outcome of Y - JPEG, Week4 (14/10/2024)

Figure 2.56 Final outcome of A - JPEG, Week4 (14/10/2024)

Figure 2. 57 Part 1, Final Finding Type - PDF Compilation, Week4 (14/10/2024)

Figure 2. 58  Part 2, Final poster - JPEG, Week4 (14/10/2024)

Figure 2. 59 Part 2, Final Poster - PDF, Week4 (14/10/2024)

---

FEEDBACK

Week 1

General feedback: We are to explore 8 major variations of typographic systems using the 10 typefaces provided. We need to update our eportfolio with Lectures and task process work followed by final outcomes.

Week 2

General feedback: I received positive feedback from Mr Vinod.

Specific feedback: Overall the design is good.

Week 3

General feedback: Redo it.

Specific feedback: Need to be more observation. Select a larger area to identify the letterforms more effectively.

Week 4

General feedback: I received positive feedback from Mr Vinod.

Specific feedback: Great job.

---

REFLECTION

Experience

Through exercise 1, I learn more about the typographic system. Before I started to do this exercise, I find a lot of information about the typographic system. This makes me understand each of the eight major typographic variations we explored. Besides, Mr Vinod also taught us how to establish the rows, columns, and margins. Through exercise 2, at first I didn't understand what to do and it ended up being the worst thing. After the Mr Vinod's explanation, I finally knew what to do, so I did it again.

Observation

I think the most difficult exercise is exercise 2. It was because I initially struggled to grasp the instructions. It was frustrating for me, because I got it wrong on the first try and had to do it all over again. After Mr Vinod's feedback, I understood what should be done. So I found that the feedback in class is not only for myself. The feedback given by Mr Vinod to others can also be used to learn from other people's lessons and improve the quality of my work. Adjustments again and again have also improved the quality of my works a lot.

Findings

Through these exercise, I found that the revisions made after the feedback made my work better. Every adjustment brings significant improvements.

---

FURTHER READING

Figure 3.1 Typographic Systems

All design is based on a structural system. These systems or frameworks can be broken down into eight major variations with an infinite variety of compositions within each system.Typographic organization is complex because the elements are dependent on communication in order to function.

The typographic systems are akin to what architects term shape grammars. The eight typographic systems are similar in that each system has a set of rules that is unique and provides a sense of purpose that focuses and directs the decision-making.

• Radial System: Strong diagonal direction inherent in radial compositions, they are visually active and dynamic. Clearly, however, radial compositions are difficult to read and are most appropriate for visual messages with limited amounts of text.
• Dilatational System: The most readable dilatational compositions bring a sense of order to the text through composition. Use of alignment can create order through interior axes in a composition. A step-stairs arrangement can guide the eye through rhythm and repetition. Grouping arcs of text can simplify compositions.
• Random System: Variation in the textures of type sometimes to the extreme communicate a change in the ordinary. It is valuable in this system to make the composition abstract by regarding the lines of text as texture only, and not as elements of communication.As texture the lines of text become important compositionally in terms of the shapes and negative space they create.