Task 1: Typographic System - Type & Play

Advanced Typography · Task 1 · Typographic Systems · Exercise 1 & 2

---

22 APRIL 2024 - 2024 / Week 1 - Week

Wu ZiYang / 0368325

Advanced Typography / Bachelor of Design (Hons) in Creative Media 

Task 1 : Typographic Systems · Exercise 1 & 2

---

LECTURES

Week 1 | AdTypo_1_Typographic Systems

What is Typography? 

Typography is a fundamental skill in design. It is defined as the art and technique of arranging type to make written language legible, readable, and appealing. We can genarally see typography in posters, animation (as movie title/gif), website design, application design, signage design, logo type, etc.

In this video, Mr Explains to us that design is actually a system, divided into eight different structures.


There are eight categories:

• Axial

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

• Radial 

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

• Dilational

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

• Random 

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

• Grid

Grid System: A system of vertical horizontal divisions.

• Transitional

Transitional System: An informal System of layered banding.

• Modular

Modular System：This is a standard system for separating text vertically and horizontally.

• Bilateral 

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

Finally, it may be difficult at first, but as you become more proficient, you will gain experience and understand the uniqueness of these systems.

Week 2 Typographic Composition

1.Principles of Design Composition
emphasis
isolation
repetition
symmetry and asymmetry
alignment
perspective

2.The Rule of Thirds
A composition guide for photographers. The points of interest are positioned inside the allotted space using the intersecting lines as a guide.

3. Environmental Grid
Based on an investigation of an existing structure or a combination of multiple structures.

4. Form and Movement
Based on the exploration of an existing Grid System. There is movement when a form is positioned over many pages. The forms could be text, colour, or graphics.

WEEK 3 Advanced Typography: Context and Creativity 

Hieroglyphs: The writing system ancient Egyptians used for inscriptions mostly on walls of temples and tombs, as well as statues, coffins, and sarcophagi.
• Ideograms represent things they depict.
• As determinatives to indicate general word ideas.
• As phonograms to represent sounds that spell out individual words.

Brahmi Script: The earliest writing system developed in India after the Indus script. All modern Indian scripts and several hundred scripts found in Southeast and East Asia are derived from Brahmi.

Chinese Script: From the Oracle bone to Seal Script to Clerical Script, Traditional and Simplified scripts.

In India, groups like Ek Type and Indian Type Foundry have done great work creating new fonts and helping India use digital technology. They have made a big impact on India's digital world and helped make new fonts popular again. These groups are dedicated to making fonts that can be used for many languages and to help people from different language groups communicate and preserve their cultural traditions in India.

English Half Uncials, 8th C.: In England, the uncial evolved into a more slanted and condensed form.

Carolingian Minuscule.: Capitals at the atsrt of a sentence, spaces between words and punctuation. A new script emerged, the Carolingian minuscule. Become the Humanistic writing of the fifteenth century.

Movable Type.: allowed the dismanting and resetting of text. This innovation was pioneered in China but achieved in Korea.

WEEK 4 Advanced Typography: Designing Type

Type Design Process

1. Research: Gain knowledge of type history, anatomy, conventions, and terminologies, determine type purpose and applications
2. Sketching: Traditional/ digital.
3. Digitisation Professional Software: FontLab and Glyphs App. Some designers also use Adobe Illustrator then only the specialised font apps.
4. Testing: Testing and prototyping are crucial in refining and correcting typefaces, with readability and legibility being important depending on the typeface category (display type/text type)

5. Deploy: Despite deploying a completed typeface, teething issues may arise post-deployment, necessitating ongoing revision and rigorous testing to minimize these issues.


Construction and Considerations

When designing a new type, consider different forms and constructions, including visual corrections like overshoot and vertical alignment between curved and straight forms.

• Fitting the type: The text requires a visual correction for letter distance and uniform white space, ensuring the same appearance between the letters.
• Ink Traps: commonly utilized for fast, fast, and less precise printing on cheap absorbent paper, as they allowed excess ink to remain visible at the corners.

---

INSTRUCTION

---

Exercises 1

1. Typographic Systems

Fig1.1 Axial System 1

Fig1.2 Axial System 2

Fig1.3 Radial System 1

Fig1.4 Radial System 2

Fig1.5 Dilational System 1

Fig1.6 Dilational System 2

Fig1.7 Random System 1

Fig1.8 Random System 2

Fig 1.9 Grid System 1

Fig 1.10 Grid System 2

Fig 1.11 Transitional System 1

Fig1.12 Transitional System 2

Fig1.13 Modular System 1

Fig1.14 Modular System 2

Fig1.15 Bilateral System 1

Fig1.16 Bilateral System 2

PDF

 

     

Exercise 2

According to the requirements, we need to use an image that meets the requirements, use our subjective initiative to find an image that matches the shape of the letters, and process it into a new font.
According to Mr Vinod's request, the image must be composed of a relatively single material. It just so happens that I captured some similar images that I will be creating with

Progress
I chose this leaf, it has a very special grain, I want to study and analyze it.

Fig 2.1

