ADVANCED TYPOGRAPHY ✦ TASK 1: EXERCISES ✦

ADVANCED TYPOGRAPHY ✦ TASK 1: EXERCISES ✦

/6/2024 - /6/2024

Week  - Week 

Bachelor of Design (Hons) in Creative Media

✦ INSTRUCTIONS ✦

Figure 1.1 MIB

✦ LECTURES ✦

WEEK 1-LECTURE 1

Advanced Typography: Typographic Systems

Advanced Typography: Typographic Systems

"All design is based on a structural system" and according to Elam, 2007, there are eight major variations with an infinite number of permutations. These eight major variations are as follows:

• Axial

• Radial

• Dilational

• Random

• Grid

•Modular

• Transitional

• Bilateral

Advanced typesetting system is a professional typesetting tool that is usually used to handle complex typesetting needs, such as books, magazines, newspapers, academic papers, etc. These systems typically offer richer typesetting capabilities and more advanced control options to meet the needs of professional designers and typographers.

Axial System: 

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

Figure 2.1 Axial system (24/04/2024)

Radial System: 

All elements are extended from a point of focus. 

Figure 2.2 Radial system (24/04/2024)

Dilatational System:

 All elements expand from a central point in a circular fashion

Figure 2.3 Dilatational system(24/04/2024)

Random System:

Elements appear to have no specific pattern or relationship.

Figure 2.4 Random system(24/04/2024) 

Grid System:

A system of vertical and horizontal divisions.

In graphic design and typography, a grid system is a framework used to organize content on a page or screen. It involves dividing the layout into columns and rows, providing a structure for placing elements such as text, images, and other design elements.

Figure 2.5 grid system(24/04/2024) 

Transitional System：

An informal system of layered banding.

In general, it often refers to a system or framework that facilitates transitions from one state or condition to another. 

Figure 2.6 transition system (24/04/2024)

Modular System:

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

Figure 2.7 Modular system (24/04/2024)

Bilateral System: 

All text is arranged symmetrically on a single axis

A bilateral system typically refers to a political or economic arrangement involving two parties or entities that interact or cooperate with each other.

Figure 2.8 bilateral system (24/04/2024)

Understanding the flow of system organization can really enable designers to move beyond rigid horizontal and vertical structures and design layouts that better suit the content and user experience. By employing principles such as grid systems, modular design, or hierarchical organization, designers can create visually appealing and user-friendly layouts that effectively convey information

Figure 2.9 Typographic System

A good layout design can give emotion, atmosphere and taste to the content through visual elements such as layout, color, graphics, etc., thereby guiding readers to obtain a more pleasant and in-depth reading experience in an information-rich environment.

Figure 2.10 The Complete Manual of Typography

WEEK 2-LECTURE 2

Typographic Composition

Figure 3.1 TypographicComposition

Principle of Design Composition

• Concerning composition, we take into account essential design principles such as emphasis, isolation, repetition, symmetry, asymmetry, alignment, and perspective. However, translating these abstract concepts into typographic layouts can be somewhat challenging. They often align better with images rather than intricate informational elements.
• 
  
• Applying these concepts to actual content (including images, text, and color) on a page or screen may sometimes appear disjointed. Nevertheless, some principles are more adaptable than others.

Figure 3.2 Design Composition

The Rule of Thirds

• "The Rule of Thirds" is a fundamental principle in visual composition used in photography and design. It consists of a grid of nine sections, and key elements are placed along the intersecting lines or at their focal points to create a visually pleasing and engaging composition , with a strong focus on visual comfort and appeal.

Figure 3.3 The Rule of Thirds

printing system

• The application of the eight systems mentioned and introduced by the teacher in the video. Of these systems, the grid system (or grid system) is the better known and widely used. This system is derived from the grid composition structure of letterpress printing. Later it was further refined by the Swiss (Modernist) printing style, influenced by such influential figures as Josef Muller Brockmann, Jan Tschichold, Max Bill, etc. Characters are supported and applied to various environments.

Figure 3.4 Grid system

Environmental Grid

• "Environmental Grid" is an important structural concept for spatial design. It aims to establish stability and functionality at their best by extending grid principles from graphic design to real-world environments, with a focus on efficiency and user satisfaction.

Figure 3.5 Environmental Grid

Form And Movement

• This system builds upon the more advanced grid systems and offers a wide range of possibilities in terms of different styles. It expands on the types found in basic grid systems and treats page turning as a deliberate animation. Through the arrangement of images, text, and colors, they will present a dynamic visual experience across any medium.

Figure 2.6 Form And Movement

WEEK 3-LECTURE 3

Context&Creativity

Why is handwriting important in typeface/typography studies?

Because the importance of studying handwriting in printing, or typography, is that the earliest mechanically produced letter forms were direct imitations of handwriting. Script is the benchmark for the shapes, spacing, and conventions that mechanical typography aims to replicate. The shape and style of hand-drawn lettering is influenced by the tools and materials used. Different tools such as bones, charcoal sticks, brushes, feathers, and pens form different glyph characteristics. Furthermore, the materials on which these shapes are inscribed, such as clay, papyrus, palm leaves, animal skins (vellum and parchment), and paper, also played a role in shaping their properties.

