1.4.2022 - 29.4.2022 (Week 1 - Week 5)

Moey Jo Min (0350567)
Advanced Typography / Bachelor of Design (Hons) in Creative Media
Task 1: Exercises

LECTURES

WEEK 1

Advanced Typography: Typographic Systems

1. Axial System

All elements are organized to the left or the right of a single axis
The axial can be bent

Fig 1.1 Axial System Example

2. Radial System

All elements are extended from a point of focus
Can have multiple points of focus

Fig 1.2 Radial System Example

3. Dilatational System

All elements expand from a central point in a circular fashion
Can have multiple rings of circles, with information on either side of the line
Information arranged in a hierarchical manner
Place rings at different places

Fig 1.3 Dilatational System Example

4. Random System

Elements appear to have no specific pattern or relationship

5. Grid System

A system of vertical and horizontal divisions

6. Transitional System

An informal system of layered banding
Segregate information within certain bands

Fig 1.4 Transitional System Example

7. Modular System

A series of non-objective elements that are constructed in as a standardized unit

Fig 1.5 Modular System Example

8. Bilateral System

All text is arranged symmetrically on a single axis

*Examples shown in Fig 1.1 - Fig 1.4 are screengrabs from lecture video, sourced from type 365.

WEEK 2

Advanced Typography: Typographic Composition

- Creation of letters

- Arrangement of large amount of text within a given space

Principles of Design Composition

- Emphasis, isolation, repetition, symmetry & asymmetry, alignment, perspective

- *Some principles may be difficult to be used in typographic composition

Emphasis

Fig 2.1 Emphasis

The Rule of Thirds

Anyone of the intersecting points become the focal point of the layout
Generally never used in typographic compositions when there are other more favorable ones

Fig 2.2 The Rule of Thirds

Typographic Systems

Axial, radial, dilatational, random, grid, transitional, modular, bilateral
Grid System (/ Raster Systeme) → the most pragmatic and the most used system
Grid System is derived from the gridded compositional structure of letterpress printing

further enhanced by Swiss (Modernist) style of Typography
Josef Müller-Brockmann, Jan Tschichold, Max Bill

Post-modernist era → chaos, randomness, asymmetry
Legibility and readability were relegated to the back seat, however the best examples seem to combine two seamlessly
David Carson, Paula Scher, Jonathan Barnbrook

thinking & intuition

Other models / Systems

Environmental Grid

Based on the exploration of an existing structure or numerous structures combines
An extraction of crucial lines both curved and straight are formed
The designer then organizes the information around this super-structure
Non-objective elements → to create a unique and exciting mixture of texture and visual stimuli

Fig 2.3 Environmental Grid - Example from lecturer Brenda McMannus, of Pratt Inst, from the book: Typographic Form and Communication, pg 211

Form and Movement (developed by Mr Vinod)

Based on the exploration of an existing Grid Systems
To see the turning of pages in a book as a slowed-down animation in the form that constitutes the placement of image, text and color
The placement of a form (irrespective of what it is) on a page, over many pages creates movement
Whether the page is paper or screen in irrelevant

Fig 2.4 Form and Movement

WEEK 3

Advanced Typography: Context and Creativity

Historical context

Handwriting

Importance of Handwriting in The Study of Type/Typography

The first mechanically produced letterforms were designed to directly imitate handwriting
Basis/standard for form, spacing and conventions mechanical type would try to mimic

Shape and lines of hand drawn letterforms are influenced by the tools & materials used
e.g. Sharpened boned, charcoal sticks, plant stems, brushes, feather, steel pens
additional factors: material upon the forms were written
e.g. Clay, papyrus, palm leaf, animal skins (vellum & parchment), paper

Fig 3.1 Evolution of Latin Alphabet

Cunneiform

c. 3000 B.C.E.

Earliest system of actual writing
Was used in a number of languages between the 34C. B.C.E. through the 1st century C.E.
Wedge form → pressing the blunt end of a reed stylus into wet clay tablets
Evolved from pictograms
written from left to right

Hieroglyphics

2613—2160 B.C.E

The Egyptian writing system is fused with the art of relief carving
mixture of both rebus and phonetic characters—the first link to a future alphabetic system

Hieroglyphic images in three different ways:

1. As ideograms, to represent the things they actually depict

2. As determinatives to show that the signs preceding are meant as phonograms and to indicate the general idea of the word

3. As phonograms to represent sounds that "spell out" individual words

Early Greek

5th C. B.C.E

