Advanced Typography - Task 1 / Exercises 1 & 2

September 06, 2022

Advanced Typography - Task 1 / Exercises 1 & 2

31/8/2022 - 21/9/2022 (Week 1 - Week 4)

Anna Chin Siaw Fong / 0354370
Advanced Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University
Task 1: Exercises 1 & 2

LECTURES

Week 1

Typographic Systems

The typographic systems are similar that the systems has a set of rules that is unique and provides a sense of purpose that focuses and directs the decision making. According to Elam (2007), there are 8 major variations of typographic systems.

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

Radial - All elements are extended from a point of focus.

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

Random - Elements appear to have no specific pattern or relationship.

Grid - A system of vertical and horizontal divisions.

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

Transitional - An informal system of layered banding.

Bilateral - All text is arranged symmetrically on a single axis.

Fig 1.0 Typographic Systems

Week 2

Typographic Composition

Principles of Design Composition

Emphasis, isolation, repetition, symmetry and asymmetry, alignment, perspective

Fig 2.0 Principles of Design Composition (Emphasis)

The Rule of Thirds

A photographic guide to composition, it basically 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.

Fig 2.1 Rule of Thirds

Environmental Grid

This system is based on the exploration of an existing structure or numerous structures combined.
An extraction of crucial lines both curved and straight are formed.
The designer then organizes his information around this super-structure, which includes non-objective elements to create a unique and exciting mixture of texture and visual stimuli.

Fig 2.2 Environmental Grid

Form and Movement

This system is based on the exploration of an existing Grid Systems.
The placement of a form (irrespective of what it is) on a page, over many pages creates movement.
The form constitutes the placement of image, text and color.

Fig 2.3 Form and Movement

Week 3

Context and Creativity

Handwriting

We study handwriting because 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.
Sharpened bones, charcoal sticks, plant stems, brushes, feather and steel pens all contributed to the unique characteristics of the letterform.

Fig 3.0 Evolution of the Latin Alphabet

Cuneiform

The earliest system of actual writing
The cuneiform characters evolved from pictograms.
Cuneiform was written from left to right.

Fig 3.1 Cuneiform

Hieroglyphics

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.
Hieroglyphic images have the potential to be used in three different ways:

As ideograms, to 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.

Fig 3.2 Hieroglyphics

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

Early Greek letters were drawn freehand, not constructed with compasses and rule, and they had no serifs —neither the informal entry and exit strikes left by a relaxed and fluent writer, nor the symmetrical finish stroke typically added to letters by formal scribes.
In time the strokes of these letter grew thicker, the aperture lessened, and serifs appeared.

Fig 3.3 Early Greek / 5th C. B.C.E.

Roman Uncials

By the 4th century Roman letters were becoming more rounded, the curved form allowed for less strokes and could be written faster.

Fig 3.4 Roman Uncials

English Half Uncials, 8th C.

In England the uncial evolved into a more slanted and condensed form.

Fig 3.5 English Half Uncials, 8th C.

Carolingian Minuscule

Was used for all legal and literary works to unify communication between the various regions of the expanding European empire.
Was as important a development as the standard Roman capital—for 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

Fig 3.6 Carolingian Minuscule

Black Letter 12-15 C. CE

Characterized 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.

Fig 3.7 Black Letter

The Italian Renaissance

The 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 rationalized letter.

Fig 3.8 The Italian Renaissance

The oldest writing found in the ‘Indian’ subcontinent the Indus Valley Civilization (IVC) script (3500-2000 BCE), is as yet undeciphered and seems to have been somewhat logo-syllabic in nature. “Some believe that these symbols are non-linguistic, while others argue that they represent a Dravidian language.”

Fig. 3.9 ‘Indian’ subcontinent the Indus Valley Civilization (IVC) script (3500-2000 BCE)

The Brahmi script (450–350 BCE) is the earliest writing system developed in India after the Indus script. It is one of the most influential writing systems; all modern Indian scripts and several hundred scripts found in Southeast and East Asia are derived from Brahmi.

Fig 3.10 The Brahmi Script

