Task 1 / Exercises: Typographic Systems & Type

Task 1 / Exercise : Typographic System & Type 

Week 1 - Week 4 / 30.8.23 - 20.9.23

Advanced Typography / Exercise

Low J- Yin / 0352888

Bachelor of Design in Creative Media / Advance Typography

---

INTRODUCTION 

---

LECTURERS

Week 1 / Typographic system

Design based on a structural system. According to the eight major variations : 

1. Axial 

2. Radial 

3. Dilatational

4. Ramdom

5. Grid 

6. Modular 

7. Traditional

8. Bilateral

Element such as hierarchy, order of learning, legibility, and contrast come into play.

fig 1.0 arial system

Arial System

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

fig 1.1  dilatational system

Dilatational System

Elements expand from a central point in a circular fashion.

fig 1.2 ramdom system

Ramdom System

Element appears without any relationships or specific patterns.

fig 1.3 grid system

Grid System

System of horizontal and vertical divisions.

fig 1.4 traditional system

Traditional System

Informal system of layered banding.

fig 1.5 modular system

Modular System

non-objective elements are constructed in as a standardised units.

fig 1.6 bilateral system

Bilateral System

All text arranged symmetrically on a single axis.

Week 2 / Typographic

Composition

-Translating it into typographic layouts, more relevant to imagery.

fig1.7 emphasis

Principle of Design Composition

1. Emphasis

2. Repetition

3. Isolation

4. Symmetry

5. Asymmetry

6. Alignment

7. Perspective

Environment Grid

The exploration of an existing structure or numerous structure combined.

Form and Movement

The turn page of slowed-down animation in the form that constitutes the placement of image, text and colour.

Week 3 / Context & Creativity

-Handwriting is crucial in typography because it served as the model for the first mechanically created letterforms, shaping their form, spacing, and conventions. This became the standard that mechanical type aimed to replicate.

-During the digital revolution, Western societies began digitizing their historical creations, and type foundries created, marketed, and licensed them.

-Creativity and originality often go hand in hand. To foster these qualities, we must reflect on our own histories, civilizations, cultures, and communities. This allows us to build upon our heritage rather than borrowing from cultures and developments without context, relevance, or relatability.

Letter form thru the ages:

1. Early Greek /5th century B.C.E.

Letters were drawn by hand, without compasses or rules, and had no serifs. Over time, they became thicker, the openings in letters got smaller, and serifs were added.

2. Roman Uncials /4th century

Roman letters became rounder and more curved, allowing for faster writing with fewer strokes.

3. English Half Uncials / 8th century

In England, Uncial letters evolved into a slanted and condensed form.

4. Carolingian Minuscule

This style introduced capital letters at the start of sentences, spaces between words, and punctuation. It later influenced the development of lowercase Roman type.

5. Black Letter /12-15th century

Known for tight spacing and condensed letters with evenly spaced vertical lines. This helped save materials in book production.

6. The Italian Renaissance

 There was a rediscovery of ancient letterforms called Antica. Renaissance thinking about form, applied to art and architecture, also influenced letterforms, resulting in more refined and rationalized letters.

Week 4 / Designing type

1. Searching

   - Learn about type history, anatomy, and terminology.

   - Define the type's purpose and where it will be used.

   - Explore existing fonts for inspiration and context.

2. Sketching

Create initial designs, either by hand or digitally.

3. Digitization

Use software like FontLab or Glyphs App to turn sketches into digital fonts. 

4. Testing

Evaluate the typeface's performance and make improvements based on feedback. Testing ensures readability and legibility, especially for text typefaces. Display typefaces prioritize form expression.

5. Deployment

Even after releasing the typeface, issues may arise. Continuous testing and refinement are essential to address any remaining problems.

Week 5

Importance of Perception:

  - Perception in typography involves reader's visual navigation and interpretation.

  - Contrast, form, and organization play key roles in shaping reader's perception.

