Advance Typography // Task 1: Exercises
29/03/21 - 03/05/21 (Week 1 - Week 6 )
Caitlyn Aurelia Tjandra (0339381)/BDCM
Typography
Task 1 - Exercises
Lecture Notes
Lecture 1: Introduction (29/03/21)
Today we have our first class of this module. We are introduced to our lecturers which is Mr.Vinod and Mr. Asrizal. We were briefed on what we would be doing in this class and all the projects.Lecture 2: Typography Systems (29/03/21)
1. Axial- all elements are organized to the left or right angle axis.
- single information
- diagonally across
- axis doesn’t need to be straight
2. Radial
- all elements are extended from a point of focus
3. Dilatational
- all elements expand from a central point in a circular fashion.
- multiple rings of circles ( within that circles put hierarchy of into)
- lesser important info in the outer ring
4. Random
- elements appear to have no specific pattern or relationship
- there’s a method of chaos
5. Grid
- a system of vertical and horizontal divisions
- Structured according to the grid
6. Modular
- a series of non-objective elements that are constructed in a standardised unit
- able to move it around
- two units that are standard
7. Transitional
- an informal system of layered banding
8. Bilateral
- all text is arranged symmetrically on a single axis
- nonobjective form of lines
+ Shape Grammars: a set of shape rules that apply in a step-by-step way to generate a set or language of design
typographical organization: complex, elements depend on communication in order to function
- Move Artboard = Pages > right-click > Untick (allow selected spreads to shuffle) > drag page side by side
- Text Size = 8-12 pt
- Leading = 2,5 pt bigger than text sizes
- For text that such as Futura that has the same size for capital letters and numbers = lower size by 0,5 pt
- Space after = same size as leading
- Leading = Option + Down
- Forced line break = Shift + Enter
typographical organization: complex, elements depend on communication in order to function
Lecture 3: InDesign (07/03/21)
Our third lecture was about InDesign. This lecture revised us on how to use InDesign in which we had learned from our first semester in typography. This is really helpful because I was able to be reminded back on what to do. Here awesome tips and tricks Mr.Vinod shared in the video:- Move Artboard = Pages > right-click > Untick (allow selected spreads to shuffle) > drag page side by side
- Text Size = 8-12 pt
- Leading = 2,5 pt bigger than text sizes
- For text that such as Futura that has the same size for capital letters and numbers = lower size by 0,5 pt
- Space after = same size as leading
- Leading = Option + Down
- Forced line break = Shift + Enter
Lecture 4: Typographic Compositions (14/03/21)
1. Principle of design compositionDominant principle:
-emphasis
-isolation
-repetition
- symmetry
-Alignment
-perspective
-isolation
-repetition
- symmetry
-Alignment
-perspective
Above are examples from artists such as David Carson, Barnbrook, and Paula Scher.
They are relevant more towards imagery than complex units information that comprises distinct elements
2. The rule of thirds:
- photographic guide to composition
- a frame could be divided into 3 rows and 3 columns
- interacting lines use as a guide to place a point of interest
- maybe old and rigid, the versatility of the system and its modular nature tend to allow an infinite number of adaptations
3. environmental grid
-exploration of an existing structure/numerous structure combined
-extraction of crucial line, curve, and straight
- interesting manner of exploration
- provides a context in the form developed in the designs
4. Form and movement
-based on an exploration of an existing grid system
-multitude of the option the grid offer
-dispel the seriousness surrounding the application of the grid system
-turning in pages of a book slowed down the animation
-placement of a form on a page over many pages creates movement
"There is a fine line between genius and insanity just as there is a fine line between legibility, readability and memorability " - Oscar & Sir Vinod
- photographic guide to composition
- a frame could be divided into 3 rows and 3 columns
- interacting lines use as a guide to place a point of interest
- maybe old and rigid, the versatility of the system and its modular nature tend to allow an infinite number of adaptations
 |
