Advanced Tyography/Task 1

30.8.2023 - / Week 1 - Week 4
Woo Yau Ka / 0355281 / BA of Design (HONS) in Creative Media
Typography
Task 1 (Exercises)

INDEX

Lectures

Task 1

Exercise 1: Typography System

Week 1

8 major variations of typographic systems:

Axis system - all elements are organized to the left or right of a single axis.

Fig.1.1 Axial System

Fig.1.2 Axial System

Radial system - all elements extend from one focal point.

Fig.1.3 Radial system

Dilatational system - all elements expand in a circular fashion from a central point.

Fig1.4 Dilatational system

Random system - elements appear to have no particular pattern or relationship.

Fig1.5 Random system

Grid system - a system of vertical and horizontal divisions

Fig1.6 Grid system

Transition System - an informal system of tiered grading

Fig1.7 Transition system

Modular System - A series of non-objective elements that are constructed as standardized units.

Fig1.8 Modular system

Fig1.9 Modular system

Bilateral system - all text is arranged symmetrically on a single axis.

Fig1.10 Bilateral system

Week 2

Typographic Composition Typographic composition is the arrangement of textual information on a given space. Dominant compositions in design include emphasis, isolation, repetition, symmetry and asymmetry, alignment, perspective, rhythm, contrast.

Fig 2.1 Emphasis Composition

Rule of Thirds - A space can be divided into 3 rows and 3 columns. Intersecting lines serve as guides for placing points of interest within a given space.

Fig. 2.2 The Rule of Thirds

Environmental Grid - Based on exploration of existing structures or combinations of multiple structures. Form the extraction of key curves and straight lines.

Fig. 2.3 Environmental grid

Form and movement: based on an exploration of existing grid systems. Placing the form on one page (across multiple pages) creates a sense of movement.

Fig. 2.4 Form and movement

Week 3

Context and Creativity

The first mechanically produced typefaces were designed to directly imitate handwriting, which would become the basis or standard for the form, spacing, and conventions that mechanical typefaces attempted and imitated.

Fig3.1 Cuneiform (c. 3000 B.C.E.)

Fig3.2 Hieroglyphs

Ideograms, represent the things they actually depict.
As determinatives to show that the signs preceding are meant as phonograms and to indicate the general idea of the word.
As phonograms to represent sounds that "spell out" individual words.

Fig3.3 Letterforms through the ages

Early Greek (5th century BC): Drawn freehand, not constructed using compasses and rules, and without serifs. Over time, the strokes of these letters became thicker, the apertures became smaller, and serifs emerged.

Roman Uncials: By the 4th century Roman letters were becoming more rounded, the curved 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: Capitals at the start of a sentence, spaces between words and punctuation. It was this style that became the pattern for the Humanistic writing of the fifteenth century; this latter, in turn, was the basis of our lower-case roman type.

Black Letter (12-15 C. CE): Characterised by tight spacing and condensed lettering. Evenly spaced verticals dominated the letterform. Condensing line spacing and letter spacing reduced the amount of costly materials in book production.

The Italian Renaissance: Newly rediscovered letterforms Antica. The renaissance analysis of form that was being applied to art and architecture was directed toward letterform — resulting in a more perfect or rationalised letter.

Fig 3.4 Indus Valley Civilization (IVC)

The oldest scripts found in the "Indian" subcontinent are the Indus Valley Civilization (IVC) scripts (3500-2000 BCE), which have not been deciphered to this day and appear to be somewhat logosyllabic in nature.

Fig. 3.5 Brahmi script (450–350 BCE)

The earliest writing system after the Indus script developed in India. It is one of the most influential writing systems. All modern Indian scripts and hundreds of scripts found in Southeast and East Asia are derived from Brahmi.

Fig 3.6 Southeast Asian writing systems

Fig 3.7 Baloo, Unicode Compliant & Libre Licensed