Built on the Egyptian logo-consonantal system, the Phoenicians developed a phonetic alphabet → 22 letters
The Phoenicians system then was adopted by the Greeks who added the necessary vowels
Early Greek was comprised on only capital letters, written between 2 guidelines organized them into horizontal rows
Direction of reading was not yet fixed → Boustrophedon/"as the ox plows" (left to right, right to left)
Early Greek letters were drawn freehand, not constructed with compasses and rule
Had no serifs
Had no informal entry and exit strikes left by a relaxed and fluent write
Had no 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

The new forms, used for inscriptions throughout the Greek empire, served as models for formal lettering in imperial Rome
Those Roman inscriptional letters —written with a flat brush, held at an angle like a broad nib pen, then carved into the stone with mallet and chisel— have served in their turn as models for calligraphers and type designers for the past 2000 years

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.2 Roman Uncials

English Half Uncials

8th C.

In England, the uncial evolved into a more slated and condensed form
While English and Irish uncials evolved, writing on the European continent developed considerably and needed a reformer → the Carolingian Handwriting Reform

Fig 3.3 English Half Uncials

Emperor Charlemagne

8 C. C.E.

After the fall of the Roman Empire, the end of a central advanced culture resulted in general illiteracy and a breakdown of handwriting into diverse regional styles
For 300 years the knowledge was kept alive mainly in the remote outposts of the religious cloisters and retreats

Carolingian Minuscule

A court school was established under the direction of Alciun of York
During Charlemagne's patronage book production increased and language was standardized —pronunciation and spelling as well as writing conventions— capitals at the start of a sentence, spaces between words and punctuation

The Carolingian minuscule was used for all legal and literacy works to unify communication between various regions of the expanding European empire
Was as important as a development as the standard Roman capital— for it was this style that became the pattern of Humanistic writing of the 15th century
this latter, in turn was the basis of our lower-case roman type

Black Letter

12-15 C. CE

Gothic was the culminating artistic expression of the middle ages, occurring roughly from 1200—1500.
The term Gothic originated with the Italians who used it to refer to rude/barbaric cultures north of the Italian Alps
The Gothic spirit took hold in France, Germany and England where it was manifested through unhindered upward striving

The vertical supplanted horizontals as the dominant line in architecture; the pointed arch replaced the round arch of the Roman; the almond shape, or mandoria, was preferred
Gothic writing forms reflected this aesthetic
Blackletter is 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 book production

Fig 3.4 Black Letter

The Italian Renaissance

As the Gothic spirit reached its apex in the other areas of western Europe, Humanish scholars in Italy were slowly reviving the culture of antiquity
The renaissance embrace of ancient Greek and Roman culture spurred a creative wave through Italian art, architecture, literature and letter form design

The Humanist admired the Carolingian script, which had clear open hand writing
Humanist named 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

Movable Type

11 C.—14 C.

Printing (wood block) had already been practiced in China, Korea and Japan (Dharani Sutra, AD 750).
Earliest known printed book (AD 868) is the Diamond Sutra → 16' scroll with the world's first printed illustration
China had attempted use movable type for printing but was unsuccessful due in part to the number of characters and the material used (clay)

Late 14 C. the Koreans established a foundry to cast movable type in bronze—allowed the dismantling and resetting of text
With the creation of their new script Han'gul, the Koreans would succeed where the Chinese failed

Moveable type was introduced in the 1000-1100 CE
Was pioneered in China, but achieved in Korea (Diamond Sutra)

Eastern Developments in Handwriting

with the digital revolution, the west would begin to digitize many of its historical creations and type foundries would create, market and sell or license them
with the colonization if the east by the west, much of the heritage and cultural practices in literature, arts and crafts, languages and scripts would be halted or stunted

Fig 3.5 Evolution of Middle Eastern Alphabets

Fig 3.6 The Evolution of the Chinese script

Indus Valley Civilization script (3500-2000 BCE)

the oldest writing found in "Indian" subcontinent

Fig 3.7 Indus Valley Civilization script

Brahmi script (450-350 BCE)

the earliest writing system developed in India after the Indus script
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
most scholars stating that Brahmi was derived from or at least influenced by one or more contemporary Semiotic scripts

oldest writing system present in Southeast Asia were Indian scripts
most important: Pallava (/Pallawa in Malay) → a South Indian script originally used for writing Sanskrit and Tamil
Pallaca wasn't the only Indian script in use in the Malay Archipelago
Pra-nagari: an early form of the Nagari script, used in India for writing Sanskrit