I extracted the lines in the picture and showed them.

Fig 2.2 Tracing the Letterform

Mr. Vinod said these letters are to small, I should find some bigger letters. And I can't use the single line, I should draw the letters in a area.

So ,I change another picture.

Fig 2.3 

This is an image I found on pinterest that fully demonstrates the leaf texture, which has the potential to be a font design, and the leaf texture offers endless possibilities for exploring different letters.

Fig 2.4 Tracing the Letterform

I used Pen Tool in Adobe Illustrator to trace the letterforms. I paid attention to details such as line thickness.

Fig 2.5 Extracted letterforms

Sketch

I refferes to Futura font. It provides a reference for my design.

Fig 2.6 try

In the class I show it to Mr. Vinod again,Mr Vinod suggest instead of having it so thin, it's better to have it thickerThen I added some leaf texture to my font as an example and improved it by contouring it.

Fig 2.7 Font Design

Final

Figure 2.8 Compiled Process

Fig 2.9 Example

I used guides in order to make the font more regular and the same size

 Fig 2.10 Line of reference

Fig 2.10 Final Typeface Outcome

Typographic Poster Design

After completing the font design, we need to design a poster using the completed font. The artboard dimension requirement is 1024 x1024 pt.

Fig 2.11 Poster attempt #1,

I first took the meaning of the word leaf as the starting point to find the content of the poster, and then found the right picture to design the poster. But Mr. Vinod told me not to use the forest, but the leaves

Fig 2.12 Poster attempt #2,

Fig 2.13 Poster attempt #3

---

Feedback

Week 2  The day is holiday,so I don't have task 1 feedback.

Week 3  General Feedback:The problem is I am choosing. I should be choosing more larger portions, whole portions. 

             Specific Feedback: should find some bigger letters. And I can't use the single line, I should draw the letters in a area.

Week 4  General Feedback: My background should use leaf, not a forest photo.

             Specific Feedback:For my font Mr Vinod suggest instead of having it so thin, it's better to have it thickerThen I added some leaf texture to my font as an example and improved it by contouring it  

---

Reflection

Exercise 1  Typographic Systems

Experience

I did 16 layout exercises for this project, most of which were based on books and references on the Internet. Through the practice in the first semester, I basically mastered the operation method of indesign, so I did not encounter too many problems in terms of technology.

Observation

I found that I was not bold enough in typesetting practice. I only added some ideas by referring to the works of my seniors  and the pictures on the Internet to make the works look ordinary and follow the rules. In the future practice, I need more exploration and bold design to make the works more creative and more eye-catching

Findings

At the same time, I have my own understanding of eight typesetting systems, the axis system is clear and easy to understand, and the asymmetric typesetting will make the relatively simple visual arrangement more interesting. The radial system is best for arranging alone, is very active, is good for text with fewer words.Although the random system is poor in legibility, the visual effects are very attractive, and the more complex the Angle and the more variations, the stronger the sense of freedom of composition

Exercise 2 - Finding Type & Poster

Experience

In the second exercise, we need to design fonts and find fonts in everyday life. I chose leaves because they have more texture and make it easier to find fonts. I was not satisfied with the design of my first edition, because it was too common and it was not easy to find fonts. Therefore, in the original pictures of the second edition, I found the letters related to the pictures for design. In this process, Mr Vinod  helped me to optimize the fonts, which made the final results more excellent

Observation

In the class, I found that my classmates' designs are more excellent. They search for different scenes in life, such as rocks, folded paper, dried trees, coral and so on. Therefore, I want to explore more and find inspiration in the future, so as to enrich the design experience and bravely search for it.

I designed the fonts with the same stroke thickness, mainly in bold fonts. I made enough attempts in the practice process, although the result was not very good, I tried all the ideas. At the same time, the most crucial feature of the original picture, that is, the texture of the leaves, was retained. I made it into a hollow effect, which made the final poster more distinctive

Findings

I find that I am not proficient in the advanced use of AI. Although I have mastered the basic operation, it is not enough for the advanced design in the future. For example, the hollowing effect in the second practice was taught to me by the teacher，I need to learn more advanced use methods of AI to make my future design more excellent.

---

Futher Reading

Typography, Referenced" is a book about typography and print design written in collaboration with Jason Tselentis, Allan Haley, Richard Poulin, and Jason Arcady. The book contains numerous typography samples, case studies, and design tips covering the history of typography, basic principles, font selection, typography layout, color use, printing techniques, and digital media

The book contains details on the history, principles, and practical applications of typography, as well as a wealth of typography samples, case studies, and design tips. Readers will learn about key concepts in typography such as font selection, typographic layout, color use.

This book aims to provide designers and typographers with the knowledge and inspiration they need to create typographic designs that are compelling and communicate information effectively.

1.History of typography

Ancient typesetting
Typography
The Rise of Digital typography
The development of printing technology

2.Basic principles of typography

Font Basics
Font families and glyphs
Alphabet anatomy
Line and kerning
Alignment and alignment


We can learn about typography principles, font selection, color application, printing techniques, and digital media typography, as well as historical and future trends