More vernacular scripts are being produced by software giants (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 script or vernacular and Latin scripts.

Week 4

Context and Creativity

The shape and line of hand drawn letterforms are influenced by the tools and materials used to make them. Sharpened bones, charcoal sticks, plant stems, brushes, feather and steel pens all contributed to the unique characteristics of the letterform.

Fig4.1 19th Century Manuscript using traditional Javanese.

Frutiger:

a sans serif typeface designed by the Swiss type of designer Adrian Frutiger in 1968.

tested with unfocused letters to see which letterforms could still be identified in poor light conditions or when the reader was moving quickly past the sign.

Fig.4.2 Frutiger

Verdana:
a specifically designed typeface for the screen by Matthew Carter, commissioned by Microsoft. hinting is essential to enhance the readability on the screen.

Fig.4.3 Verdana

bell centenary:

Commissioned by AT&T to use a new font in its phone book, ink traps were designed into the font to prevent ink from spreading when printing at high speeds on low-quality paper.

Fig.4.4 bell centenary

Johnston Sans (previously known as Underground typeface):

Commissioned by Edward Johnston for London Underground posters and signs

Combining classical Roman proportions with humanistic warmth

Fig.4.5 Construction Grid for Roman Capitals

Type Design Process 1. Research - understand type history, type anatomy, type conventions and terminologies. - determine the type’s purpose or what it would be used for and what different applications it will be used in. - study existing fonts that are presently being used for inspiration/ideas/reference/context/usage pattern/etc. 2. Sketching - traditional/digital 3. Digitization - professional softwires: Font Lab and Glyphs App - some designers also use Adobe Illustrator then only the specialized font apps - frowned upon by the purist 4. Testing - to refine and correct the aspects of the typeface - prototyping is a part of it and it leads to important feedback 5. Deploy - deploying a typeface doesn't mark the end of revision as unforeseen issues may surface after post-prototype and testing phases Typeface Construction Using grids (with circular forms) can facilitate the construction of letterforms and is a possible method to build/create/design your letterform.
Fig.4.6 Classification According to Form & Construction

Construction and considerations 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. 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 (overshoot). This also applies to vertical alignment between curved and straight forms.

Fig.4.7 Ink Traps

Fitting the type: A visual correction is also needed for the distance between letters. The letters must be altered to a uniform visual white space - the white space between the letters should appear the same. Ink traps were generally used when printing on cheap absorbent paper and when printing is fast and not very precise. Excess ink gathers at the corners, but with ink traps the corners remain visible.

Fig.4.8 overshoot

- the extrusion of curved (and protruding) forms past the baseline and cap line (overshoot)

- the distance between letters should appear the same

Week 5

Perception & Organization

Fig.5.1 Carl Dair's Seven Typographical Contrast#1

Fig.5.2 Carl Dair's Seven Typographical Contrast#2

Fig.5.3 Form

Form

The overall look and feel of the elements that make up the typographic composition. To represent a concept by doing so in a visual form. The interplay of meaning and form brings a balanced harmony both in terms of function and expression.

When a typeface is perceived as a form, it no longer reads as a letter because it has been manipulated by distortion, texture, enlargement, and has been extruded into a space.

Fig. 5.2 Gestalt theory for organisation

INSTRUCTIONS

Exercise:

Exercise 1

In this exercise, we will design a layout based on the 8 typographic systems we learned in Lesson 1, namely Axial, Radial, Inflated, Random, Grid, Modular, Transitional, and Bilateral.

Task requirements: - Adobe InDesign- 200mm x 200mm- black + another color- Allows limited graphic elements (points, lines, etc...)

A) All Ripped Up: Punk influence on Design

Punk emerged as a rebellious and DIY (do-it-yourself) movement in the 1970s, characterized by its anti-establishment attitude, energetic music, and distinctive aesthetic.

B) The ABCs of Bauhaus Design Theory

Bauhaus aimed to unite art, craft, and technology, emphasizing functional design and the integration of fine arts and everyday objects.

C) Russian Constructivism and Graphic Design

Russian Constructivism was considered more of a philosophy than just an art style. It reflected a belief in art for social change rather than personal expression.

2. Layout Explorations

Fig.6.1 Axial System Test (Week 1-grid) 30.8.2023

Fig.6.2 Dilatational System Test (Week 1-grid) 30.8.2023

Fig.6.3 Radial System Test (Week 1-grid) 30.8.2023

Fig.6.4 Random System Test (Week 1-grid) 30.8.2023

Fig.6.5Grid System Test (Week 1-grid) 30.8.2023

Fig.6.6 Transitional System Test (Week 1-grid) 30.8.2023

Fig.6.7 Bilateral l System Test (Week 1-grid) 30.8.2023

Fig.6.8 Modular System Test (Week 1-grid) 30.8.2023

Fig.6.9 Week 1 -Axial System 30.8.2023

I tilted the central axis to show the axial symmetry.

Fig.6.10 Week 1 -Dilatational System 30.8.2023