Fig 3.8 Kedukan Bukit inscription from Sumatra, written in Old Malay using the Pallava script

Fig 3.9 Blanjong inscription of Bali, written using Pra-nagari

Kawi

Indonesia's most important historical script
based on Nagari, but indigenous to Java
was the script used for contact with other kingdons
the basis of other scripts in Indonesia and the Philippines

Importance of Handwriting in The Study of Type/Typography

the first mechanically produced letterforms were designed to directly imitate handwriting

Programmers and Type Design

more and more vernacular and "multi-script" typefaces are being produced to cater to situations where the written matter is communicated in the vernacular script or vernacular and Latin script

Local Movements and Individuals

murasu.com spear-headed by programmer and typographer Muthu Nedumaran
the programming language needed to encode the different types of vernacular writing systems was cracked by Muthu
the system is now used in mobile phones and desktops

Huruf

a local group of graphic designers interested in the localized lettering of Latin and vernacular letters painted or inscribed on walls and signages
the more prominent organizations digitizing and revitalizing typefaces in Malaysia

Ek Type and Indian Type Foundry

organizations that have done ground breaking work with the development of vernacular typefaces in India

WEEK 4

Advanced Typography: Designing Type

Xavier Dupré (2007) in the introduction of his typeface Malaga suggested two reasons for designing a typeface

type design carries a social responsibility so one must continue to improve its legibility (need to be fulfilled)
type design is a form of artistic expression

Adrian Frutiger

a renowned twentieth century Swiss graphic designer
forte: typeface designing
is considered responsible for the advancement of typography
valued contribution to typography: Univers, Frutiger

Frutiger

sans serif typeface
designed by Swiss type designer Adrian Frutiger in 1968 specifically for the newly built Charles de Gaulle International Airport in France

Purpose: "The goal of this new typeface was created a clean distinctive and legible typeface that is easy to see from both close up and far away. Extremely functional. "

Considerations/Limitations: The letterforms needed to be recognized even in poor light conditions or when the reader was moving quickly past the sign. He tested with unfocused letters to see which letterforms could still be identified,

https://www.pinterest.com/pin/516928863453468940/

Fig 4.1 Frutiger

Matthew Carter

the son of Harry Carter
Royal Designer for Industry, contemporary British type design and ultimate craftsman
trained as a punchcutter at Enschedé by Paul Rädisch
responsible for Crosfield's typographic program in the early 1960s
Mergenthaler Linotype's house designer 1965-1981
many of his fonts were created to address specific technical challenges

Verdana (1996)

Purpose: The font was tuned to be extremely legible even at very small sizes on the screen due in part to the popularity of the internet and electronic devices

Considerations/Limitations: The Verdana fonts exhibit characteristics derived from the pixel rather than the pen, the brush or the chisel. Commonly confused characters, such as the lowercase i j l.

Fig 4.2 Verdana

https://www.pinterest.com/pin/244601823502381685/

Edward Johnston

creator of the hugely influential London "Underground" typeface ("Johnston Sans", 1916)
was asked to create a typeface with "bold simplicity" that was truly for modern yet rooted in tradition
Johnston's design, completed in 1916, combined classical Roman proportions with humanist warmth

Purpose: London's Underground railway ordered a new typeface for its posters and the signage from the calligrapher Edward Johnston. He handed over details and examples of the letter shapes that would set the tone for printed text until the present day.

Considerations/Limitations: "Johnston's remit was to unite the London Underground Group, the different companies all using the signage was all completely different - there was this cacophony of letters. Johnston applied the proportions of Roman capital letters to his typeface, so it was rooted in history, rooted in traditional calligraphy. But it has an elegance and a simplicity that absolutely fitted the modern age. "

Fig 4.3 Johnston Sans

https://medium.com/@botezatuteodora/edward-johnston-23df4dccfbfb

His former student (Eric Gill) was perhaps driven by the guilt of seeing the success of his own typeface, Gill Sans, which he admitted had been heavily based on Johnston's work

"I hope that you realize that I take every opportunity of proclaiming the fact that what the Monotype people call Gill Sans owes all its goodness to your Underground letter, " Eric Gill

General Process of Type Design

1. Research

when crating type, we should understand type history, type anatomy and type conventions
we should also know terminologies, side-bearing, metrics, hinting...
it is important to determine the type's purpose or what it would be used for, what different applications it will be used in (e.g. school busses, airport signage,...)
examine existing fonts that are presently being used for inspiration/ideas/reference/context/usage pattern/etc.