Programmers and Type Design

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.

Fig 3.11 Programmers and Type Design

Local Movements and Individuals

In South East Asia, the movement has not organized and coordinated itself well enough. But with increasing awareness and examples from larger neighbors like India with their large talent pool and resource, the knowledge behind methods used and approaches taken are more accessible geographically speaking.
Creativity and originality are properties that are most often intertwined. It is important for young designers to look inward and examine their histories, civilization, culture and communities to bring these past developments into the future and develop on them instead of blindly appropriating cultures and developments that have no context, relatability or relevance.
Creativity and inspiration should begin by observing our surroundings and exploration of our collective histories.

Week 4

Designing Type

Why design another typeface?

Type design carries a social responsibility so one must continue to improve its legibility.
Type design is a form of artistic expression.

General Process of Type Design:

Research

When creating type, we should understand type history, type anatomy and type conventions. We should also know terminologies, side-bearing, metrics, hinting…
It is then important to 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.
We should also examine existing fonts that are presently being used for inspiration/ideas/reference/context/usage pattern/etc.

Sketching

Some designers sketch their typeface using the traditional tool set (brushes/ pens, ink and paper) then scan them for the purpose of digitization. They are more confident with their hands and have better control using it.
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.
Both methods have their positives and negatives.

Digitalization

There are professional software that are used in the digitization of typefaces, amongst the leading software are: 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.

Testing

Testing is an important component in the design thinking process. 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 typ) the readability and legibility of the 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.

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.
The rigour of the testing is important in so that the teething issue remain minor.

Typeface Construction

Using grids (with circular forms) can facilitate the construction of a letterforms and is a possible method to build/create/design your letterform.

Fig 4.0 Construction grid for the Roman Capitals using 8 x 8 cells

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.
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. It is not possible to simply place letters next to each other with equal spacing between them. 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.

Fig 4.1 Construction and Consideration

Week 5

Perception & Organization

Contrast

There are several methods in typography to create contrast.

Fig 5.0 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 or heading noticeably bigger than the body text.

Fig 5.1 Size

Weight

Weight describes how bold type can stand out in the middle of lighter type of the same style.
Other than then using bold, 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.

Fig 5.2 Weight

Form

Contrast of form is the 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.

Fig 5.3 Form

Structure

Structure means the different letterforms of different kinds of typefaces.

Fig 5.4 Structure

Texture

Texture refers to the way the lines of type look as a whole up close and from a distance.
This depends partly on the letterforms themselves and partly on how they’re arranged.

Fig 5.5 Texture

Direction

Contrast of direction is 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.
Text blocks also have their vertical or horizontal aspects of direction.
Mixing wide blocks of long lines with tall columns of short line can also create a contrast.

Fig 5.6 Direction

Colour

The use of color is suggested that a second color is often less emphatic in values than plain black on white.
Therefore 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.

Fig 5.7 Colour

Form

Originating from the Greek words “typos” (form) and “graphis” (writing), typography means to write in accordance with form. Typography can be seen as having two functions:

to represent a concept
to do so in a visual form.

Displaying type as a form provides a sense of letterforms’ unique characteristics and abstract presentation.

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.8 Form

Organization / Gestalt

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: Instead of breaking down thoughts and behavior to their smallest elements, the gestalt psychologists believed that you must look at the whole of experience.
Therefore in design (read: typographic layouts), the components/ elements that make up the design is only as good as its overall visual form. While each component may be functional at an elemental level, the sum of its parts is not greater than the whole or the overall form.

Organisation / Gestalt: Perceptual Organisation / Groupings

Law of Similarity
Law of Proximity
Law of Closure
Law of Continuation
Law of Symetry
Law of Simplicity (Praganz)

Fig 5.9 Gestalt Principles of Grouping

INSTRUCTIONS

EXERCISES

Exercise 1 - Typographic System

Sketches

I came out with some ideas and sketeched them out using Procreate.

Fig 6.0 Typographic System Sketches

- 5/9/2022 -

Digitalization