I express dilutional by showing three rotations.

Fig.6.11 Week 1 -Radial System 30.8.2023

I added a black circle in the center of the green circle for the design text.

Fig.6.12 Week 1 -Random System 30.8.2023

I use words and graphics to express the beauty of messiness.

Fig 6.13 Grid System 30.8.2023

I open the grid to arrange the text neatly.

Fig6.14 Transitional System 30.8.2023

I expressed transitional by arranging the words in a staircase.

Fig6.15 Bilateral System 30.8.2023

I expressed bilateral with color.

Fig6.16 Modular System 30.8.2023

I represented the module textually by summarizing it in squares.

Fig6.17 Week 1 8 photos 30.8.2023

Final:

Fig7.1 Final -Axial System Week 2 6.9.2023

Fig7.2 Final -Dilatational System Week 2 6.9.2023

Fig7.3 Final -Radial System Week 2 6.9.2023

Fig7.4 Final -Random System Week 2 6.9.2023

Fig7.5 Final -Grid System Week 2 6.9.2023

Fig7.6 Final -Bilateral System Week 2 6.9.2023

Fig7.7 Final -Transitional System Week 2 6.9.2023

Fig7.8 Final -Modules System Week 2 6.9.2023

Fig7.9 Final Typographic System - PDF Week 2 6.9.2023

Fig7.10 Final Typographic System - PDF (with grids and guides) Week 2 6.9.2023

Exercise 2:

In exercise 2 we were asked to choose an image of a man-made object or structure or a natural object. We need to analyze, dissect and identify potential letter forms (at least 5 letter forms) in the dissected image.

In class, we were asked to choose a picture to go to the next step. I chose a photo of a tree that I had taken before and wanted to design text that had the feel of a branch.

Chosen image:

Fig8.1 Chosen image. (6.9.2023 - Week 2)

From the photo, I observed and sketched five letters, namely A, X, V, E, and Y.

Fig8.2 Extract text from images. (6.9.2023 - Week 2)

I chose Futura std as a reference font.

Fig8.3 Reference font (6.9.2023 - Week 2)

I use the AI function to try to make the outlined text more like the reference font.

Fig8.4 Compiled process (6.9.2023 - Week 2)

After taking feedback, I added more branch elements to the text to make it behave more like a tree.

Fig8.5 Final Text Week 3 13.9.2023

Fig8.6 poster background Week 3 13.9.2023

Fig8.7 Poster (#1) Week 3 13.9.2023

Fig8.8 Final poster Week 3 13.9.2023

I used feedback to add the WB and Dolby logos to the poster.

Fig8.9 Final Poster Design in PDF Week 3 13.9.2023

FEEDBACK:

Week 1

General Feedback - Watch the lecture to learn about typography systems.

Week 2

General Feedback - You need to find a picture to do task two.

Specific Feedback - The design of the transition system is too simple, the modular system cannot be seen, and the text in the lower right corner of the bilateral system looks strange.

Week 3

General Feedback: The extraction is not very good.

Specific Feedback: There are no features from top to bottom that make the text look like tree branches. the last step of submission should be the starting point and should be revised.

Reflection:

Experience:

During these weeks we completed several exercises. In the first exercise, we need to come up with ideas based on eight printing systems. At the beginning, I didn't understand these concepts very well. Later, I learned about these concepts through the blogs of former students. In the second exercise, we need to extract text from pictures. I am going to find letters from pictures of trees and create fonts. We need to add features to them and make posters.

Observations:

From Exercise 1, I learned the importance of the printing system for typesetting, and guidelines can also help us make the text beautiful. From Exercise 2, I observed that more attention should be paid to adding features when creating text.

Findings:

In Exercise 1, I found that eight typography systems can give text more diverse and wider possibilities. In Exercise 2, I found that extracting features from images is fun and innovative.

Part B - HONOR Competition

Fig9.1 Adobe Illustrator Outline View Week 3 13.9.2023

When I saw that the theme was celebration, the first thing I

thought of was the New Year. During this festival, there are traditional lion

and dragon performances, so I set the protagonist as the lion dance.

At the beginning, I first decided on the basic design elements in procreate, including the lion dance platform and the moon.

Then, I heard that white was unlucky for the lion dance, so I changed it to light blue. I also added ribbons and tall buildings behind it to express the feeling of celebration and crowds.

Fig9.2 Adobe Illustrator View Week 3 13.9.2023