2. Sketching

some designers sketch their typeface using the traditional tool set (brushes/pens, ink and paper) then scan them for the purpose of digitization → 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 own positives and negatives

3. Digitization

professional software that are used in the digitization of typefaces: Fontlab, Glyphs App
there are designers that also use Adobe Illustrator to design or craft the letterforms then introduce it into the specialized font apps (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 (readability of the typeface is heavily dependent on it)

4. Testing

an important component in the design thinking process
the results of the testing is part of the process of refining and correcting process and leads to important feedback
depending on the typeface category (display type/text type) the readability and legibility of the typeface becomes an important consideration
it is not as crucial if the typeface is a display type, where expression of the form takes a little more precedence

5. Deploy

even after deploying a complete typeface, there are always teething problems that did not come to the fore during the prototyping and testing phases
the rigor of the testing is important in so that the teething issue remain minor

Typeface Construction

Roman Capital

the grid consists of a square, and inside it a circle that just touches the lines of the square in four places
within the square, there is also a rectangle
this rectangle is three quarters the size of the square and is positioned in the center of the square
using grids (with circular forms) can facilitate the construction of a letterform and is a possible method to build/create/design your letterform

Construction and Considerations

classification according to form and construction
26 characters of the alphabet can be arranged into groups
distinction is made between a group for the capitals and a group for lowercase letter
extrusion of curved (and protruding) forms past the baseline and cap line
also applies to vertical alignment between curved and straight forms
"fitting" type: white space between letters should appear the same

WEEK 5

Advanced Typography: Perception & Organization

Perception

"the way in which something is regarded, understood, or interpreted"
perception in typography deals with the visual navigation and interpretation of the reader via contrast, form and organization of the context
context → textual, visual, graphical, color

1. Contrast

to create distinction / differentiation between information
hierarchy

Fig 5.1 Contrast in typography devised by Rudi Rüegg

Carl Dair

adds to more principles into the mix: texture and direction
"to make design work and meaning pop out — clearly and unambiguously, and with flair"
Dair posits 7 kinds of contrast: size, weight, contrast of form, contrast of structure, contrast of texture, contrast of color, contrast of direction

i. Size

provides a point to which the reader's attention is drawn
most common: making a title or heading noticeably bigger than the body text

ii. Weight

describes how bold type can stand out in the middle of lighter type of the same style
bold, rules, spot, square → provides a "heavy area"
visual attraction / emphasis

iii. Form

the distinction between a capital letter and its lowercase equivalent
a roman letter and its italic variant
condensed and expanded versions of typeface

iv. Structure

the different letterforms of different kinds of typefaces
e.g. A monoline sans serif and a traditional serif, or an italic and a blackletter

v. Texture

by putting together the contrast of size, weight, form, and structure, and applying them to a block of text on a page
texture refers to the way the lines of type look as a whole up close and from a distance
depends partly on the letterforms themselves and partly on how they are arranged

vi. Direction

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 the direction
mixing wide blocks of long lines with tall column of short lines

vii. Color

a second color is often less emphatic in value than plain black on white
it is important to give thought to which elements needs to be emphasized and to pay attention to the tonal values of the colors used

2. Form

refers to the overall look and feel of the elements that make up the typographic composition
plays a role in visual impact and first impressions
a good form in typography tends to be visually intriguing to the eye; it leads the eye from point to point, it entertains the mind and is most often memorable

originating from the Greek words "typos" (form) and "graphis" (writing)
typography means to write in accordance with form
typography functions: 1. to represent a concept ; 2. 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

Organization / Gestalt

Gestalt is a German word meaning the way a thing has been "placed" or "put together"
an attempt to understand the laws behind the ability to acquire and maintain meaningful perceptions
the Gestalt psychologists, especially Max Wertheimer, developed a number of "laws" that predict how perceptual grouping occurs under a variety of circumstances (Wertheimer, 1923/1938)

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 psychologist believed that you must look at the whole of experience
in design, 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

1. Law of Similarity

elements that are similar to each other tend to be perceived as a unified group
can refer to any number of features, including color, orientation, size, or indeed motion

2. Law of Proximity

elements that are close together tend to be perceived as a unified group
items close to each other tend to be grouped together, whereas items further apart are less likely to be grouped together

3. Law of Closure

refers to the mind's tendency to see complete figures or forms even if a picture is incomplete, partially hidden by other objects, or if part of the information needed to make a complete picture in our minds is missing

4. Law of (Good) Continuation

humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect
the alignment of the objects or forms plays a major role for the principle to take effect

5. Law of Symmetry

6. Law of Simplicity (Pragnanz)

INSTRUCTIONS

Task 1: Exercise 1 - Typographic Systems

For exercise 1, we are given a piece of information, and we are to utilize the 8 typographic systems that we had learnt to arrange the information.

Fig 6.1 Information given (1.4.2022)

At first, I tried sketching layouts before I start. However, I found it difficult as I am not sure how much place does the texts take up. So, I decided to start off straight away in InDesign.

Fig 6.2 Screenshot of final layouts with grids (7.4.2022)

Fig 6.3 Axial System (4.4.2022)

I made two attempts for the axial system, the third image is an exploration of the second image. I like the third one the most. The first attempt was a try out, but I found it less interesting as it is really similar to what others had done. On my second attempt, I tried playing around with different font weight. However, I still feel that something is missing. So, I rotated the axis 20 degrees and extended the rusty red box. I think the outcome looks way better than it was before.

Font used:

Left: ITC New Baskerville Std

Middle & Right: Univers LT Std

Fig 6.4 Radial System (7.4.2022)

Surprisingly, the radial system was the one that I struggled the most. The one on the left seems to lack on unity, the information are like three completely separated pieces. To solve this problem, I tried rearranging the information in one circle, instead of having three. The second one turns out better, though there is still room for improvement.

Font used:

Left: Serifa

Right: Univers LT Std

Fig 6.5 Dilatational System (5.4.2022)

In my first attempt, I arranged the information by layering the circles, the center point was being moved to left a little. I think it kind of have some rhythm in it, but the feeling isn't strong. So, I tried changing the background and text color. It looks better for me, as the texts pop out more. My third attempt is to experiment the movement that can be achieved in dilatational system. I quite like how the information spreads out, but I think this layout needs further enhancement.

Font used:

Left, Middle & Right: Univers LT Std

Fig 6.6 Random System (7.4.2022)

I used more non-objective elements (compared to my other layouts) in the layout on the left. It is to simulate the Bauhaus design style. The one on the right is discovered coincidentally. I tried putting the date, time and names into a whole paragraph, and I kind of like how it looks, though it could cause difficulty in reading. Out of the two, I like the left one better, because it looks more energetic. I like the right one too, it's just that the "emotion" does not feel right.

Font used:

Left: Futura Std, Janson Text LT Std, Univers LT Std, Serifa

Right: Janson Text LT Std, Univers LT Std, Serifa

Fig 6.7 Grid System (6.4.2022)

For the grid system, I made three attempts. As the text is quite short and we are not allowed to add images, I tried making the layouts look minimalistic. My favorite layout is the one on the left, because it is balanced, and it looks more complete compared to the other two.

Font used:

Left: Univers LT Std, ITC New Baskerville Std

Right & Middle: ITC Garamond Std

Fig 6.8 Transitional System (7.4.2022)

My first attempt of the transitional system was done unintentionally. I was trying to do the radial system, but I failed to do so. I suddenly got an idea of adjusting the texts to make it transitional. I definitely need to work on it, but the process was very enjoyable. I tried creating something based on the memory of the examples that I had seen in my second attempt. However, it turns out really ordinary. Thus, I explored more and referred to the book about typographic systems. I think the outcome (right) looks interesting, and I like it the most.

Font used:

Left: Futura Std, ITC Garamond Std

Middle & Right: Futura Std

Fig 6.9 Modular System (6.4.2022)

The modular system was a bit hard for me at the beginning. I would say my first outcome is pretty unpleasant to look at. The second layout looks much better than the first one. It does not seem like I am forcing the information to stay within the space.

Font used:

Left: Univers LT Std, Adobe Caslon Pro

Right: Futura Std

Fig 6.10 Bilateral System (5.4.2022)

I found the bilateral system is a challenging to have an interesting layout. On my first attempt, I tried playing around with the font weights, but I don't like the design. I have two axis for the second one, which is not "bilateral" anymore, but I think it looks more interesting compared to the first outcome.

Font used:

Left: ITC Garamond Std

Right: Univers LT Std, ITC New Baskerville Std

Amendment

Fig 6.11 Amended Grid System (9.4.2022)

During class, I was given feedback that the alignment of the text at the bottom left looks less pleasant, and the "lecture theater 12" should be smaller. So, I tried resolving the issues. At first, I moved the text to the right a little to make it align with the heading, and reduced the size of "lecture theater 12". However, it doesn't feel right to me, and the texts are actually in the gutter, which I don't really like. While Mr Vinod was giving feedback on this layout, he mentioned that I arranged the information "left-right-left" Thus, I made the bottom left texts align left to see if it will be better. I like it this way more, so I decided to use this as final.

Font used:

Left & Right: Univers LT Std, ITC New Baskerville Std

Final Exercise 1: Typographic System

Fig 6.12 Final Exercise 1: Typographic System - Axial System (7.4.2022)

Fig 6.13 Final Exercise 1: Typographic System - Radial System (7.4.2022)

Fig 6.14 Final Exercise 1: Typographic System - Dilatational System (7.4.2022)

Fig 6.15 Final Exercise 1: Typographic System - Random System (7.4.2022)

Fig 6.16 Final Exercise 1: Typographic System - Grid System (9.4.2022)

Fig 6.17 Final Exercise 1: Typographic System - Transitional System (7.4.2022)

Fig 6.18 Final Exercise 1: Typographic System - Modular System (7.4.2022)

Fig 6.19 Final Exercise 1: Typographic System - Bilateral System (7.4.2022)

Fig 6.20 Final Exercise 1: Typographic System - PDF (9.4.2022)

Fig 6.21 Final Exercise 1: Typographic System with Grids and Guides- PDF (9.4.2022)

Task 1: Exercise 2 - Type and Play

Part 1: Finding Type

In this task, we are required to extract letters from the chosen image and refine four letters. The final outcome should maintain the style of the object of the image.

1. Chosen Subject

Fig 7.1 Asteroid image by Viktor Talashuk on Unsplash

I downloaded an image of an asteroid from Unsplash as my subject. I really like the texture of it, and I think it will be fun to design a typeface from it.

Letterform Extraction

Fig 7.2 Identified letters - A, B, C, M, P, S, Y (13.4.2022)

These are the identified letterforms, which are A, B, C, M, P, S and Y. For this exercise, we will only need to design for letters, so I will have to choose four out of the seven letters identified.

Fig 7.3 Chosen letterforms - A, B, C, M (13.4.2022)

These are the letters that I have chosen. I chose them because the way to construct each of these letters are different, and I want to challenge myself as I had never constructed these letters before.

2. Refinement

Fig 7.4 Reference - Futura Std Medium (13.4.2022)

I chose a sans serif typeface as my reference, because I feel from what I had extracted is more like a sans serif typeface instead of serif. The sharpness of the apex in the letter A and M also somehow represents the style that I planned to head to.

Fig 7.5 Basic study on reference (14.4.2022)

I did a basic study on the letterforms of my reference, so that I am more clear on how to construct the letters.

Fig 7.6 Sketch (15.4.2022)

During class, Mr Vinod said that the image that I have chosen is rather difficult. He suggested me to refer to the other parts of the image when refining, so that the characteristics of the asteroid can be retained.

After receiving feedback, I worked on the sketch in class. I did not start immediately in Illustrator as the shapes I have is quite complex, I will need to simplify them a little, and I am more comfortable with drawing on papers. I spent some time studying the characteristics of the asteroid. The tips are mostly pointy instead of sharp. The rounded parts are usually less crooked. I tried to incorporate the characteristics that I have identified into my sketch, and this is the outcome.

I showed Mr Vinod my sketch after class, he said that my sketch looks fine and it is consistent, I can continue working on it.

Fig 7.7 Attempt 1 - digitized sketch (15.4.2022)

I traced the letterforms according to my sketch. I kind of like how it turns out, but I still need to make some adjustment. I want to try simplifying the shapes, as it looks too complicated for me currently.

Fig 7.8 Attempt 2 - simplified shapes (19.4.2022)

I started by constructing the actual letterforms, referring to my reference. Based on the constructed letters, I then begin to add on the characteristics of the asteroid, so that I can ensure the letters have similar stoke width, and width of each letters is accurate (e.g. "M" has to be wider). Some details are being reduced to make the shape of the letterforms less complex.

Fig 7.9 Attempt 3 - minor adjustment and added holes (20.4.2022)

In my previous attempt, the letter A eventually became thinner. So, I made it wider and adjusted the placement of the anchor points that are affected. The end of the stem of letter A is also tweaked. I added some holes to make it more similar to the surface of the asteroid.

Fig 7.10 Swapping colors of Attempt 3 (21.4.2022)

Kindly click on the image for a clearer view :)

