Advanced Typography: Task 1 (Exercises 1 & 2)

Using Adobe InDesign only, in size 200 x 200mm. Besides that, you can use black and one other colour. Graphical elements (line, dots...) can be used but limitedly.

2. Type & Play (Part 1 & 2)

Select an image of a man-made object (chair, glass...) or structure (buildings) or nature (human, landscape, leaf, plant...)
Ensure that the images does not contain many elements
Analyse, Dissect, Identify potential letterforms within the image
The forms would be explored and ultimately digitised
Extracted letterforms go from crude representation to more refined expression, but maintain core features of its origin
Have a sample font for direction and reference when refining
Completed letterforms will be combined with an image that is the basis of the extracted letters
Objective is to enhance / support the interplay between the letterforms and the selected visual
The text must be related or woven into a symbiotic relationship with the image

Marking Criteria:

Adapt and apply knowledge independently: skills, abilities, theories, or methodologies gained from one situation to another, while solving difficult problems or exploring complex issues with unique results, showcasing technical skills displayed through exceptional execution, with strong ability to use relevant solutions that result in a well-executed, well crafted, clean and neat exercises that effectively communicates design concepts and solutions.

Learning Goals:

To demonstrate an enhanced use of grids, layouts, and page flow for effective typographic communication
To create a typeface that reflects/ hints of its origins
To create a symbiotic relationship between image and type and to devise methods to enhance interplay between the two

Timeframe: 3 Weeks (Week 1 - Week 3)

Deadline: Week 4

Find out other information about this module below

Module Information

LECTURES

LECTURE LIST

Lecture #1: AdTypo_1_Typographic System
Lecture #2: AdTypo_2_Typographic Composition
Lecture #3: AdTypo_3_Context & Creativity
Lecture #4: AdTypo_4_Designing Type
Lecture #5: AdTypo_5_Perception and Organisation

Lecture #1:

Typographic Systems

Lecture Video

In this lecture, we learnt about Typographic Systems.

Typographic systems provide a sense of purpose that focuses and directs the decision-making.
"All design is based on a structural system"
There are 8 major variations

Axial
Radial
Dilatation
Random
Grid
Transitional
Modular
Bilateral

Shape Grammars (Architect Term)

is a set of shape rules that apply in a step-by-step way to generate a set, or language, of designs.

1. Axial System

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

Figure 1.1.1 Axial System (Source: Type 365)

2. Radial System

All elements are extended from a point of focus, it can consist of multiple points of focus

Figure 1.1.2 Radial system (Source: Type 365)

3. Dilatation System

All elements expand from a central point of focus in a circular fashion
Multiple rings with information
More important information will be inside the ring, less important information will be in the outer ring

Figure 1.1.3 Dilatational system (Source: Type 365)

4. Random System

Elements appear to have no specific pattern or relationship

Figure 1.1.4 Random System (Source: flickr)

5. Grid System

A System of vertical and horizontal divisions

Figure 1.1.5 Grid System (Source: Type 365)

6. Transitional System

An informal system of layered banding

Figure 1.1.6 Transitional System (Source: Type 365)

7. Modular System

A series of non-objective elements that are constructed in standardised unit
Non-objective element should be in same size
The unit should be able to move around to different spaces

Figure 1.1.7 Modular System (Source: Type 365)

8. Bilateral System

All text is arranged symmetrically on a single axis

Figure 1.1.8 Bilateral System (Source: Type 365)

Lecture #2:

Typographic Compositions

Lecture Video

In this lecture, we learnt about Typographic Compositions in typography, exploring different principles and approaches to arrange textual information within a given space. Some of the concepts include: Rule of thirds, Grid systems, and creating movement in typographic layouts. The goal is to find a balance between visual appeal, engagement, and readability in typographic compositions. Typographic composition is the arrangement of textual information in a given space.

Principle of Design Composition

It is the combination and organisation of elements to produce a visual impact. These principles encompass emphases, isolation, repetition, symmetry, asymmetry, alignment, and perspective.

These ideas are more applicable into real-life content, some principles are more easily translatable than others.

Figure 1.2.1 Emphasis in Typographic Composition

The Rule of Thirds

It serves as a composition guideline in photography, proposing that a frame can be divided into 3 columns and 3 rows. The intersecting lines are used to position points of interest within the frame. This composition element is not commonly utilised.

Figure 1.2.2 Rule of Thirds

Typographic Systems

It utilises 8 different systems, with the grid system being the most commonly used for its practicability. This system remains popular due to its versatility and modular nature, allowing for countless adaptations.

Figure 1.2.3 Grid System

