ADVANCED TYPOGRAPHY // TASK 01

March 31, 2022

ADVANCED TYPOGRAPHY // TASK 01

01.04.2022 - 29.04.2022 / Week 01 - 04
Rebecca Thoo Hui Ying / 0350359
Bachelor of Designs (Hons) in Creative Media
Advanced Typography: Task 01 (Exercise 01 & 02)

LECTURES

Week 01: 01.04.2022

(Youtube) AdTypo_1_Typographic Systems:

Advance Typography: Typographic Systems

* Important to note: Hireachy is VITAL in forming information, different sizes and weights helps to create emphasis

✧ Axial System: Elements to be organised to the LEFT or RIGHT of a SINGLE axis (line)

Fig 1.1 Axial system

✧ Radial System: Elements extended from a point of focus

Fig 1.2 Radial system

✧ Dilatational System: Elements expanded from a central point in a circular fashion

Fig 1.3 Dilatational system

✧ Random System: With no specific pattern or relationship

Fig 1.4 Random system

✧ Grid System: It is a system of vertical & horizontal divisions

Fig 1.5 Grid system

✧ Transitional System: An informal way of layered banding (segregation of information within certain bands, eg: headline will be in one band, subheadlines will b in one cluster)

Fig 1.6 Transitional system

✧ Modular System: the units have to be standardised, allowing text to move to different places within the units.

Fig 1.7 Modular system

✧ Bilateral System: elements arranged symmetrically on a SINGLE axis (used on formal events)

Fig 1.8 Bilateral system

(Youtube) AdTypo_2_Typographic Composition

Advanced Typography: Typographic Composition

Principles of Design Composition: ✧ Emphasis, isolation, repetition, symmetry & asymmetry, alignment, perspectives, rhythm & contrast

Fig 2.1 Emphasis

The Rule of Thirds:

✧ A photographic guide to composition. The intersecting lines are used as a guide to place the points of interest, within the given space.

Fig 2.2 Rule of Third

Grid System:

✧ Most used system is the Grid System (or Raster System) has the versatility of the system and its modular nature tends to allow an infinite number of adaptation.

Fig 2.3 Grid System

Environmental Grid:

✧ Is the exploration of an existing structure or numerous structures combined. An extraction of crucial lines, curved and straight are formed.

Fig 2.4 Environmental Grid

Form & Movement:

✧ A system based on existing grid systems to create movement.

Fig 2.5 Form & Movement

(Youtube) AdTypo_3_Context&Creativity

Advance Typography: Context & Creativity

✧ Evolution of the Latin Alphabet

Fig. 3.1 Evolution of the Latin Alphabet

Cuneiform:

✧ The earliest system of actual writing was used in a number of languages between the 34c, B.C.E. through the 1st century C.E.

✧ written from left to right

Fig. 3.2 Cuneiform

Hieroglyphics:

✧ As ideograms to represent the things they depict

✧ To show signs preceding are meant and to indicate the general idea of the world

✧ As phonograms to represent sounds that "spell out" individual words

Fig. 3.3 Hieroglyphics

Early Greek (5th C. B.C.E.):

✧ Built on Egyptian logo-consonantal system, the Phoenicians developed a phoneticalphabet consisting of 22 alphabets.

✧ Greeks often read from left to right, then switching from right to left - as the ox plows.

✧ All letters were formed based on how writing was written, there were no strokes and no serifs.

Fig. 3.4 Early Greek

Roman Uncials:

✧ By the 4th century Roman letters were becoming more rounded

✧ The curved form allowed for fewer strokes and could be written faster.

Fig. 3.5 Roman Uncials

English Half Uncials (8th C.):

✧(England) the uncial evolved into a more slanted and condensed form.

Fig. 3.6 English Half Uncials

Carolingian Minuscule:
✧ Capitals at the start of a sentence, spaces between words & punctuation
✧ Used for legal & literary works to unify communication between various regions
✧ The style became the pattern for HUmanistic writing of the 15th C - in turn was the basis of our lower-case roman type

Fig. 3.7 Carolingian Minuscule

Black Letter (12-15th C. CE):
✧ Gothic was the culminating artistic expression of the middle ages.
✧ Condensing line spacing and letter spacing reduced the number of costly materials in book production.

Fig. 3.8 Black Letter