Mr Vinod emphasized on studying the counter space of the letter form. I swapped the colors of the letters and the background, and I found out that some parts are not doing really well. They are too straight compared to the other parts, which I found a little disturbing. Thus, I made the necessary changes.

Fig 7.11 Attempt 4 - Adjusted stroke and apex (21.4.2022)

I lowered the apex of the letter A and M, as it makes the letters look much taller than the other letterforms. Besides, I added some curves and edges to the strokes that I am not satisfied with shown in Fig 00. The beginning and end of the letter C is also adjusted.

Final Part 1: Finding Type

Fig 7.12 Final Type Design Compilation Process - JPEG (21.4.2022)

Fig 7.13 Final Type Design Comparison - JPEG (21.4.2022)

Fig 7.14 Final Type Design - JPEG (21.4.2022)

Fig 7.15 Letter A - JPEG (21.4.2022)

Fig 7.16 Letter B - JPEG (21.4.2022)

Fig 7.17 Letter C - JPEG (21.4.2022)

Fig 7.18 Letter M - JPEG (21.4.2022)

Fig 7.19 Final Finding Type - PDF (21.4.2022)

Part 2: Type & Image

For part 2 exercise, we are required to combine an image with either a letter, word or a sentence. The text should integrate with the image.

Fig 8.1 Chosen Image 1, by Jesse Bowser on Unsplash (26.4.2022)