3. environmental grid
-exploration of an existing structure/numerous structure combined
-extraction of crucial line, curve, and straight
- interesting manner of exploration
- provides a context in the form developed in the designs
4. Form and movement
-based on an exploration of an existing grid system
-multitude of the option the grid offer
-dispel the seriousness surrounding the application of the grid system
-turning in pages of a book slowed down the animation
-placement of a form on a page over many pages creates movement
"There is a fine line between genius and insanity just as there is a fine line between legibility, readability and memorability " - Oscar & Sir Vinod
Lecture 5: Context & Creativity (28/03/21)
This weeks topic elaborates on the History of Roman Typeface, from how it begins from the olden days till the Roman typeface we use today.
1. Handwriting
- first mechanically letterform produced to directly imitate handwriting
- shape and line of hand draw letterform are influenced by the tools and materials made
- first mechanically letterform produced to directly imitate handwriting
- shape and line of hand draw letterform are influenced by the tools and materials made
•Early Greek c. 3000 B.C.E : Early Greek was compromised of only capital letters written between two guidelines to organise them into horizontal rows.
•roman uncials: Roman letters were more rounded, curved form allowed for less strokes and could be written faster
•english half uncials: More slanted and condensed.
•emperor charlemagne: Characterised by the tight spacing and condensed lettering. Condensing the line space and letter spacing reduced the costs for book production.
•carolinglan minuscule:
•black letter
•Italian renaissance
2. Local Movements and Individuals
In Malaysia, murasu.com spear-headed by programmer and typographer Mutuhu Nedumaran. The programming language that needs to encode different types of vernacular writing systems was cracked by him and the system is now used in mobile phones and desktops. Huruf is a local group of graphic designers interested in the localised lettering of Latin and vernacular painted or inscribed on wales signage that is amongst the more prominent organisations digitising and revitalising typefaces in Malaysia.
Lecture 6: Designing Type (11/04/21)
Why design type? Social responsibility, one must continue to improve its legibility. Type design is a form of artistic expression, just like any other artist.
The advancements of typeface:
-To create a clean, distinctive and improve the legibility- To make the letterforms become easily recognised even in the unsupportive condition
1. Anatomy of type
2. The general process of designing type
3. How to think before drawing
4. Construction of components
5. Characteristics of a good type design
6. Different processes and approaches the three different designers went through
Beier’s Design Model (used for designing) There are 4 steps in total:
2. The general process of designing type
3. How to think before drawing
4. Construction of components
5. Characteristics of a good type design
6. Different processes and approaches the three different designers went through
1. Specification
2. Analysis
3. Creation
4. Form making
2. Analysis
3. Creation
4. Form making
Instruction
Exercise
Task 0: Axial System (Week 1)
For class today, we were told to make an axial system layout in Indesign. This was just an exercise and we haven't really learn about each system deeply. Afterwards, we were breakdown into groups in which we were required to give our opinion regarding what our group mates has done.
 |
| Fig 1.0 Axial System class work |
Task 1: Typographical System (Week 1- 2)
For this week we were assign the task "Type System" . We were told to compose a typography layout each using 8 typographical system that we learned in lecture video in Week 1. I did several digital sketches on procreate first before creating the design on Adobe Indesign. Therefore, I could play with the layout more and figures out which text in which area.
Sketches
 |
| F 1.1 Radial + Dilatational + Grid Sketch (02/04/21) |
 |
| Fig 1.2 Grid + Transitional + Modular + Bilateral System Sketch |
 |
| Fig 1.3 Axial + Radial System Sketch |
First Draft
After sketching I went ahead and digitalized them in InDesign. While watching the lecture on the basics of InDesign and modular systems I was able to turn my sketches into life.
 |
| Fig 2.1 Axial System Draft ver 1 (03/04/21) |
 |
| Fig 2.2 Axial System Draft ver 2 |
 |
| Fig 2.3 Radial System Draft ver 1 |
 |
| Fig 2.4 Radial System Draft 2 & Dilatational System draft ver 1 |
 |
| Fig 2.5 Dilatational System Draft ver 2 |
 |
| Fig 2.6 Random System Draft ver 1 |
 |
| Fig 2.7 Random System Draft ver 2 |
 |
| Fig 2.7 Grid System Draft ver 1 |
 |
| Fig 2.8 Grid System Draft ver 2 |
 |
| Fig 2.9 Transitional System Draft ver 1 |
 |
| Fig 3.0 Modular System Draft ver 1 |
 |