Figure 4.1 Evolution of the Latin Alphabet

Figure 4.2 Ancient Egypt Hieoglyphics Chart

The Egyptian writing system was combined with the art of relief sculpture. This system consisted of a combination of hieroglyphics and phonics.

In these ways, as hieroglyphs, they are used to directly represent the things they depict. Those deterministic symbols, used to show that the preceding symbol is used as a phonetic script, and to indicate the general concept of the word, as phonetic scripts, used to represent the sound that "spells out" a few words.

Figure 4.3

Early Greek (5th century BCE), Roman Uncials, English Half Uncials (8th century), Carolingian Minuscule, Black Letter (12-15th century), Antica (left to right).

• In the 5th century BCE, ancient Greece (500–401 BCE) experienced progress in democracy, architecture, and culture. Eminent philosophers like Socrates and Plato emerged during this time, leading to the flourishing of naturalistic art and tragic plays.

• Roman Uncial is a rounded, uppercase script style that originated during ancient Rome. It was primarily used for inscriptions, official documents, and manuscripts, serving as a transitional form between older and medieval scripts.
• 
  
• English Half Uncials emerged in 8th-century England as a transitional script, blending elements of Roman and medieval styles. It was mainly employed for copying texts in monastic settings, reflecting the cultural developments of the era.
• 
  
• Carolingian Minuscule appeared during the Carolingian era and standardized writing. It influenced modern lowercase letterforms and had a significant impact on later scripts and printing.
• 
  
• Black Letter, used from the 12th to the 15th centuries, featured dense angular letterforms in manuscripts. It reflected medieval culture and served as a transitional script from earlier styles to later print typefaces.
• 
  
• The Italian Renaissance, spanning the 14th to 17th centuries, was characterized by a revival of ancient Greek and Roman art, humanism, and scientific progress. It left a lasting impact on art, architecture, science, and modern thought

Movable Type

Movable-type printing, pioneered by Johannes Gutenberg in the 15th century, transformed printing with the use of single characters, enabling the mass production of books, accelerating the spread of knowledge and leading to a shift from handwritten manuscripts to mechanical printing.

Figure 4.4 Movable Type

Figure 4.5 Movable Type Knowledge

Evolution of Middle Eastern Alphabets

The development of Middle Eastern alphabets saw a significant turning point with the introduction of the Phoenician letter, which played a pivotal role in representing sounds in writing. It's noteworthy that this script may have been influenced by Egyptian Hieroglyphics and Hieratic Scripts.

Figure 4.6 Evolution of Middle Eastern Alphabets

The Evolution of the Chinese script

From the Oracle bone to Seat to Clerical Script, Traditional and Simplified script.

Figure 4.7 The Evolution of the Chinese script

Figure 4.8 Indus Valley Civilization script

Figure 4.9 Examples of Indus script seals

The script of the Indus Valley Civilization (IVC), which was in use around 2600–1900 BCE, consists of a series of undeciphered symbols inscribed on seals and artifacts. Despite its significance, the language and meaning of this script remain unknown to this day , leaving behind a mysterious enigma.

WEEK 4-LECTURE 4

DesigningType

Why another typeface?

type design carries a social responsibility, thus we must continue to improve its legibility.

type design is a dorm of artistic expression.

Frutiger

Frutiger is a highly acclaimed sans-serif typeface created by Swiss designer Adrian Frutiger in the 1960s. Known for its modern and extremely legible design, it is widely used in signage, corporate branding, and printed materials. Its influence lies in shaping contemporary typeface design and setting the standard for typographic clarity and versatility.

Figure 5.1The Signage

Objective: Develop a typeface that is clean, distinctive, and easily legible, suitable for both close-up and distant viewing, and highly practical.

Considerations/Constraints: The letterforms must remain recognizable even in low-light conditions and when readers are in motion. Adrian Frutiger conducted experiments with blurred letterforms to identify those that remained discernible.

Matthew Carter, a contemporary British type designer and master craftsman, as well as the son of Royal Designer for Industry Harry Carter, created this typeface in 1996. This typeface is primarily utilized for on-screen content, such as web text and user interfaces, owing to its clean geometric design and legibility. Despite its primary digital focus, it has also found applications in print and signage where clarity and modern aesthetics are crucial.

Figure 5.2 Hint of Verdana

Process of Type Design

Research

Designers start by comprehending the background, structure, conventions, terminology, kerning, metrics, and subtleties of type. The specific purpose and applications of the typeface are then determined, such as for schools, buses, airport signage, and various other uses. Existing typefaces should also be examined for a range of reasons, including inspiration, ideas, references, context, usage trends, and more.

Sketching

Sketches can be created using traditional tools and then scanned for digitization.

Alternatively, digital tools such as a Wacom tablet can be used for direct sketching within font design software.

Digitization

