Advanced Typography - Exercises

2/4/19 - 30/04/19 (Week 1 to Week 5)
Jasmine Teoh Lee Suan (0331993)
Advanced Typography
Exercises

---

Instructions

Module Information Booklet:

---

Lecture Notes:

Week 1 (2/4/19)

On our first class of Advanced Typography, Mr Vinod gave us a brief on what this module was all about. We were shown the MIB and went through the projects and assignments real quick. We were also advised to borrow books about typography recommended in the MIB, from the library and write reviews on them. For the final project, we had to find a problem to solve, and there was an example of a student making a design pancake mold to teach children the alphabet easier.

We were also told that we had to do presentations for this class, like what we did for flip classroom in the previous semester. Our group's first topic was Radial and Dilational, and we had to present on it.

We also got some tips from our lecturers on how to work well:

• Good thinking and good execution communication is important how memorable is that message conceptual, emotionally charged, shocking, logical, intellectually appealing.
• Analyze, decipher, synthesize
• Original - comes from looking within, seeing things that others don't see right away students don't usually create original work because they're too influenced with western work
• Try to find the reason to put it there
• The moment you start using local content, it becomes one of a million
• Originality comes within you, look at yourself and what you associate yourself with, or your culture Things that you find tacky, what your grandma used to do, unique
• Concept plays a little more of a role
• Be less scared of us and louder of your questions
• Fear is your biggest obstacle, you should never have it, its poison
• We also talked about feedback the lecturers received last sem
• And design research methodology that relates with dissertation
• Your work has to stand out, planning is important
• Research is something pertaining to something that's not talked about a lot
• You should publish your work
• Look at competitions

Week 2 (9/4/19)

Typographic Systems:

Here's the compilation of slides that our class made for the presentation of this lecture.


I also took down some notes during the presentation so that I could understand it better:

1. Bilateral

• Vertical and horizontal space
• Non objective elements - provide emphasis and balance

2. Modular

• Designing with a standardized unit
• To hold your text and information and segregate it
• Example: Circles and rectangles - separated into different parts
• As work progresses modules combine with each other

3. Random

• Arranged without definite aim, pattern , direction, rule, method or purpose
• Express the text
• Doesn't strictly have to adhere to different subsets

4. Radial

• Like a sun, the words come out from a focal point
• Readability might be harder

5. Dilational

• Points in a circular fashion
• Uses typesets along a circular path

6. Grid

• Grid is an aid not guarantee
• Use the grid to compose designs
• How you use the grid needs good math skills
• Fibonacci sequence: 0+1=1 1+1=2 2+1=3
• Golden section - cannot be composed in a square
• Grid system: can relate with the web design
• Overall grid structure
• Baseline grid - calculation must be equal to leading space - lines will be in line with each other
• Modular grid - gridded so that you can lump them tgt or move around = already gridded

7. Axial

• Can exist anywhere to create symmetry or asymmetry arrangement
• Angle the axis to attract the eye visually
• Initial phase - line spacing and line breaks
• Intermediate - focus on negative space
• Advanced - add shapes and lines
• Narrow column - short line lengths - more flexible
• Wide column width - longer line lengths - less flexible
• Horizontal movement Vertical movement
• Explicit shaped axis: uncommon arrangement - use not objective elements
• Implied shape axis: create a zig zag effect

8. Transitional

• Movement
• Direction
• Non objective elements
• Create movement in text
• Different from random because random doesn't have movement, direction

** make a person smile in their mind, it has to mean something

Week 3 (16/4/19)

InDesign Refresh Lecture:

1. Format your words first

• Ctrl + alt + i to see the formats
• There will be paragraph spacings where you don't want paragraph spaces

2. Don't separate all your text into different text boxes

• Use leading and kerning and paragraph spacing
• 4pt size

3. Cross alignment

• If you have a leading of 38 you should have paragraph spacing of 38
• Or it can be multiples of the same to maintain cross alignment

4. Grids are guidelines for you to arrange your stuff