Form:

  - Form is crucial for visual impact and initial impression.

  - Displaying type as a form highlights unique letterforms and abstract presentations.

Gestalt Theory

  - Gestalt theory emphasizes the significance of the whole over its parts.

Law of Similarity:

    - Elements similar to each other are perceived as a unified group.

Law of Proximity

    - Elements close together are perceived as a unified group.

Law of Closure

    - Mind tends to complete figures or forms, filling in missing parts.

Law of (Good) Continuation:

    - Objects are perceived as singular and uninterrupted even when intersecting.

  Contrast:

    - Utilize differences in size, weight, and style to guide reader's attention.

Form and Organization:

    - Structuring content cohesively enhances readability and comprehension.

  

Visual Impact:

    - Make a strong first impression using distinct and engaging letterforms.

---

Task 1 / Exercises: Typographic Systems & Type

For this exercise, we will need to use by the eight system state below to create an 200x200 mm poster :

1. Axial

2. Radial

3. Dilatational

4. Ramdom

5. Grid

6. Modular

7. Transitional

8. Bilateral

fig 1.8 exploration & progression (29/ 8/23)

After the briefing and the lecture playlist, I had started to develop the work. By the research and exploration, I had develop 7 different system. I am not satisfied of the final output, so I decided to re-do all of them. 

fig 1.9 develop of arial system  (29/ 8/23)

I had re-design the #3 design from the previous artwork.  The arrangement of design #1 are not that good so I develop design #2. In order to make the page look neater and more organized, I reduced the types of fonts and added a pink colour background on left size to emphasize the ordering and arrangement of arial system.

fig 2.0 develop of grid system  (29/ 8/23)

The font used at the beginning on design #1 was too thick and heavy, may causes too heavy on the left side of the page. I re-design the page with another type font without changing the font colour and maintain as white colour meanwhile the background coloured with pink. The grid line of #1 design was not arranged properly and correctly, so I adjust the ordering and arrangement.

fig 2.1 develop of dilatational system  (29/ 8/23)

For this part, I arrange the word more clear and tidy, without changing too much of the design between both #1 design and #2 design.

fig 2.2 develop of radial system  (29/ 8/23)

The #1 was the final design poster and its develop from #2 design. As same on top, I think that the word are too heavy and too much of focus point, may interupt audience focal point so I reduce the important part, to let the poster more tidy and specific.

fig 2.3 develop of random system  (29/ 8/23)

I tried different ways to design out the design of random, and end up develop out #3 design.

Here is the final outcome of my typography system poster (PDF) :

fig 2.4 Typography system poster / PDF, (2/9/23)

fig 2.5 Typography system poster / PDF with grid , (2/9/23)

Here is the final outcome of my typography system poster (PDF) :

fig 2.6 Final modular system

fig 2.7 Final bilaterial system

fig 2.8 Final dilatational system

fig 2.9 Final radial system

fig 3.0 Final axial system

fig 3.1 Final traditional system

fig 3.2 Final traditional system

fig 3.3 Final grid system

*Files had saved as 300dpi.

Exercise 2 : Type & Play

We will need to select an image and identify potential letterform within the dissected image. The from would be explored and digitized, the final outcome would be represented as movie poster.

fig 3.4 Screen grab outline stroke

First, I identify the shape and form from the photo i had chosen. The texture represent a very bumpy and long characteristic. The object had used in image, named fish noodle, its a china noodle, we cooked with hotpot. 

fig 3.5 Screen grab the progress of refine form

I had slowly develop the word: P A S T R.

I had used fish noodle and using letter as "PASTAR". By the progress, I scared the bumpy letter form would make the audience hardly know what the letterform is, so I had refined it, and make it seems like words as the reference I had found.

fig 3.6 Screen grab the progress of refine form 

Here is the screen grab of the progress. I had make the "s" as small letter, for result, the small letter "s" are better view than big letter "S". After the general feedback and specific feedback that sir had given, i found out that I am to focus on the normal letterform, tried too hard to make it looks like letterform causes the characteristic of the letter, and the shape and form had been removed/ deleted. The final result did not represent the bumpy feeling. 