I browsed through many pictures in the past days, this is the image that immediately caught my attention that makes me want to use it for the exercise. I really like the atmosphere of this image. The light and shadow of the picture makes me excited to do something with them.

Fig 8.2 Working in Photoshop (26.4.2022)

I tried distorting the perspective of the text at first, but it didn't turn out nice, probably because the perspective in this image is not very obvious. The text looks better by simply just rotating it.

Fig 8.3 Details (26.4.2022)

There are thin orange lines around the border of the shadow in the original image. So, I added the same effect to my text using the brush tool.

Fig 8.4 Attempt 1 (26.4.2022)

The text was much bigger at first, but I feel that it looks overwhelming. So I reduced the size and this is the outcome. I like it where the color of the word "rise" is warmer and "fall" is cooler, it somehow expresses the meaning of the words.

Font: ITC Garamond Std Bold Narrow Italic

Tools used:

- Gaussian Blur

- Brush Tool

- Smudge Tool

- Eraser

- Noise

Fig 8.5 Attempt 2 (28.4.2022)

I tried making another one with thinner strokes, as I feel the text in the first one might seem too big to others, though I think it is fine. After trying out, I still like the one shown in Fig 8.4 better. Despite not being satisfied with the outcome, I discovered an easier way to create the orange outlines by making another layer of text outline with transparent fill, and apply gaussian blur to it.