5. Categorize the information

6. Use size and SPACE for hierarchy, give the information its own spac

7. Master page

• Anything you place there will appear on other pages as well
• Like the border thing
• 10mm margin - 5mm
• Rows: layout -> create guide -> rows and column

Exercise 2 Brief:

• Find suitable subject matter!! 
• If you're unsure, shoot 2 or 3 different ones.
• Take pictures of stuff around you
• Dissect a part of it into letterforms
• Identify four to five crude shapes that define letterforms
• Refining process: Introduction of flat lines
• Characteristics of the (building) must be present in the characters

BLOG:

• when youre updating, do the process and explain

Presentation:

• 5 slides (not counting pics)
• Must add pics

Week 4 (23/4/19)

Here's the slides that our classmates made for the presentation of this lecture.


I also took down some notes during the presentation so that I could understand it better:

1. History of Roman Alphabet

• Latin Alphabet: The Roman Writing System
• Often a religious significance to know how to read and write

2. The Codex

• 1st & 5th Century, papyrus parchment started to spread
• Punctuation didn't exist at this time
• Breaks were marked by taking a new line

3. Arrival of Lowercase

• Miniscule and Magiscule
• Greeks made writing system left to right around 700BC.
• 5 vowel letters AEIOU - Phoenician alphabet

4. Standardization

• No spaces between words
• No punctuations
• No lower case letter
• No concept of paragraphs

5. Old & New roman cursive

• Uncial - developed and adapted through writing
• Ascender and descender were introduced
• Still no upper lower case

6. Carolingan Minuscule

• Introduced the lower cases
• Developed in AD789 by a monk

7. The Printing Press and and Modern Evolution

• Actual one was invented in china but it failed bcs of their characters
• Perfected in korea 
• They ditched china characters and made hangul 
• Used bronze to carve letters from 
• Then Gutenberg came along

8. Since the advent of computer science, all alphabets are now manipulated by computers:

• Sanskrit
• Chinese Characters
• European languages
• Arabic language

---

Exercises:

Week 1 (2/4/19)

Exercise 1: Typographic Systems

Requirements and guidelines:

• 200 x 200 In design
• Determine how you wanna create hierarchy
• Placed in size or
• Can use one colour + black
• Be a bit strong (the colour)
• Dont wanna lose importance to each element
• Sketch it out first

Information that we need to include:

The Design School,

Taylor’s University

The Troublemakers Manifesto: A Design Colloquium

Open Public Lectures:

November 24, 2019

Lew Pik Svonn, 9AM-10AM

Ezrena Mohd., 10AM-11AM

Suzy Sulaiman, 11AM-12PM

November 25, 2019

Dr. Clarissa Ai Ling Li, 9AM-10AM

Professor John Sabraw, 10AM-11AM

Dr. Liyanna Khairuddin, 11AM-12PM

Lecture Theatre 12

Sketches:

Figure 1.1 Axial and Radial Sketches

Figure 1.2 Dilational and Random Sketches

Figure 1.3 Grid and Transitional Sketches

Figure 1.4 Modular and Bilateral Sketches

Week 2 (9/4/19)

InDesign Refresh:

• Start new document
• Use mm
• Can change columns
• Can change margins
• Slugs - information area for the printer
• Bleed - sometimes the design will go out of the designated area after printing

Some tips:

• If you want rows, you can select the pages you want the rows and go to create guides, rows, margins and press ok
• Increase leading - alt down / up
• Increase kerning - alt right / left
• You can cut pen tool with scissors

Exercise tips:

• Best to stay consistent with same font
• First design in black and white, then when you think the final is good enough add colour
• Use one colour only, strategically, same as size
• Add objective elements only at the end, minimal

I started off with the initial designs after reading about typographic systems:

Figure 2.1 Axial System Attempt 1

Figure 2.2 Axial System Attempt 1

Figure 2.3 Radial System Attempt 1

Figure 2.4 Radial System Attempt 1