fig 3.7 Screen grab the compare of letters form

To focus on the characteristic, I had to re-do the progress and try to keep the shape and form meanwhile making it more bumpy. The result still not really representing the characteristic, so i go asked sir for more specific feedback, and tried redo again.

fig 3.8 refined letterform

After refined and editing, representing the fishy and bumpy feeling. I keep the wave between the stroke, i had also tried to connect the word together to match the noodle feeling but the outcome not that well so i keep it. 

Here is the final outcome of my letterform:

fig 3.9 Letter found in fish noodle

fig 4.0 letter "P"

fig 4.1 letter "A"

fig 4.2 letter "S"

fig 4.3 letter "T"

fig 4.4 letter "R"

Final outcome PDF:

fig 4.5 Final letterform / PDF , (12/9/23)

By the final outcome of my letterform, I had started design my movie poster.

fig 4.6 The progress of movie poster

To represent the fishy, I had search different type of image for background. I had also added the plastic.png into the design. After feedback, sir had tell me to changed the background and maintain the plastic feeling on top.

Here is the final outcome of movie poster:

fig 4.7 Final outcome movie poster / JPG , (20/9/23)

Final Movie Poster PDF:

fig 4.8 Final outcome movie poster / PDF , (20/9/23)

                           

---

FEEDBACK

Week 1

Sir had brief us assignment and task.

Week 2

General Feedback
Make sure the words are above the guide. The point size is better between 8pt - 12 pt. White Space and Grey space need to be balanced.

Specific Feedback
Overall well. For the grid part need to be re-do.

Week 3

General Feedback
The word must extracted as the natural shape. The letterform need to have characteristics.

Specific Feedback
The details of the bump and the curve could be more extracted, the words are top refined.

Week 4
General Feedback
Concept and idea need to be connected. The words need to be explained from the design.

Specific Feedback
Need to change the poster background.

---

REFLECTION 

Experience

It is a very fun module when we getting know how the typographic system poster work meanwhile we designed them to know it better, understanding the guideline and arrangement. Knowing different type font created a visual image. Not only the system poster and also the movie poster, to find out the word hidden in the image! i had search so many image and find out so many type font hide inside my gallery that I din't realised. 

Observation

The progression and good quality take times to design a good and visual poster. I had spend hours sitting in front of laptop just to get a final result that I satisfied. I know I am not good at design era but the progress and finding really make me excited, and how satisfied when the final result had showed.

Findings

Design was not like everyone said : " you just need to click and drag, that's it." The "click" and "drag" took us thousand hours to only figure out how to design it better. Typography are everywhere on the world, even right now I am looking the typography of my keyboard. I truly like this module and feel thankful for sir, I learned lots of think from him, I know that i might not done the best work in class, but i know i had tried hard to target my aim.

---

FUTHER READING

"The Geometry of Type"

fig 4.9 The geometry of type

The book embarks on a captivating journey, unveiling the historical and cultural significance underpinning various typefaces. Simon Garfield, a gifted author, adeptly blends history, design, and wit to furnish readers with a comprehensive comprehension of how fonts profoundly influence our daily lives.

The book traverses a broad spectrum of typography-related topics, including the origins of well-known typefaces, the transformation of fonts in the digital era, and the distinctive attributes and eccentricities of different designers and typographers. Each chapter explores a distinct facet of typography, making it approachable and gratifying, even for those unacquainted with design.
Its exceptional talent for breathing life into what might seem a mundane world of fonts. Garfield employs real-life illustrations and anecdotes to demonstrate how fonts shape our perceptions, stir emotions.

Through the pages, I had cultivate a heightened appreciation for the subtleties and complexities of typefaces while uncovering the narratives behind some of history's most iconic fonts. This book is not solely an educational resource; it also delivers a highly enjoyable and enlightening reading experience.