During the post-modernist era where young designers challenged traditional methods and embraced chaos, randomness, and asymmetry in typographic systems. Asymmetrical, random, repetitive, dilatational, and radial systems became integral to the designer to create exciting compositions. Some of the artworks from the advocates are attached below.

Figure 1.2.4 Post-modernist Typography

Other models/systems

Environmental Grid

This system explores an existing structure or combining numerous structures. It involves extracting crucial curved and straight lines to form a super-structure. The designer then organises information around this super-structure, incorporating non-objective elements to create a unique and visually stimulating mixture of texture.

Figure 1.2.5 Environmental Grid

Form and Movement

This system explores an existing Grid System, it is developed to explore the diverse options by experimenting different compositions and explore their connections, while also viewing the layout as a dynamic composition with movement.

Static versions of the forms were placed on spread, taking care of visual connections and surprises on every page. The form could represent images, text, or colour. By playing with form and movement, designers can ensure visual connection and surprise, avoiding predictability.

Figure 1.2.6 Form and Movement

Lecture #3:

Context & Creativity

Lecture Video

This lecture discusses the development of ancient scripts into modern languages and emphasises the importance of understanding the context of handwritten scripts in order to learn about a civilisation.

Handwriting

The reason for studying handwriting is because it is important in typography as the first mechanical letterforms were designed to closely resemble handwritten forms, serving as the foundation for form, spacing, and conventions.The tools and materials used such as sharpened bones, charcoal sticks, plant stems, brushes, feather and steel pens all contributed to the unique characteristics of the letterform.

Development of Western handwriting

Cuneiform evolved into Hieroglyphics, which then transitioned into Early Greek using Phoenician letters. It was then further developed into Roman Uncials, followed by English Half Uncials. Emperor Charlemagne standardised the handwriting style with Carolingian Minuscule, which later evolved into Blackletter. The Italian Renaissance then influenced the transition to Movable type.

Conclusion: Cuneiform -> Hieroglyphics -> Early Greek -> Roman Uncials -> English Half Uncials -> Emperor Charlemagne -> Blackletter -> The Italian Renaissance -> Movable Type

Movable type was introduced in 1000-1100 CE, pioneered in China and achieved in Korea with the Diamond Sutra. In late 14C, the Koreans established a foundry to cast movable type in bronze which allows the resetting of text.

Figure 1.3.1 Movable type

Cuneiform (c. 3000 B.C.E):

Earliest known writing system, evolving from pictograms and written from left to right.

Figure 1.3.2 Cuneiform

Hieroglyphs (2613-2160 B.C.E):

Egyptian writing system combining pictorial and phonetic elements, serving as a precursor to alphabetic systems.

Figure 1.3.4 Hieroglyphs

Development of Eastern Handwriting

The digital revolution of the western handwriting resulted in the selling of them through type industries. While there is a growing appreciation for historical letterforms, the West's colonisation of the East has had a detrimental impact on its heritage, cultural traditions, literature, arts, languages, and scripts, often leading to their suppression or stagnation.

Southern Asia

Indus Valley Civilization (3500-2000 B.C.E):

Also known as IVC script, is the oldest writing found in the Indian subcontinent/

Figure 1.3.5 IVC Script

Brahmi Script (450-350 B.C.E):

It is developed in India and is the earliest writing system in India after the Indus script. It has been highly influential, serving as the basis for all modern Indian scripts and several hundred scripts in Southeast and East Asia.

Figure 1.3.6 Brahmi Script

Southeast Asia

Pallava Script:

It is one of the most important scripts as it is originally used for writing Sanskrit and Tamil.

Pro-nagari, is an ancient version of the Nagari script was used in India to record Sanskrit texts. Kawi, the significant historical script of Indonesia, was derived from Nagar but was native to Java. Kawi was utilised for communication with other kingdoms and had a wide influence, serving as the foundation for other scripts in Indonesia and the Philippines.

Inching, the original script from Kerinci, is derived from a group of scripts called Rencong, which originated in South Sumatra.

Figure 1.3.7 Inchung Script

Assimilated scripts from Indonesian communities into Peninsula Malay Communities:

Rajang
Batak
Bugis (Lontara)
Javanese script

Jawi, an alphabet based on Arabic, was introduced alongside Islam. Traders who were involved in spreading the religion also taught Jawi to the illiterate, leading to its adoption by the upper and middle classes in trading ports. However, it was not immediate and took time for Jawi to supplant other writing systems.

Jawi holds greater importance in modern Malay communities because its script is used for famous artworks of literature. Indonesia has a wealth of pre-Jawi inscriptions leading to falsely claim that Jawi is tulisan asal Melayu.