| Fig 3.1 Bilateral System Draft ver 1 |
Fig 3.2 Draft PDF (05/04/21)
Experimentation
 |
| Fig 3.3 Random and Bilateral System Draft 2 |
After consideration, I showed my work to my friends and my parents for feedback. Finally, I choose what the majority had picked as their favorite as my final outcome.
Task 2A: Finding Type (Week 2-4)
On week 2 they briefed us on our next task which was finding type. On this task, we were supposed to choose a reference image where we need to trace the image to find letters. From there on, we build those letters to be a suitable font. Since I'm not sure what I wanted to do, I did several experiments on several references and then I trace the image.
Image Tracing
 | |
|
I did several experiments on different types of images. The first one is a brain cell in which has unique mushroom-like tips, however, I was struggling on finding the letters and so I moved on to the next one which is a pile of bobby pins. I really liked this one because it has a distinctive component on each of the letters. I could also find several letters in this image. The distinctive feature of bobby pins is the rounded tips. The next image I traced was a magma crack image. However, I don't really like how each of the lines turns out, it doesn't have any distinctive features, and it seems similar to stone crack. Next one we have safety pins, Although it looks reassuring, I didn't manage to find a lot of letters since it has rounded components. The next one is a book, I thought it was cool to create a paper-based font however when I finished tracing It didn't look hopeful. Last, I did a metal pipe which I really liked. It has distinctive features from the bump of the metal, however, for the rest of the components, it is a causal rounded line. Therefore, I stick with the booby pins as my reference image. I went ahead and carefully trace the image better.
 |
| Fig 4.1 Bobby Pins Tracing (08/04/21) Letters |
After tracing I try to find the letters. I found 6 letters however, we only need 5. So, I picked the best 5 letters which I ended up with A,P,B,Y,R.
 |
| Fig 4.2 Bobby Pins Finding Letters |
After that, I went ahead and move the letters into a structured layout grid which we learned in the typography module semester 1.
 |
| Fig 4.3 Bobby Pins Letters Refinements |
First thing I did is refined the letters one by one and make sure all of the letters is on the baseline, I also increased some of the letters strokes to give more impact and balance with all the other letters.
 |
Fig 4.3 Bobby Pins Letters Small Refinements (10/04/21) |
Then, I search for an existing font that would help me guide my letters structured. I found the font Futura SD similar to what I was trying to achieve. Therefore, I use this font as a guide to further refine each of my letters.
 |
| Fig 4.5 Futura SD |
 |
| Fig 4.5 Refinements with Futura SD as guide (11/04/21) |
 |
| Fig 4.6 Refinements of characteristic such as rounded and small right shape foot |
 |
| Fig 4.7 Refinements on the bowl of each letter except A (12/04/21) |
 |
Fig 4.8 experimenting on the thick and thin of the strokes (17/04/21) |
Fig 4.9 Refinements on the thin and thick of the strokes (18/04/21)
Final Drafts
 |
| Fig 5.0 Final Draft All letter |
 |
| Fig 5.1 Final Draft with the word "BARP" |
 |
| Fig 5.2 Final Draft Letter A |
 |
| Fig 5.3 Final Draft Letter B |
 |
| Fig 5.4 Final Draft Letter R |
 |
| Fig 5.5 Final Draft Letter Y |
 |
| Fig 5.6 Final Draft Letter P |
Final Outcome
Task 2A: Type and Image (Week 4-5)
For this week we are moving on to task 2B which is Type and Image. In this task, we need to play around with the surrounding of the image and make sure the typographical elements suit the image.
Drafts
 |
| Fig 5.0 Draft 1 Shark (23/04/21) In this image, I experiment with the picture itself. We could see there's a short with other fish surrounding it but still keeping distance from it. I use the quotes, Find your peace and experiment with the type. I place a water texture and movement of water into the text. |
 |
| Fig 5.1 Draft 2 Broken Vision (24/04/21) |
In this image, I took the initiative of the broken eyes image and type the word broken. I did a glass texture on the text and makes it seems like the text is a shattered glass.
 |
| Fig 5.2 Draft 3 Falling (25/04/21) |
 |