Figure 2.5 Dilational System Attempt 1

Figure 2.6 Dilational System Attempt 1

Figure 2.7 Random System Attempt 1

Figure 2.8 Random System Attempt 1

Figure 2.9 Grid System Attempt 1

Figure 2.10 Grid System Attempt 1

Figure 2.11 Transitional System Attempt 1

Figure 2.12 Transitional System Attempt 1

Figure 2.13 Modular System Attempt 1

Figure 2.14 Modular System Attempt 1

Figure 2.15 Bilateral System Attempt 1

Figure 2.16 Bilateral System Attempt 1

Figure 2.17 Typographic System Spreads Attempt 1

Figure 2.18 Typographic System Spreads Attempt 1

1st Attempt PDF Compilation:



Week 3 (16/4/19)

After getting feedback, I decided to revise my designs.

Figure 3.1 Axial System Attempt 2

Figure 3.2 Axial System Attempt 2

Figure 3.3 Radial System Attempt 2

Figure 3.4 Radial System Attempt 2

Figure 3.5 Dilational System Attempt 2

Figure 3.6 Dilational System Attempt 2

Figure 3.7 Random System Attempt 2

Figure 3.8 Random System Attempt 2

Figure 3.9 Grid System Attempt 2

Figure 3.10 Grid System Attempt 2

Figure 3.11 Transitional System Attempt 2

Figure 3.12 Transitional System Attempt 2

Figure 3.13 Modular System Attempt 2

Figure 3.14 Modular System Attempt 2

Figure 3.15 Bilateral System Attempt 2

Figure 3.16 Bilateral System Attempt 2

Figure 3.17 Typographic System Spreads Attempt 2

Figure 3.18 Typographic System Spreads Attempt 2

2nd Attempt PDF Compilation:



Final Attempt: I tweaked the designs a little after finalizing the layout. 

Figure 4.1 Axial System Final Attempt

Figure 4.2 Axial System Final Attempt

Figure 4.3 Radial System Final Attempt

Figure 4.4 Radial System Final Attempt

Figure 4.5 Dilational System Final Attempt

Figure 4.6 Dilational System Final Attempt

Figure 4.7 Random System Final Attempt

Figure 4.8 Random System Final Attempt

Figure 4.9 Grid System Final Attempt

Figure 4.10 Grid System Final Attempt

Figure 4.11 Transitional System Final Attempt

Figure 4.12 Transitional System Final Attempt

Figure 4.13 Modular System Final Attempt

Figure 4.14 Modular System Final Attempt

Figure 4.15 Bilateral System Final Attempt

Figure 4.16 Bilateral System Final Attempt

Figure 4.17 Typographic System Spreads Final Attempt

Figure 4.18 Typographic System Spreads Final Attempt

Final Attempt PDF Compilation:



##UPDATE: I worked on the typographic systems again after realizing that 'The Troublemakers Manifesto' should be on a higher hierarchy than the 'A Design Colloquium'. Here are my updated designs:

Figure 4.19 Axial System Updated Final Attempt

Figure 4.20 Axial System Updated Final Attempt

Figure 4.21 Radial System Updated Final Attempt

Figure 4.22 Radial System Updated Final Attempt

Figure 4.23 Dilational System Updated Final Attempt

Figure 4.24 Dilational System Updated Final Attempt

Figure 4.25 Random System Updated Final Attempt

Figure 4.26 Random System Updated Final Attempt

Figure 4.27 Grid System Updated Final Attempt

Figure 4.28 Grid System Updated Final Attempt

Figure 4.29 Transitional System Updated Final Attempt

Figure 4.30 Transitional System Updated Final Attempt

Figure 4.31 Modular System Updated Final Attempt

Figure 4.32 Modular System Updated Final Attempt

Figure 4.33 Bilateral System Updated Final Attempt

Figure 4.34 Bilateral System Updated Final Attempt

Figure 4.35 Typographic System Spreads Updated Final Attempt