Programmers and Type Design

Google is hiring many Asian programmers and designers to create increasing number of multi-script typefaces and these typefaces are created to facilitate communication in both vernacular and Latin scripts.

Figure 1.3.8 Baloo

Local Movements and Individuals

In Malaysia, murusu.com is lead by programmer and typographer Muthu Nedumaran. He cracked the programming language needed to encode various vernacular writing systems, which is now used in mobile phones and tablets.

Huruf is a local group of designers interested in localising Latin and vernacular letters painted or inscribed on walls.

Elk type and Indian Type Foundry are organisations that made significant contributions to the development of vernacular typefaces in India.

Lecture #4:

Design Type

Lecture Video

This lecture talks about the process of designing type. The process of Adrian Frutiger, Matthew Carter, Edward Johnston creating their typefaces.

Why design other typeface?

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

1. Adrian Frutiger

Renowned 20th century Swiss designer
Created Univers and Frutiger typefaces
Frutiger typeface was designed in 1968 for Charles de Gaulle Airport
Frutiger typeface goals was to make a clean, distinctive and legible typeface that is easy to see from various distances and lightning conditions
When creating letterforms, consider the face it is able to read in poor lightings and when motions

Figure 1.4.1 Frutiger typeface & Adrian Frutiger

2. Matthew Carter

Son of Harry Carter, renowned British type designer
Created Verdana typeface, it is commissioned by Microsoft
Verdana (1996) was created for Microsoft, optimised for legibility on screens, particularly at small sizes
It's designed to maintain readability on screens due to internet and device popularity

Figure 1.4.2 Verdana typeface & Matthew Carter

3. Edward Johnston

Creator of the influential London "Underground" typeface, later known as "Johnston Sans" in 1916
The typeface was commissioned by London's Underground railway to design a typeface for posters and signage that embodied "bold simplicity" and modernity rooted in tradition
The typeface features a combined classical Roman proportions with humanist warmth, setting the tone for printed text

Figure 1.4.3 Johnstan Sans typeface & Edward Johnston

General process for type design

Research

Understand type history, anatomy, and conventions
Familiarise with terminologies like side-bearing, metrics, and hinting
Determine the type's purpose
Analysing existing fonts for inspiration, reference, and context

2. Sketching

Some designers opt for traditional tools such as brushes, pens, and paper, before digitisation
Other designers sketch digitally using tools such as Wacom directly in font design software
Each approach has its pros and cons

3. Digitalization

Use professional softwares like FontLab or Glyphs App for digitalisation
Some designers resort to Adobe Illustrator for crafting letterforms, which is often criticised by purists
Attention to both overall form and counter form is crucial for readability

4. Testing

Testing is integral to the design process for refinement and correction
Prototyping and feedback are key components of testing
Readability and Legibility are critical for text typefaces

5. Deployment

Deployment marks the completion of the typeface, but revisions may still be necessary
Rigorous testing is important to ensure that any teething issues remain minor

Typeface Construction

Using grids (with circular forms) can make an easier contruction of a letterform and is a possible method to build, create, and design your letterform.

Figure 1.4.5 Construction grid for roman capitals (8 x 8 cells)

Construction and Considerations

Classify alphabet characters into groups based on form and construction, distinguishing between capitals and lowercase letters
An important visual correction is the extrusion of curved forms past the baseline and cap line (overshoot), and vertical alignment between curved and straight forms
Visual correction is needed for the distance between letters to ensure uniform white space, this is called 'fitting the type'
Typefaces must consider the counter forms, strokes, and vertical strokes to create a uniform rhythm
Motivations for designing typefaces can be intrinsic, which is the designer's inexplicable need, or extrinsic, driven by interest

Figure 1.4.6 Classification according to form and construction

Lecture #5:

Perception and Organisation

Lecture Video

In this lecture, we learnt about Perception and Organisation.

Perception

It is the way in which something is regarded, understood or interpreted.
In typography, perception deals with the visual navigation and interpretation via form, organisation, and contrast.
It is important to create distinction and differentiate between information by using contrast in typography

Figure 1.5.1 Contrast in Typography

Carl Dair says that using texture and direction can also add contrast to type.
7 Ways to create contrast

Contrast of Size
Contrast of Weight
Contrast of Form
Contrast of Structure
Contrast of Texture
Contrast of Colour
Contrast of Direction

Figure 1.5.2 Examples of Carl Dair's method to create contrast

Form is the overall look and feel of the elements in a typographic composition.
Good form in typography tends to be visually appealing to the eye.