| Fig 5.3 Draft 4 Falling ver 2 (25/04/21) |
In this image, I experiment with the background texture. Since it was a brick wall, I made the text looks like a carving of the wall. The text is Don't fall in which experiments with the image as the girl is falling. I also made the word Fall look like it's falling to create an interplay.
Final Outcome
Feedback
Week 1
General Feedback: Mr. Vinod talked about the importance of note-taking to avoid sleeping/ out of focus, Mr. Vinod went through all the axial designs and gives some feedback. Angle in the axial system is important, 45 degrees is too diagonal. Be mindful when choosing a color, don't t choose a color that's too vague.
Specific Feedback: Overall it's good, the information hierarchy's visible, experiment more on the graphic elements
Week 2
General Feedback:
- leading space is important
- Some headline was stretched
- labeled your blog post
- visibility of your files
- very careful when using graphical elements and color
- don’t forget to show process work
- When there’s capital letter and number especially in Futura, reduce the size by 0.5
Peers Feedback (Tze Earn, Filia, Ariessa, Dzaky):
Axial
- 2nd one is more interesting diagonal line looks cool
- 4th I like how you break the axis to create tension
- maybe make the title bigger
- Between 2nd and 4th one is my favorite
radial
1st :
- one I like how you put it on the corner
- align the open public lecture more straight
- has weight / hierarchy
2nd:
- title is too small
- bring it more to there right
- first one is the best
Dilatational
1st:
- the movement is good
- hierarchical is good
2nd:
- lecture title size could be increased
- one looks like the solar system
- unique
3rd :
- looks like a cobra, swirling in words
- creative work
- you did dilatational fantastic, love your work
Random
2nd:
- no need for shading, lighter shadow
- This one is better than other
Grid
1st:
- this one is the best out of 4 other
- I like how you have negative space on the middle left
- The layout is great, and it definitely adheres to the criteria
Transitional
- You should make the layout messier
- I think it’s played too safe
- Need more movement, looks too stagnant right now
Modular
- first one
- experiment more
- move the bubbles away from each other / randomize
- title and date hierarchy looks the same
Bilateral
- definitely fits the criteria
- hierarchy is good
- both work well
Week 3
Peer feedback:
- It looks great
- A needs more work
- stroke is consistent
Specific feedback:
I really like the stroke you are going here but you need to be more detailed when tracing the letters from the image. You can Introduce thick and thin strokes in the bowl such as P and B. I really like how you introduce the image characteristic by rounded foot and some end right peak.
Week 4
Peer feedback:
- use the Y strokes as a reference for other
- use the Y strokes as a reference for other
- makes the circle on A and R more similar
- Maybe try incorporating the circle foot on P and B too
- Overall it looks really cool. I like what you did on the bowl
- Maybe try incorporating the circle foot on P and B too
- Overall it looks really cool. I like what you did on the bowl
Specific Feedback:
I like the R, A, P & B. Y needs workWeek 5
Peer feedback:
- Excellent work
- I really love the eye one
- Definitely has interplay with the image
- O “ maybe make it more wrecked
Specific Feedback:
- Great job on the task! I really like the broken eyes one.
Reflection
Experience: This time, advanced typography is taken to the next level. The project was fun however much harder than other projects we had done before. I had difficulties since before regarding layout. As for the finding time project, it was really found to find a letter in the image. But I was also having difficulties refining the letters. However, after Mr. Vinod's feedback and going through what others had done, I could understand the assignments better.
Observation: I observe we could see the difference between a unique design and other designs. From peer review, I could voice out my opinion and be more critical. I could observe a lot of progress in what my friend does through peer review. It takes time and practice to actually create a decent design in typography.
Findings: The most used software in typography is Indesign and Illustrator. I am still learning and there are still things that need improvement. I find myself enjoying more typography as weeks, Years go on. From Typography to Advance typography, I find myself learning to understand typography and what typography really is. I also find myself understanding letter form better than Semester 1 ever since font design.
Further Reading
The first book I read was "Typographic System by Kimberly Elam". This book helps me in my task 1 which is regarding the 8 systems. I read this book because at first I was quite confused as to what to do. This book has examples of each system's being described detailedly. This book really helps me understand each system's more deeply and I was able to create the work.
Comments
Post a Comment