Figure 4.36 Typographic System Spreads Updated Final Attempt

Updated Final Attempt PDF Compilation:


Week 4 (23/4/19)

Exercise 2: Play with Type (Part 1)

We were to dissect and refine a font from objects around us. I took this week to observe carefully on what could be dissected into a type and here are my initial ideas for it.

Initial Ideas: Tiled floor and Maggi Mee

Figure 5.1 Tiled Floor 200x200mm

Figure 5.2 Maggi Mee Original Image

I chose maggi mee in the end because I thought it would be more fun to find and create fonts from the noodle shapes.

Figure 5.3 Edited and Cropped Image

Outlining process:

Figure 5.4 Outlining Process

Figure 5.5 Outlined Image

Figure 5.6 Outlines / Dissected Areas

I then dissected possible typeforms from the outlined image.

Figure 5.7 Process of finding potential letterforms

Figure 5.8 Letterform P in Dissected Outline

Figure 5.9 Letterform P on its own

Figure 5.10 Letterform U in Dissected Outline

Figure 5.11 Letterform U on its own

Figure 5.12 Letterform M in Dissected Outline

Figure 5.13 Letterform M on its own

Figure 5.14 Letterform T in Dissected Outline

Figure 5.15 Letterform T on its own

Figure 5.16 Letterform V in Dissected Outline

Figure 5.17 Letterform V on its own

Comparison:

Figure 5.18 Comparison

I started refining the typeforms in Adobe Illustrator, turning them into more practical typeforms as I refine them, but still being careful not to discard the originality and essence of the type.

First Refinement:

Figure 6.1 Refined Letter 'P' - First Refinement

Figure 6.2 Refined Letter 'U' - First Refinement

Figure 6.3 Refined Letter 'M' - First Refinement

Figure 6.4 Refined Letter 'T' - First Refinement

Figure 6.5 Refined Letter 'V' - First Refinement

Comparison:

Figure 6.6 Comparison of Initial Extracted Letterforms and First Refinement

Second Refining:

Figure 7.1 Refined Letter 'P' - Second Refinement

Figure 7.2 Refined Letter 'U' - Second Refinement

Figure 7.3 Refined Letter 'M' - Second Refinement

Figure 7.4 Refined Letter 'T' - Second Refinement

Figure 7.5 Refined Letter 'V' - Second Refinement

Comparison:

Figure 7.6 Comparison between First Refinement and Second Refinement

Third Refining:

Figure 8.1 Refined Letter 'P' - Third Refinement

Figure 8.2 Refined Letter 'U' - Third Refinement

Figure 8.3 Refined Letter 'M' - Third Refinement

Figure 8.4 Refined Letter 'T' - Third Refinement

Figure 8.5 Refined Letter 'V' - Third Refinement

Comparison:

Figure 8.6 Comparison between Second Refinement and Third Refinement

Fourth Refining:

Figure 9.1 Refined Letter 'P' - Fourth Refinement

Figure 9.2 Refined Letter 'U' - Fourth Refinement

Figure 9.3 Refined Letter 'M' - Fourth Refinement

Figure 9.4 Refined Letter 'T' - Fourth Refinement

Figure 9.5 Refined Letter 'V' - Fourth Refinement

Comparison:

Figure 9.6 Comparison between Third Refinement and Fourth Refinement

 Fifth Refinement:

Figure 10.1 Refined Letter 'P' - Fifth Refinement

Figure 10.2 Refined Letter 'U' - Fifth Refinement

Figure 10.3 Refined Letter 'M' - Fifth Refinement

Figure 10.4 Refined Letter 'T' - Fifth Refinement

Figure 10.5 Refined Letter 'V' - Fifth Refinement

Comparison:

Figure 10.6 Comparison between Fourth Refinement and Fifth Refinement

Final PDF of Letterforms:


Here's the process of refining my letterforms in Adobe Illustrator.

Figure 11.1 Refining Process in Adobe Illustrator

Figure 11.2 Refining Process in Adobe Illustrator