After sketching, I digitalized my work using Adobe InDesign. I used grids to help me with designing the 8 typographic systems. I used the font Futura for this exercise.

Axial

Fig 6.1 Axial Typographic System Idea 1

- 6/9/2022 -

Fig 6.2 Axial Typographic System Idea 2

- 6/9/2022 -

Radial

Fig 6.3 Radial Typographic System Idea 1

- 6/9/2022 -

Fig 6.4 Radial Typographic System Idea 2

- 6/9/2022 -

Dilatational

Fig 6.5 Dilatational Typographic System Idea 1

- 6/9/2022 -

Fig 6.6 Dilatational Typographic System Idea 2

- 6/9/2022 -

Random

Fig 6.7 Random Typographic System Idea 1

- 6/9/2022 -

Fig 6.8 Random Typographic System Idea 2

- 6/9/2022 -

Grid

Fig 6.9 Grid Typographic System Idea 1

- 6/9/2022 -

Fig 6.10 Grid Typographic System Idea 2

- 6/9/2022 -

Modular

Fig 6.11 Modular Typographic System Idea 1

- 6/9/2022 -

Fig 6.12 Modular Typographic System Idea 2

- 6/9/2022 -

Transitional

Fig 6.13 Transitional Typographic System Idea 1

- 6/9/2022 -

Fig 6.14 Transitional Typographic System Idea 2

- 6/9/2022 -

Bilateral

Fig 6.15 Bilateral Typographic System Idea 1

- 6/9/2022 -

Fig 6.16 Bilateral Typographic System Idea 2

- 6/9/2022 -

After receiving feedback from Mr. Vinod, I made improvements to my designs. Improvements were made based on the suggestions given by Mr.Vinod.

Random

Fig 6.17 Improved Random Typographic System

- 7/9/2022 -

Grid

Fig 6.18 Improved Grid Typographic System

- 7/9/2022 -

Modular

Fig 6.19 Improved Modular Typographic System

- 7/9/2022 -

Transitional

Fig 6.20 Improved Transitional Typographic System

- 7/9/2022 -

Final Typographic System Submission

Fig 6.21 Final Axial Typographic System (JPEG)

- 9/9/2022 -

Fig 6.22 Final Bilateral Typographic System (JPEG)

- 9/9/2022 -

Fig 6.23 Final Dilatational Typographic System (JPEG)

- 9/9/2022 -

Fig 6.24 Final Grid Typographic System (JPEG)

- 9/9/2022 -

Fig 6.25 Final Modular Typographic System (JPEG)

- 9/9/2022 -

Fig 6.26 Final Radial Typographic System (JPEG)

- 9/9/2022 -

Fig 6.27 Final Random Typographic System (JPEG)

- 9/9/2022 -

Fig 6.28 Final Transitional Typographic System (JPEG)

- 9/9/2022 -

Fig 6.29 Final Typographic System (PDF)

- 9/9/2022 -

Fig 6.30 Final Typographic System with visible guides and baseline grids (PDF)

- 9/9/2022 -

Exercise 2 - Type and Play (Part 1): Finding Type

For this exercise, I chose to use a picture of a leaf skeleton after scrolling through Pinterest for a picture.

Fig 7.0 Leaf Skeleton

Firstly I drew out all the letters that I could identify from the picture.

Fig 7.1 Identified letters

- 12/9/2022 -

After identifying all the letters from the picture, I decided to choose the letters A, E, H, X and Y. I outlined the picture and extracted the letters from the picture.

Fig 7.2 Outlined Picture

- 12/9/2022 -

Fig 7.3 Letters Extraction

- 12/9/2022 -

I, then, begin my letter refinements. I used the font Univers LT Std 47 Light Condensed as reference.

Fig 7.4 First Refinement

- 12/9/2022 -

Fig 7.5 Second Refinement

- 12/9/2022 -

After receiving feedback from Mr. Vinod, I made further improvements to my letters.

Fig 7.6 Final Refinement

- 15/9/2022 -

Final Type and Play (Part 1): Finding Type Submission

Fig 7.7 Final Finding Type Submission (JPEG)