Italian Renaissance:
✧ The Renaissance embrace of ancient Greek & Roman culture spurred a creative wave though Italian art, architecture, literature & letter form design - directed towards letterform - resulting in a more perfect or rationalised letter

Fig. 3.9 Italian Renaissance

Handwriting:

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

Fig. 3.10 "Indian" subcontinent the Indus Valley Civilization (IVC) script (3500-2000 BCE)

Fig. 3.11 The Brahmi script (450-350 BCE)

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

(Youtube) AdTypo_4_Designing Type

Advance Typography: Designing Type

Type Design Process:

1. Research

✧ Understand type history, anatomy & convetions (know about terminologies, side bearings, metrics, hinting)

✧ Determine type's purpose or what it will be used for

✧ Examine existing fonts that are presently being used for inspirations/reference

2. Sketching

✧ sketch traditionally and scan them for digitilisation or sketh digitally

3. Digitalization

✧ professional software that can be used: FontLab & Glyphs App or Adobe Illustrator

4. Testing

✧ The results of the testing & prototyping are parts of the process of refining and correcting aspects of the typeface

5. 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 so that the teething issues remain minor.

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.1 Construction grid for the Roman Capital using 8 x8 cells

✧ The 26 characters of the alphabet can be arranged into groups depending on their form and construction - whereby a distinction is made between a group for the capitals and a group for lowercase letters.

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

Fig. 4.2 Construction & considerations

(Youtube) AdTypo_5_PerceptionAndOrganisation

Advance Typography: Perception & Organisation

Contrast:

✧ Contrast is to create differentiation between information

Fig. 5.1 Contrast by Carl Dair

Fig. 5.2 Weight by Carl Dair

Fig. 5.3 & 5.4 Contrast/Form by Carl Dair

Fig. 5.5 Contrast/Structure by Carl Dair

Fig. 5.6 Contrast/Texture by Carl Dair

Fig. 5.6 Contrast/Direction by Carl Dair

Fig. 5.6 Contrast/Colour by Carl Dair

Fig. 5.6 Comparison between Carl Dair's 7 Typographical Contrasts (left) & Typographical Contrast by Rudi Ruegg (right)

Form:

✧ The interplay of meaning & form brings a balanced harmony both in terms of function & 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.

INSTRUCTIONS

<<iframe src="https://drive.google.com/file/d/1QzBC0LsTRqqBN0E7QK09lQ0lrGmslwRi/preview" width="640" height="480" allow="autoplay"></iframe>>

EXERCISE

Task 01: Exercise 01 Typographic Systems

✧ Create one design for each of the 8 systems

✧ Things to keep in mind:

✵ Jpeg / don use png ✵ 300 dpi ✵ 200 x 200 mm ✵ Pdf - Normal ✵ Pdf - Grid system (turn guide n grides on) ✵ Black & White + Any 1 colour

First Digitalisation (03.04.2022)

✧ Axial System:

Fig 2.1 Axial, attempt 1 (3 design layout options)

Fonts used:

✵ Serifa Std (75 Black)

✵ Futura (Condensed Medium)

✵ Futura PT (Demi & Book)

✵ Futura PT Cond (Medium)

✧ Radical System:

Fig 2.2 Radial, attempt 1 (2 design layout options)

Fonts used:

(LEFT)

✵ Gill Sans Std (Extra Bold, Light & Light Italic)

(RIGHT)

✵ Bembo (Extra Bold & Italic)

✵ Bodni 72 (Book)

✵ Bodni Std (Bold & Italic)

✧ Dilatational System:

Fig 2.3 Dilatational, attempt 1 (2 design layout options)

Fonts used:

✵ Janson Text LT Std (75 Bold, 75 Bold Italic, 56 Italic)

✵ ITC Garamond Std (bold narrow, light narrow, ultra narrow, book narrow, book narrow italic)

✧ Grid System:

Fig 2.4 Grid, attempt 1 (2 design layout options)

Fonts used:

✵ Gill Sans (Bold)

✵ Gill Sans Std (Extra Bold, Light)

✵ Futura PT Cond (Extra Bold Oblique)

✵ Univers LT Std (55 Roman)

✧ Random System:

Fig 2.5 Random, attempt 1 (2 design layout options)

Fonts used:

✵ All 10 typeface

✧ Transitional System:

Fig 2.6

Fonts used:

(LEFT)

✵ Futura PT Cond (Bold, Book, Medium, Medium Oblique)