Here's the process that my refined typeface went through, with small descriptions beside it:

Figure 11.3 Refinement in Adobe Illustrator

Figure 11.4 Refinement in Adobe Illustrator

Figure 11.5 Refinement in Adobe Illustrator

After feedback, I made adjustments to the typeface and concluded my design here.

Adjustments:

Figure 11.6 Refined Letter 'P' - Sixth Refinement

Figure 11.7 Refined Letter 'U' - Sixth Refinement

Figure 11.8 Refined Letter 'M' - Sixth Refinement

Figure 11.9 Refined Letter 'T' - Sixth Refinement

Figure 11.10 Refined Letter 'V' - Sixth Refinement

Final Adjustment Refinement PDF:


Exercise 2: Play with Type (Part 2)

We were to browse for images and quotes and combine them together by having interplay between the type and the elements in the images.

I attempted on a few different subjects and these are the results of it:

Figure 12.1 First Variation First Attempt

Figure 12.2 Second Variation First Attempt

Figure 12.2 Second Variation Second Attempt

Here are the processes I went through while completing this exercise:

Figure 12.3 Process of Second Variation

I worked on more subjects and here's my progress:

Figure 12.4 Third Variation First Attempt

Figure 12.5 Third Variation Second Attempt

Figure 12.6 Third Variation Third Attempt

My lecturers liked this one especially and told me to have more interplay and I would be good to go:

Figure 12.7 Third Variation Fourth Attempt

Figure 12.8 Process of Third Variation

Figure 12.9 Process of Third Variation

Figure 12.10 Fourth Variation First Attempt

##UPDATE (Week 13):

I had some time to work on this exercise, and worked on the attempt in Figure 12.7 based on the feedback the lecturers gave me.

Figure 12.10 Final Type and Play Design

---

Feedback:

Week 2:
General feedback: Mr Vinod gave the whole class feedback on our presentations and said that we did well in presenting. He reminded us that eye contact is important and we should have more questions as both presenter and listener. As for our slides, we were advised to represent points with a visual and not to run the text from one end of the slide to the other end (55-60 charas in one sentence preferably). We should also present the names of our group members at the start of the slides. As for our Typographic Systems exercise, we were reminded that visual and informational hierarchy is important, and to use the 9 typefaces given in Sem 1. Also, we should work on the layout and composition first before injecting colour and adding non-objective elements into our designs.

Specific Feedback: Mr Vinod commented on my sketches and said they were neat and organized. He looked at the designs and said that I've got it all down, all I have to do is to digitize them. He asked if it was possible for the axial system to have two axes, which got me thinking more. Mr Shamsul also commented on one of my axial system sketches and said there might be too much space on one side.

Week 3:
General feedback: When we're updating for the blog, we should put in the process and explanations. As for the presentation, we should have 5 slides, with visual aid. On typographic systems, it's fine if our design works without colour or non-objective elements.

Specific feedback: Mr Vinod gave individual feedback to each of my typographic system designs. He advised me to edit the leading for the paragraph of text and adjust the font size of the time so that it will look better. For my axial system, the lines of text might have been too long. The radial system was good. The dilational system, where I used a part of the circle is totally fine and interesting, but the ending of the text was a little warped so he advised me to work on that. As for random systems, the second one was arranged awkwardly with weird spaces between the information. For grid system, he commented that he could see the grids, and they're doable, but it would be good if the words were almost aligned together at the right side as well. He said that the second transitional was a no, and for the bilateral system, I should take away the non-objective elements if not needed. As for modular system, he said that my first one is a bit loose while the second one is okay, and that modular system should be able to move the information around.

Week 4:
General Feedback: After our assessment and consultation of the exercise that we were supposed to submit, Mr Vinod reiterated the meaning of modular system to the whole class as many people still couldn't grasp the idea of a modular system. He stated that the information in each grid should be able to be moved to another grid, which would be in equal sizes, which is why it was called modular.