The primary software tools used for digitizing typefaces include Glyphs and FontLab. Although some purists may disapprove of Adobe Illustrator, it is still used by some designers. When digitizing letterforms, designers need to consider both their overall shape and inner details.

Testing

Testing is an essential part of the process, resulting in refinement and correction of various aspects of the typeface.

Display

Prototyping is also a crucial step in the testing process and provides valuable feedback.

Typeface construction

Even after deploying a finalized typeface, unforeseen issues that were not evident during the prototyping and testing phases may arise and need to be addressed.

Construction & Considerations

Characters of identical cases can be organized based on their visual shapes.

Figure 5.3 Categorization based on form and construction of characters

✦ EXERCISE 1 ✦

TYPOGRAPHIC SYSTEM

  Task requirements:

• 200*200mm
• In addition to black, allow to use other colors.
• Graphic elements (line, dot, etc.) allow to use but limitedly.
• Text given:

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 Theater 12

Figure 6.1 Radial System

Figure 6.2 Dilatational System

Figure 6.3 Grid System

Figure 6.4 Random system

Figure 6.5 Transitional system

Figure 6.6 Bilateral system

Figure 6.7

Figure 6.8

Figure 6.9

Figure 6.10

Figure 6.11

Figure 6.12 PDF

Figure 6.13 PDF

---

TYPE & PLAY

In Exercise Two, our task is to find an image with a subject from everyday life or nature that contains more structures. We are to observe the patterns and the visual impressions it provides, in order to identify structures related to letterforms. Finally, these structures will gradually transform into recorded forms resembling fonts.

Explore options

After looking at many works by seniors, I finally chose a picture of leaves as the design for my next work.

Finding the letters

After doing my research, I used the Pen Tool in Adobe Illustrator to outline the letters I would need next. In the image, I chose the most obvious letters: C, T, L, N, H.

Figure 7.1 Letter I found on the Picture

After discovering the letter in the picture, I proceeded to utilize Adobe Illustrator, where I employed the pen tool to meticulously sketch out the intricate details of the letter.

Figure 7.2 Sketch

Sketches

Final Design

Making the Poster

After finishing the font design, we need to use the same visual elements and fonts to make a movie poster.

Requirements:

The font must interact with the visual elements.

The size should be 1024 x 1024 pixels.

I chose leaves as my main background theme, and for the letters of the poster I used a similar color to the picture but with a lighter color, in order to highlight the letters and the entire poster.

✦ FEEDBACK ✦

Week 2

We should consider whether large fonts help or distract our attention. The size of numbers should be reduced to make them more attractive, and the font size should be adjusted appropriately to present the content. We do not need to implement a polygonal system layout. It is important to ensure that the spacing between rows and columns is appropriate.

Week 3

The letter forms extracted from the image should have similar characteristics to the source image. In the refinement of the letter forms, it is crucial to keep the strokes consistent and retain the core details of the selected image without being too prominent. They should follow the sense of structure.

Week 4

The design should have more depth and incorporate various elements of daily life in different forms.

✦ REFLECTION ✦

Experience

This time our tasks, respectively, are typesetting systems and research discovery creation, and the first practice is to design two different designs using each typesetting system. However, these designs cannot leave the scope. In the process, I learned and understood the content and knowledge points of these systems. I made my work initially, but in the second class, Mr. Vinod gave guidance to my work. When I revised it again, I added regular colors from the original single color and made changes according to Mr. Vinod's suggestions. In the second task, which I think is very interesting, we need to select a texture image that appears in life, find the discovered letters in the picture, and outline them, which is our task this time, which provides a rich resource for discovering glyphs. I use Adobe Illustrator to create my artwork.

Observation

These typesetting systems in task 1, they all have their own different meanings. The challenge we face is to create works of different styles in these very similar systems, which is also the key point for our mentor to inspect us. It emphasizes the importance of understanding and effectively applying different typographic elements to convey a variety of messages. Research plays an important role in ensuring accuracy, and Mr. Vinod's feedback highlights the iterative nature of the design.

As for Task 2, this is a highly expansive creative opportunity to find design inspiration and creative ideas in complex pictures, and extend my discovery to the works, which is also one of the investigation parts. Adobe Illustrator has played an important role in this exploration, composing in the plane, and making the work from the visual side this time is crucial.

Finding

These exercises, compared to the typography course from the previous semester, appear to have added a lot of expansion and research, making them more comprehensive. Additionally, the creative aspect of typography shines in the "Type and Play" exercise, adding an artistic and innovative touch to the design. Such ideas can often be applied in future works for added visual appeal.

✦ FURTHER READING ✦

"Thinking with Type" by Ellen Lupton is a comprehensive guide to typography, structured in a visually engaging format with numerous examples and practical exercises. The book covers the basics of typography, including the anatomy and classification of typefaces, and provides a historical context for type usage. It delves into setting text with principles of readability, alignment, and spacing, and explores the design and structure of individual letterforms. Additionally, it introduces grid systems for organizing content and creating visual hierarchy. The book concludes with practical advice and exercises for applying typographic principles to real-world projects, making it an essential resource for both beginners and advanced typographers.