- 16/9/2022 -

Fig 7.8 Final Letter "A" (JPEG)

- 16/9/2022 -

Fig 7.9 Final Letter "E" (JPEG)

- 16/9/2022 -

Fig 7.10 Final Letter "H" (JPEG)

- 16/9/2022 -

Fig 7.11 Final Letter "X" (JPEG)

- 16/9/2022 -

Fig 7.12 Final Letter "Y" (JPEG)

- 16/9/2022 -

Fig 7.13 Final Finding Type Submission (PDF)

- 16/9/2022 -

Exercise 2 - Type and Play (Part 2): Type & Image

I used two photos for thie exercise. I edited them together and cropped it to a 6000px x 3000px ratio.

Fig 8.0 Forest Images

Fig 8.1 Two pictures edited together

- 25/9/2022 -

After edited the two pictures together, I begin my task for Type and Play. I chose the theme "Renewal of life · Return". Therefore, I chose the word "breathe" as inhaling and exhaling air can symbolize renewal. I edited the word breathe into the picture and made it like cloud flowing in the sky.

Fig 8.2 Attempt 1

- 25/9/2022 -

Fig 8.3 Attempt 2

- 25/9/2022 -

Attempt 2 seems a little weird. Hence, I decided to go with attempt 1 inside. I showed my work to Mr. Vinod and got feedback from him. Ammendments were made based on the feedback given.

Fig 8.4 Type and Image after amendments

- 29/9/2022 -

Final Type and Play (Part 2): Type and Image Submission

Fig 8.5 Final Type and Image Submission (JPEG)

- 29/9/2022 -

Fig 8.6 Final Type and Image Submission (PDF)

- 29/9/2022 -

FEEDBACK

Week 2

General Feedback:

Specific Feedback: Axial Typographic System is fairly good. Although it is quite diagonal like a 45-degree angle, it does seem quite well balanced. Not inclined to suggest revision in this particular case because it just seems to work. The bilateral typographic system is good. No issues here. It is fairly well constructed. Decent job on the dilatational typographic system. Good cohesiveness in the layout for the grid typographic system. 24 and 25 are too closely attached to June and 2021. It needs a little bit of breathing space. Placement of the date and speakers does not look like part of the modular typographic system. Radial typographic system is okay. Although the space on the right seems a bit awkward but it seems okay. The transitional typographic system is fine but can be improved by moving the words a little to the top so that there is better space usage. The random typographic system works but it could be a little bit more creative. Seems like I’m on to something but I need some texts that are a little bit more stronger instead of all of them being light.

Week 3

General Feedback:

Specific Feedback: The last one is good. It does still have relationship to the vein. There is some attempt to standardize the stroke and that's a good thing. However, the letter 'A' is yet to be properly standardize. The curvature of the stroke or the diagonal stem still requires refinement. Can try introducing a flare when strokes connect together as it might help to retain a little bit more character of the letter form.

Week 4

General Feedback:

Specific Feedback: Good job. Product was able to retain the core elements. It is consistent and refined quite well.

Week 5

General Feedback:

Specific Feedback: Wording is not particularly prominent but can see why it is done that way. It creates a cloud effect, so it is the way it is. Select all the black silhouette and foliage and decrease the blackness. Fade it in such a way where they sky, and the foliage no longer have that kind of contrast. So, the black becomes almost something light grey.

REFLECTION

Experience

I am enjoying my experience in Advanced Typography so far. Mr. Vinod is more gentler than last semester and has been really helpful with the feedback that he gives after showing him our work. I also get to experience different editing style to create different kind of effects for my work.

Observation

I noticed that the skills that I haved learnt in Typography was really helping for me as it helps me complete these tasks smoothly. I did not struggle as much when completing the task and was able to complete all the task in time.

Findings

I found out that Advanced Typography is not as hard as I thought but it might just be the beginning. I also found that I use lesser time to complete the task as I already have prior knowledge or skills needed to complete the task.

FURTHER READING

Typography Essentials Revised and Updated: 100 Design Principles for Working with Type