✵ Gill Sans (Semibold, Regular, Light, Bold Italic, Semibold Italic)

(RIGHT)

✵ Univers LT Std (67 Bold Condensed)

✵ Futura PT Cond (Bold, Book, Medium, Medium Oblique)

✵ Gill Sans (Semibold, Regular, Light)

✧ Modular System:

Fig 2.7 Modular, attempt 1 (2 design layout options)

Fonts used:

(LEFT)

✵ ITC Garamond Std (Book Narrow, Bold Condensed Italic)

✵ Univers LT Std (67 Bold Condensed, 55 Roman, 75 Black)

(RIGHT)

✵ Futura (Bold)

✵ Univers LT Std (55 Roman, 75 Black)

✧ Bilateral System:

Fig 2.8 Bilateral, attempt 1 (2 design layout options)

Fonts used:

✵ Adobe Caslon Pro (Italic, Bold Italic, Semibold)
✵ ITC Garamond Std (Light Narrow Italic, Bold)

✵ Univers LT Std (55 Roman)

Amended Versions (08.04.2022)

✧ Amended the Dilatational System as per Mr Vinod's suggestion.

Fig 3.1 Amended Dilatational (before & after)

Final Task 01: Typographic Systems (09.04.2022)

Fig 4.1 Axial System, Final JPEG

Fig 4.2 Radial System, Final JPEG

Fig 4.3 Dilatational System, Final JPEG

Fig 4.4 Grid System, Final JPEG

Fig 4.5 Random System, Final JPEG

Fig 4.6 Transitional System, Final JPEG

Fig 4.7 Modular System, Final JPEG

Fig 4.8 Bilateral System, Final JPEG

Fig 4.9 The 8 Typographic Systems, Final PDF

Fig 4.10 The 8 Typographic Systems, Final PDF with Grids & Guides

Task 01: Exercise 02 Type & Play

Part 01: Finding Type

✧ We are tasked to analyse, dissect & identify potential letterforms within the directed image. (4 letters only)

✧ Choose a reference typeface

Subjects & Word Extractions (08.04.2022)

✧ Chosen Images side by side with letterform dissection

✧ The images were taken by me. I've chosen nature (plants) as my subject matter as it does not have a straight and fixed form. After I was brief of the task, I went down to my garden, I stood and observed the plants to identify potential letterforms.

✧ I inserted the images into Illustrator & used the Pen tool to trace and extracted the letters.

✧ Below are my findings.

*I've decided to not extract these letters as it is very similar to #1. But am keeping this here as my progression.

Fig 5.1 Image & Identified letterforms #0

Fig 5.2 Image & Identified letterforms #1
Fig 5.3 Extracted letters #1 (Final 4 letters: W, A, Y, V)

Fig 5.4 Image & Identified letterforms #2

Fig 5.5 Extracted letters #2 (A, B, C, D, E, F, U)

First Digitalisation (11.04.2022)

✧ I've decided to progress with Image #2 (Fig 5.4) as it has a very unique shape to it.

Fig 6.1 Referenced typeface

✧ My reference for this task is Futura-medium. I'd like to see how i can manipulate the "E" & "F" to have the characteristic of the monstera plant.

Fig 6.2 Type progression by referencing Futura - medium

✧ Taking sir's suggestion to add characteristics in the type, i first started working on the letter "F". Sir mentioned to take away the point parts as it might be too sharp and does not really suit the type. I utilised the uniqueness of the curves in (Fig 5.7)'s third "F" and went on with recreating the shape to fit to the type by referencing futura. However, i did not like the end results, it looks like a font inspired by Cheese rather than one that was inspired by a plant.
Second Attempt Digitalisation (18.04.2022)
Fig 7.1 Highlighting the key features of the subject

✧ The first thing i did while restarting this task was to go back to the subject and circled out its key features to help me get a better art direction for the type. The characteristics are asymmetrical circle shape & pointy edges. Keeping in mind of how the pointy edges can change the font, i tried my best to smooth it out.
Fig 7.2 Typeface reference: ITC Garamond Std

✧ I really like the serif arm in the typeface's letters "B" & "D". It is a reference for me to turn the straight pointy edges to a flatter edge.