Figure 1.5.3 Examples of Form in Typography

Organisation and Gestalt

In German, Gestalt refers to the arrangement or composition of things.
The Gestalt theory is important in design as the components that makes up the design is only good if its overall visual is great as well.
Each component is functional at elemental level, the sum of its parts is still smaller compared to the overall form.
The Gestalt theory suggests that perceiving things as cohesive whole is more significant than perceiving them as individual parts. This concept can also be applied to designing layouts.
Some of the principles of Gestalt psychology includes: proximity, similarity, continuity, closure, area, and symmetry.

Law of Similarity: This principle states that objects and elements that share similar visual characteristics such as colour, shape, size, or other attributes tend to be grouped together perceptually by viewers.

Figure 1.5.4 Law of Similarity

Law of Proximity: This principle explains how humans tend to perceive elements that are close to each other as belonging together, spatial arrangement of visual elements influences our perspective of their relationship and grouping

Figure 1.5.5 Law of Proximity

Law of Closure: This principle explains how humans view incomplete or fragmented visual stimuli as complete objects, viewers mentally fill in the missing gaps and perceive them as a complete whole.

Figure 1.5.6 Law of Closure

Law of Continuation: This principle explains how our brains perceive lines or shape as continuing in a smooth flow even when they are interrupted by other elements. When elements are arranged in a way that implies continuous flow, viewers tend to perceive them together and forming a pattern.

Figure 1.5.7 Law of Continuation

EXERCISE 1: TYPOGRAPHIC SYSTEMS

Task To Do:

Create 8 posters using Adobe InDesign, with each poster illustrating one of the 8 typographic systems outlined by Elam (2007).
The posters should have dimensions of 200 x 200mm
Colour usage is restricted to black and one additional colour
Limited use of graphical elements (lines or dots, etc.)

Contents to be used:

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

Process — Axial System:

All element aligned to the left or right of a single axis

I arranged all the information to the left or right of a single axis. We are required to create two versions for each system. Attached below is my sketch and first attempt.

Figure 2.1.1 Axial System Sketch 1 & 2

Figure 2.1.2 Axial System Attempt 1

Changes after Feedback session on Week 2:

Figure 2.1.3 Axial System Attempt 2

Process — Radial System:

All element are extended from a point of focus, it can consists of multiple points of focus

Figure 2.1.4 Radial System Sketch 1 & 2

Figure 2.1.5 Radial System Attempt 1

Changes after Feedback session on Week 2

Figure 2.1.6 Radial System Attempt 2

Process — Dilatation System

All element will expand from a central point of focus in a circular fashion

Figure 2.1.7 Dilatation System Sketch 1 & 2

Figure 2.1.8 Dilatation System Attempt 1

Changes after Feedback session on Week 2

Figure 2.1.9 Dilatation System Attempt 2

Process — Random System

All elements will have no specific pattern or relationship

Figure 2.1.10 Random System Sketch 1 & 2

Figure 2.1.11 Random System Attempt 1

Changes after Feedback session on Week 2

Figure 2.1.12 Random System Attempt 2

Process — Grid System

All elements will be arranged in a system of horizontal and vertical divisions

Figure 2.1.13 Grid System Sketch 1 & 2

Figure 2.1.14 Grid System Attempt 1

Changes after Feedback session on Week 2

Figure 2.1.15 Grid System Attempt 2

Process — Transitional System

Informal system of layered branding

Figure 2.1.16 Transitional System Sketch 1 & 2

Figure 2.1.17 Transitional System Attempt 1

Changes after Feedback session on Week 2

Figure 2.1.18 Transitional System Attempt 2

Process — Modular System

It is a series of non objective elements that are constructed and standardised units

Figure 2.1.19 Modular System Sketch 1 & 2

Figure 2.1.20 Modular System Attempt 1

Changes after Feedback session on Week 2

Figure 2.1.21 Modular System Attempt 2

Process — Bilateral System

All texts will be arranged symmetrically on a single axis

Figure 2.1.22 Bilateral System Sketch 1 & 2

Figure 2.1.23 Bilateral System Sketch 1 & 2

Figure 2.1.24 Bilateral System Attempt 2

Final Submission of Task 1: Exercise 1

JPEG (300dpi) and PDF files

JPEG:

Figure 2.2.1 Final - Axial System

Figure 2.2.2 Final - Radial System

Figure 2.2.3 Final - Dilatation System

Figure 2.2.4 Final - Random System

Figure 2.2.5 Final - Grid System

Figure 2.2.6 Final - Transitional System

Figure 2.2.7 Final - Modular System

Figure 2.2.8 Final - Bilateral System