Font: ITC Garamond Std Bold Narrow Italic

Tools used:

- Gaussian Blur

- Eraser

Fig 8.6 Chosen Image 2, by Kasper Rasmussen on Unsplash (28.4.2022)

I chose this image because I like the texture of the window, I think it would be fun to try creating the similar texture of it.

Fig 8.7 Attempt in Photoshop (28.4.2022)

I cropped the image because I only need the window part. I tried to make it have a miserable kind of feeling.

Fig 8.8 Details (28.4.2022)

I made the edges of the text near the light source dark blue, like how the hand in the original image looks like. I am still not quite familiar with the liquify tool, so the texture of the window is not truly reflected in my text, but that is the most I can do now. I would probably need to look for other solution to make this better.

Fig 8.9 Attempt 2 (28.4.202)

Now looking at it, I suddenly realized that it looks really depressed. I think it reflected the mood that I planned to show at first. However, I still prefer the one in Fig 8.4.

Font: Univers LT Std Bold

Tools used:

- Perspective Warp

- Liquify

- Motion Blur

- Brush Tool

- Smudge Tool

Final Part 2: Type & Image

Fig 8.10 Final Type & Image - JPEG (28.4.2022)

Fig 8.11 Final Type & Image Before and After - JPEG (29.4.2022)

Fig 8.12 Final Type & Image - PDF (28.4.2022)

FEEDBACK

WEEK 2

General Feedback:

Generally the point size for the body text is at 8-12 pt. When dealing with numbers within a small amount of text, reduce the point size of the numbers by 0.5pt.

Specific Feedback:

Very good work on the axial, the hierarchy of the information is good. For the grid system, try moving the text at the bottom left to the right slightly, to align with the heading. Consider reducing the size of "lecture theater 12". Bilateral system is not bilateral but multilateral, but it is acceptable. The rest is good.

WEEK 3

General Feedback:

Make sure we find a reference before we start refining the letterforms. While extracting letterforms, we should not just extract the lines but the whole shape from the chosen image.

Specific Feedback:

The image that I have chosen is difficult to extract letterforms from it, as the lines are continuous and it will be a problem to retain the characteristic of it. What I can do is to refer to the lines and holes of the other parts of the image when refining the letterforms, to maintain the characteristics. My sketch seems fine, it does represent the subject and is consistent, I can continue working on it.

WEEK 4

General Feedback:

Be aware of the consistency of the strokes. For part 2 exercise, the text should integrate with the existing elements in the image.

Specific Feedback:

Nice work, good job. (Thank you! :D)

WEEK 5

General Feedback:

We can use different language (roman letters) for the text to match the chosen image (e.g. Italian background → Italian). Be more observant on how the objects interact with the surrounding, and apply that into the text. Manage time wisely.

Specific Feedback:

Mr Vinod said that attempt 1 is nice, it really looks like a real shadow. He noticed that I studied the edging of the actual shadows and applied it on the text, good job on this part. The blending at the bottom part of "fall" must be quite difficult, because the line seems to be quite prominent in the shadow. This is an excellent work. Make sure I have a before and after image in my blog. Mr Vinod likes attempt one better, compared to attempt 2. The third attempt is not as good as the first.

WEEK 7

Specific Feedback:

*Direct feedback in feedback sheet by Mr Vinod while marking

Ex 1& 2: Excellent right through! You will make a good graphic designer should you choose the specialization.

Eportfolio: Exemplary! (Thank you so much!)

REFLECTION

Experience:

Personally I found exercise 1 was a little difficult as the time was a quite short for me to produce 8 layouts that I am satisfied with. The good news is I think that I have some improvement in compositions compared to my first semester in Typography module. For exercise 2 part 1, I was quite upset at the beginning, because Mr Vinod doesn't seem quite sure about my choice of image (Declaration: I am open to critiques :D). Luckily I gained back my confidence after the lecturer agreed on my sketch, and I am motivated to continue the task. The most difficult part in Type & Image exercise is to look for a suitable image, which I had spent two or three days doing so. This exercise helped me to learn more about Photoshop, as I haven't used it for a while. I have also learnt some new functions about the software that I didn't know before.

Observations:

I found out that I tend to start working only if I have a clear visual in mind, which is quite troublesome when I am short in time. I think it is due to the fear of making mistakes. To solve this problem, I should have more courage and be more explorative. My emotions are easily affected by the feedback received, for now I am not sure if it's a good or a bad thing. I should always turn my positive or negative emotions into motivation, so that I can do better. I noticed that I am quite weak at the technical execution in Photoshop, as it is not the main software that I use frequently. What I can do to improve is to explore more about the tools in Photoshop and look for tutorials on YouTube.

Findings:

I realized that reading from books is a good way to help developing ideas. I have not only learnt from the words of the author, but also inspired by the images, which sometimes seem to be unrelated to what I am working on. Despite learning to sketch digitally since last semester, I found out that sketching on papers with a pencil is still my preferred medium.

Advanced Typography / Task 1: Exercises

Jump Links

WEEK 1

Advanced Typography: Typographic Systems

1. Axial System

2. Radial System

3. Dilatational System

4. Random System

5. Grid System

6. Transitional System

7. Modular System

8. Bilateral System

WEEK 2

Advanced Typography: Typographic Composition

Emphasis

The Rule of Thirds

Typographic Systems

Other models / Systems

Environmental Grid

Form and Movement (developed by Mr Vinod)

WEEK 3

Advanced Typography: Context and Creativity

Handwriting

Local Movements and Individuals

WEEK 4

Advanced Typography: Designing Type

General Process of Type Design

Typeface Construction

WEEK 5

Advanced Typography: Perception & Organization

Perception

Organization / Gestalt

Amendment

Final Exercise 1: Typographic System

Task 1: Exercise 2 - Type and Play

1. Chosen Subject

Letterform Extraction

2. Refinement

Final Part 1: Finding Type

Final Part 2: Type & Image

WEEK 2

WEEK 3

WEEK 4

WEEK 5

WEEK 7

Comments

Post a Comment

Popular posts from this blog