Fig 7.2 Comparison between previous attempts
(grey words: attempt #2 // blue line: attempt #3)

✧ I've made slight adjustments to try and straighten the extracted letters in attempt #2. I introduced a less slanted form to all the letters, as shown in the blue lines (attempt #3)

Fig 7.3 Characteristics of subject

Fig 7.4 Attempt #4

✧ The plant does not have a rigid & fixed shape, I've searched up images of the plant for further analysis. In Fig 7.3, the gap between the openings are sometimes thick like my original subject image or it can be thin like Fig 7.3. This gave me an idea to incorporate the characteristic in Attempt #4.

Fig 7.5 Attempt #5

✧ I've made changes to the top part so that aligns to the cap line.
Adjustments to Type (22.04.2022)

✧ One feedback later~ typeface needs more consistency.

Fig 8.1 Attempt #6

✧ I used grids to help with making sure I achieve type consistency.

Fig 8.2 Comparison between attempt #5 & attempt #6

(grey words: attempt #5 // blue line: attempt #6)

Fig 8.3 Consistency check

Final Part 01: Finding Type (22.04.2022)

Fig 9.1 Subject & letter extraction
Fig 9.2 Compilation of type progressions
Fig 9.3 Comparison between original extracted letter and final refined letters
Fig 9.4 Final type design

Fig 9.5 Final type design (outlined)

Fig 9.6 Final type design display

Part 02: Type & Image

✧ This task requires us to combine visual with letters/ phrase of our choosing to enhance the visual. I went on Pinterest to search for potential pictures I could use for the task. (unconsciously, I went with a darker theme for this task)

First Digitalisation (18.04.2022)

Fig 10.1 Selected image from Pinterest & Fig 10.2 Design #1 outcome

✧The element i could play with in this image is the fire. I incorporated the word "BURN" to make it look seamless, as if the word was in the image all this while.

Fonts used:

✵ Baskerville (SemiBoldItalic)

Fig 10.3 Selected image from Pinterest & Fig 10.4 Design #2 outcome

✧ I really like this image, the hand movement was what I could use to insert the letters in. I went with the phrase "SAVE ME" as it pretty much conveys how the character is holding on life, the "SAVE" acts as a rope, while the "me" was placed as if it is also disappearing into the water.

Fonts used:

✵ Janson Text LT Std (56 Italic)

✵ ITC Garamond Std (Light Italic)

Second Attempt (22.04.2022)

✧ While in class, Sir reviewed the 2 designs (feedbacks are written down below). I decided to do a new one on the spot to see if i am on the right track.

Fig 11.1 Selected image from Pinterest & Fig 11.2 Design #3 outcome

✧ I found another picture and something about the mirror, the composition and the character's facial expression screams that she's being "haunted". I incorporated the words "Who's There?" & "stop haunting me" in the image. I also colour graded the image to give it more of the horror vibes.

Fonts used:

✵ Univers LT Std (67 Bold Condensed)

✵ Janson Text LT Std (55 Roman)

Third Attempt (22.04.2022)

✧ Third time's a charm, aye? I restarted the task once again.

Fig 12.1 Selected image from Pinterest & Fig 12.2 Design #4 outcome

✧ I inserted the words "SHATTER" in this image. I placed the same image on top of the letter, I used 2 layers: overlay & screen for the effect. I erased the solid words with a blur brush to create the hollow feel of the letters.

Fonts used:

✵ Univers LT Std (67 Bold Condensed)

Fig 12.3 Selected image from Pinterest & Fig 12.4 Design #4 outcome

✧ I'd like to play with perspective for this image. I colour graded the image to be black and white so the words and vehicles could stand out.

Fonts used:

✵ Univers LT Std (67 Bold Condensed)

Fourth Attempt (00.04.2022)

✧ After some thought, i decided to take back the first image (#1 design) and readjusted the wording so it is more visible. I mainly used the Liquified tool to blur the edges to look like they are burning.

Fig 13.1 Progression - Liquidfy

✧ Sir mentioned i could add more cracks for (#4 design). I used the laso tool to create the cracks and added bevel & emboss to create a more 3d effect.

Fig 13.2 Progression - Bevel & Emboss

Final Submission (29.04.2022)

#1 Design

Fig 14.1 #1 "Burn" Design Final JPEG

Fig 14.2 #1 "Burn" Design Final PDF
#4 Design
Fig 14.3 #4 "Shatter" Design Final JPEG

Fig 14.4 #4 "Shatter" Design Final PDF

FEEDBACK

Week 02: 08.04.2022

General Feedback:

✧ Task has to be done in InDesign, if want to, only random system & minor graphical elements can be done in Illustrator.

✧ Text format is vital.

Lecturer's Feedback:

Fig 1.1 Feedback from sir via zoom

✧ According to Sir, the Random system layout looks great, (Fig2.5, left design) textures and layers are seen in the design. Sir complimented the following system designs: Transitional (Fig 2.6, 1st 2 designs), Modular (Fig 2.7, 1st design), either designs work for Bilateral system, Sir was not able to choose one for the Grid system 😂, Radial system looks good (Sir mentioned they look good together as a pair). Axial system (Fig 2.1, right design) is a bit too diagonal, it will look better if I've reduced the angle. Overall excellent work.

✧ Dilatational system, however, there's spacing on (Fig 2.2, left design), it also looks awkward on (Fig 2.2, right design). Sir suggested to insert another line of text to make it more balanced and without awkward spacing.

Week 03: 15.04.2022

General Feedback:

✧ Less recommended to use graphical images as the source for letter extraction

✧ When refining, use a reference for it and look for characteristics of the extraction

Lecturer's Feedback:

✧ The extraction of letters are cool. The one on the left will b easier to work with, for the right understand the anatomy of the plant (understand the texture) to add-in for its character

Fig 2.1 Feedback from sir via zoom

✧ Whilst in class, I consulted sir about the chosen text (Fig _) as i was unsure about it's overall design. I did not want to stray away from the characteristics of the plant but it also made my text look weird. ✧ Sir suggested looking at the chosen letterform, what core characteristic to maintain in the form. Remove the pointy top, introduce a minor curve, introduce the characteristic shape to fit into the type, add some flare to the text, the leaf is not a very straight thingy so it needs to look more fluid and bent. once the feature was decided it can be repeated for other letters. shapes can be simplified and used.

Week 04: 22.04.2022

Lecturer's Feedback:

Fig 3.1 Suggestions from sir via zoom

✧ Develop more consistency, mimic the strokes in "E" or alternatively reduce the thickness. Sir likes the thickness of the letter" E"

✧ [Type & Play, exercise 02] #1: burn: Make the wording more legible. The shape of the letterform has lost its integrity, this might be too much. Try doing it with similar style but maintaining the letters.

✧ [Type & Play, exercise 02] #2: save me: What I have done was imposing the element rather than intergrading with the existing image. Use the elements present and use letterforms to replicate the existing force or texture or motions. For this image's case, the elements shown here are the bokehs & the bubbles, might need to think of a way of inserting the text into the elements.

REFLECTIONS

Experience

I could say Exercise 1 was the task I favor the most. After understanding each systems and identifying their differences, I was able to create the layouts accordingly. Originally I struggled especially with Random system as there were no rules for it, I've deleted a lot of attempts because i was unsatisfied with it. But i overcame it after taking some time off the task. Personally, I'd like to thank kpop music, for without me blasting those songs I don't think i would have the motivation to come up with a random system that I like. The finding type exercise was an interesting task, I went about the garden searching high and low for would be items that i could transform into a type for the task. I had a lot of issues connecting with the last task. I expressed too much of the text that it became too distorted. This task's outcome is not my best work but it will be a work that I will keep in mind as so to improve better in the future.

Observations

It is vital for me to really observe and understand the basics for the typograhic systems, because if not, I would have gone into the task with confusion. Exercise 1 also tests our ability to judge if the artwork is balanced or not, alignments are key to this task as well. Exercise 2, I had to observe how the leaves look like and also keeping in mind that the type needs to be symetrical. The final task was to integrate the text with the image, I realised too late in the game that choosing the image first before thinking about the text is a not so good approach to the task.

Findings

When I was introduced to the typographic systems, I thought it would be hard for me to express it creatively, but it was the opposite. The systems create a guide that I could stick with and create designs based on that. I learnt that sticking to the task is not as hard as I thought, adaptability is key not only in this task but in life as well. For exercise 2, it is key to always remember to double-check the character's width to create a symmetrical and consistent typeface.

Search This Blog

Thoo Hui Ying ✧ Rebecca (0350359)

ADVANCED TYPOGRAPHY // TASK 01

Comments

Post a Comment

Popular Posts

Professional Development Week

ADVANCED INTERACTIVE DESIGN // FINAL TASK