PDF (Without Grids):

Figure 2.3.1 Final - Typographic Systems without Grids - PDF

PDF (With Grids):

Figure 2.3.2 Final - Typographic Systems with Grids - PDF

EXERCISE 2: TYPE & PLAY

Task To Do:

Finding an image, preferably textures, man-made object, structures, nature. Ensure the image does not contain too many elements.
Analyse, dissect, and identify potential letterforms
Identify a reference
Refining letterforms

Letterforms

Process — Finding Image

Finding textured images for this exercise. Image selected must have a strong & consistent character to be able to deconstruct the letterforms.

Figure 3.1.1 Texture image finding

Figure 3.1.2 Selected image, Source: link

Process — Extraction of letterforms

To obtain the letterforms that I had recognised, I used Adobe Illustrator's Brush Tool, to trace the outline of the shapes. The extracted letters include letters L, T, E, u, C. Then, I made further refinement by detail tracing using Pen Tool.

Figure 3.2.1 Traced outline using Brush Tool

Figure 3.2.2 Traced outline using Pen Tool

Process — Reference Font

I selected Akaya Telivigala (Regular) as my reference font. I intend to create a bubbly, thick font.

Figure 3.3.1 Reference font and extracted letterforms overlapped

With the reference letters and extracted letterforms, I used the Direct Selection Tool to adjust the extracted letterforms to the desired letters L, E, C, U.

With the feedback received, I made sure to not make very big refinements, to maintain the original shape of the extracted letterforms. But Instead, I focused on readability.

Figure 3.3.2 Refinement of letterforms

Poster

For the second part of the assignment, we were required to combine the final extracted letterforms with a relevant image to create a 1024px x 1024px movie poster.

The main objective is to enhance the letters and the selected image we choose to edit. The letters and the visual image need to correlate to each other.

Process — Image Searching

Figure 3.4.1 Image Searching

Figure 3.4.2 Selected Image

Process — Adobe Photoshop Progress

I lowered the brightness of the image, and added a B&W filter. Besides that I also made sure to crop the image into a square.

Figure 3.4.3 Working Progress in Adobe Photoshop

Process — Results in Adobe Photoshop (Background)

Figure 3.4.4 Results of Background Image (Photoshop)

Process — Adobe Illustrator Progress

The image was then imported from Photoshop to Illustrator. Here, I added texts and adjusted the size of the image to different dimensions. Receiving feedback from Mr Vinod, he preferred the middle design.

Figure 3.4.5 Working Progress Adobe Illustrator

Process — Results in Adobe Illustrator

Figure 3.4.6 Results in Adobe Illustrator

Final Submission of Task 1: Exercise 2

JPEG (300dpi) and PDF files

Letterforms

JPEG:

Figure 3.5.1 Letterforms (JPEG)

PDF:

Figure 3.5.2 Letterforms (PDF)

Poster

JPEG:

Figure 3.5.3 Movie Poster (JPEG)

PDF:

Figure 3.5.4 Movie Poster (PDF)

FEEDBACK

Week 1

General Feedback:

Be more punctual, diligent and disciplined throughout this module.

Week 2 General Feedback: Make sure all my elements line up properly, to create a cross alignment. Avoid using too many graphical elements. The angle of text should not be more than 45 degrees.

Week 3 (Absent)

General Feedback: When refining your work, make sure to maintain the special features from the image. We can do research on the image we chose to understand clearly.

Week 4

General Feedback:

The title (font dissected) should represent the object in the background. 1024x1024 pixels, do not crowd the information. Observe how effective artworks integrate letterforms with images to come out with a good movie poster. Title should be bigger than the supporting elements to catch reader's attention. Background should be related to our reference image.

Week 5

General Feedback: At least 4 characters from our name, ensure the style reflects our personality.

REFLECTION

Experience: Engaging in these exercises proved to be both demanding and fulfilling. The challenge of developing multiple typographic systems in a short period pushed me to explore and enhance my skills. Particularly, creating typefaces from images in the second task was highly enjoyable and allowed for extensive creative freedom.

Observations: I noted the critical role of balance and the strategic use of white space in typographic design. Employing grids and guides was instrumental in achieving cohesive layouts. In the second task, it was essential to retain the distinctive features of the original images within the letterforms.

Findings: These exercises highlighted the delicate balance between creativity and structure in design. I discovered that having a well-defined system fosters creativity and that consistency within a typeface family is vital. This experience enriched my understanding of typographic principles and better prepared me for future projects.

Search This Blog

Lim Yu Xuen 0359676

Advanced Typography: Task 1 (Exercises 1 & 2)