Specific feedback: I presented my printed thumbnails to Mr Vinod and he said that my axial, radial, dilational, transitional and bilateral were good, he was looking at my second random piece and he was thinking about saying something but in the end he said that it was okay. As for the grid system, the first piece needed a bit of adjustment with the size of the 'The Design School' text, whereas the second one was okay. When he saw my supposedly modular systems, he said that they looked really good BUT weren't modular, which then he explained to me thoroughly on what the modular system was (as how he explained it to the whole class afterwards) and I think I finally understood the modular system after this feedback session. Also, Mr Shamsul said that my blog was complete and that I had everything on there.

Week 5:
General Feedback: Discard characteristics along the way of refinement. How do you know how much you need to refine until? Refer to an existing typeface letter. Your design should be somewhere between functional and decorative, the point is where you stop at which is up to your own sensibilities and the lecturers' feedback.

Specific feedback: Mr Shamsul looked at my progress and said that I had good refinement, and to keep going and that I was almost there already. He suggested me to lessen the squiggly parts. I showed my refinement to Mr Vinod as well and he told me to make the letterforms less wavy, subtle waviness create my letters with strokes quickly.

---

Reflections:

Experience:
Week 1: I felt happy to be back to class again, as I was lazing in my house for a whole month. I feel like the first week of class is for us to adapt to the post holiday situation, where we learn all about the module outlines.
Week 2: I experienced sleeping late again for the first time in awhile as I was doing my work till late at night. I miss this feeling. I also felt that I needed to remind myself of the deadlines. I made a list of all my tasks for a more organized work life.
Week 3: I felt unsatisfied with my first attempt of typographic systems and made changes to it after getting feedback from my lecturer. I also experienced problems in converting my InDesign file into PDF format and had to ask my friend for help.
Week 4: I felt hungry because I didn't take a break for the whole 6 hours of class and I didn't have breakfast before class either, but that was only after I finished my work because I was quite immersed in it.
Week 5: I felt partially satisfied because I worked on my refining process more than I should have, and could show my progress to my lecturers. I also felt dumbfounded as I realized that I could use the stroke instead of fill to create and mend my letterforms.

Observations:
Week 1: I observed that the class had new students and that there were returning students as well.
Week 2: I noticed that everyone in class had rather soft voices, but when they were presenting they did really well at making their voice louder so that the others could hear and understand.
Week 3: I went around the class during break time and observed my friends' work. Some of them had really good work that was already completed and that motivated me to do my work faster and better.
Week 4: I observed that today's presentation was more than 5 slides, which was the agreed number of slides for each presentation.
Week 5: I noticed that I am really indecisive and it took me a long time to choose a subject to work on for my type and play part 2.

Findings: 
Week 1: I found that I have to get out of my holiday mood and start working systematically again or else I would be repeating what I did in the first semester, aka last minute work.
Week 2: I realized that I still needed to refer to the slides while presenting, even though I prepared earlier. I also forgot some of the InDesign shortcuts so I needed to refresh myself with it.
Week 3: I found that I work well in the library as the air conditioner is too cold for me to sleep (hahaha). I also realized that reading more and referencing while learning about the values in a design helps my brain expand more in terms of creativity.
Week 4: I finally understood that the modular system worked as a grid, it should have the same sized grids and that the information could be moved to each grid when needed.
Week 5: I realized that I worked on too many subjects instead of working on a few, quality over quantity is valued here.

---

 Further Reading:

1. Seven Essential Typography Layout Systems by Lucas Czarnecki Type 365 - Week 1

This pdf talks about the 7 typography layout systems, excluding the random system. I started drawing my sketches on week 1, therefore this pdf was very helpful to me as it shows the way the author sketches his work before converting it to digital mode.



2. Type Two: Typographic Systems - Week 2

This pdf contains examples of posters that use the typographic systems. The book describes the main features of each typographic system, with explanations of it. I used this book as reference while creating my typographic system designs. I thought that it was very useful to me, while also evaluating the designs as a designer myself.