Advanced Typography Task 1: Exercises 1 & 2
28/3/2022 - xx/x/2022 / Week 1 - Week ?
Seojeong Kim (Lova) / 0350085
Advanced Typography / Bachelor of Design in Creative Media
Task 1 - Exercises 1 & 2
LECTURES
Week 1: Lectures 1
Advanced Typography: Typographic Systems
Typographic systems provide a sense of purpose that focuses and directs the decision-making.
Shape grammar: Set of shape rules that apply in a step-by-step way to generate a set, or language, of designs.
![]() |
Axial System |
Axial System: All elements are organized to the left or right of a single axis.
Radial System: All elements are extended from a point of focus.
Dilatational System: All elements expand from a central point in a circular fashion.
![]() |
Random System |
Random System: Elements appear to have no specific pattern or relationship.
Grid System: A system of vertical and horizontal divisions.
Transitional System: An informal system of layered banding.
![]() |
Modular System |
Modular System: A series of non-objective elements that are constructed as a standardized unit.
Bilateral System: All text is arranged symmetrically on a single axis.
INSTRUCTIONS
Task 1: Exercise 1 - Typographic Systems
For task 1, I need to explore 8 systems which are Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and Bilateral in InDesign using the content given in the MIB on Facebook Group. Also need to instructed to watch the InDesign demonstration videos in the lecture playlist on YouTube.
- Size: 200 x 200 mm
- Colours: Black And Additional Colour
- Minor Graphical Elements
Design Process in Adobe InDesign:
The Design School, Taylor’s University
Russian Constructivism And Graphic Design
June 24, 2021
Lew Pik Svonn, 9AM - 10AM
Ezrena Mohd, 10AM - 11AM
Suzy Sulaiman, 11AM - 12PM
June 25, 2021
Lim Whay Yin, 9AM - 10AM
Fahmi Reza, 10AM - 11AM
William Harald, 11AM - 12PM
Axial System
- To change the single axis, a diagonal axis was used. It looked a little uncomfortable to look at, but I think it's a very attractive layout. The colors were inverted and balanced on both sides (left and right).
Size: 200 x 200 mm
Colours: Black And White
Font: Gill Sans Std (Light and Bold)
Radial System
- For the radial system, I wanted to give the impression of a light beam going out of a circular model. like the sun.
Size: 200 x 200 mm
Colours: Black And White
Font: Gill Sans Std (Light, Regular and Bold)
Dilatational System
- The layout of dilatational system was a very difficult task for me. It was very difficult to create creative layouts using this method. So I put a space in the middle, and finished the layout with a neat shape.
Size: 200 x 200 mm
Colours: Black And White
Font: Gill Sans Std (Light and Bold)
Random System
- The random system seems the easiest, but it was the most complex task. I worked on all the fonts differently to make them look a little more complicated. More focus on hard-to-read elements.
Size: 200 x 200 mm
Colours: Black, White And Red
Font: Gill Sans Std (Light, Regular And Bold)
Grid System
- I worked on dividing the shape using vertical and horizontal. By laying out the fonts according to the shape.
Size: 200 x 200 mm
Colours: Black, White And Red
Font: Gill Sans Std (Light, Regular And Bold)
Transitional System
- For using layered banding, I wanted to express the feeling of wavy water. So, I put a small digital element to express the sun.
Size: 200 x 200 mm
Colours: Black, White And Red
Font: Gill Sans Std (Light, Regular And Bold)
Modular System
- I made a layout using a unified shape. It can be dizzy if too many are repeated, so I put a few spaces in the expression.
Size: 200 x 200 mm
Colours: Black And White
Font: Gill Sans Std (Light And Bold)
Bilateral System
- For bilateral system, same size and consistent color can make it feel very boring. So I try to not lose the original feeling of bilateral system, but to give it a more creative feeling. Thus, I used a different color and size, laid it out in the background.
Size: 200 x 200 mm
Colours: Black, White And Red
Font: Gill Sans Std (Light And Bold)
Final PDF Files:
Task 1: Exercise 2 / Type and Play
Part 1: Finding Type
We have task to analyze letterforms 4 letters within a chosen image of a subject. Uppercase or lowercase only, choose reference typeface from the Facebook group 10 typefaces.
Chosen subject:
This image was taken by myself. These are the yellow flowers I got from my dear friend on my last birthday (my favorite color is yellow). I thought I might find some interesting typefaces in this flowers.
Letterform extraction:
I used the pen tool in Adobe Illustrator to trace the flowers line.
But when I got feedback, Mr. Vinod told me that this should be chosen with a little more detail. It's nice to find a typeface, but the lines are too thin and simple, so he asked me to work on it a bit more.
After Feedback:
Sketch
After extracting the letters, I sketched out a rough idea of what the final letter would look like.
Among the ten fonts, I decided to refer to 'Bembo Std'. The reason is that even in the typeface I extracted, I could see that the tip was curved sharply, and the approximate shape was similar.
Digitalization:
Here is an overview, the artboards are 1000 px height and 3000 px width.
In my attempt at this, I tried to make the letters a little bit more the same size. Erase the areas that are too large, and fill the areas that are not too large. But I made the point of this not disappear, and made it show more the points of curves and slopes.
PDF File:
Part 2: Type and Image
In this exercise, you select an image, select words and sentences that match the selected image, and place them in the image. The goal of this is to see the images and words interact. Text and images each occupy 50% and must not overwhelm each other.
Original Picture
Fonts used: Gill Sans Std
The phrase I thought was appropriate for this photo was 'dancing in the moonlight'. The reason is that there is a song that comes to mind when I see the full moon, and that is the song 'Dancing in the moonlight' by 'Toploader'. I immediately thought of this phrase when I saw this picture.
I put the word 'moonlight' in the middle of the moonlight and made it blurry. And I wanted to give it a cinematic feel. But I'm not sure how to express the 'dancing in the' sentence. It would be nice to get feedback.
Original Picture
Fonts used: Bell MT Bold
The phrase I thought was appropriate for this photo was 'Do Not Take'. Because when I first saw this picture, I thought he probably didn't want to take a picture with a playful expression on his face. So I decided on this phrase.
A typography that matches the color was placed on the front of the face, and it was expressed as if light had penetrated the face. And I made it possible to express this on each of the three cell phone cameras.
Original Picture
Fonts used: Cambria
The phrase I thought was appropriate for this photo was 'Washing Machine'. Naturally, there were washing machines around people, and while I was thinking about what could be used to describe this washing machine, I wanted to express the clothes inside the washing machine. I wanted to express the foam that wraps around people when the washing machine is used.
I corrected the color of the photo, and selected a color to match it. 3D modeling was used to complete the typography, which was then sized to fit the human form. And to create a bubble feel, I applied a lighter color to the border of the typo, making it opaque and soft.
PDF Files:
FEEDBACK
Week 1 / Exercise 1: Typographic Systems
General Feedback: In this exercise, I learned that typography can also be laid out using multiple systems. Using different layouts, sizes, and angles, even the same letter and the same color can give a different feel.
Specific Feedback: Try different layouts, this will help me a lot in understanding the Typographic Systems.
Week 2 / Exercise 1: Typographic Systems
General Feedback: Take the time to understand this system, practice paying attention to kerning and letter spacing.
Specific Feedback: The random system exercise I made was very satisfactory. Mr. Vinod also told me that this is a very dynamic and good exercise. However, my Grid System was very lacking. I wanted to practice more and fix it to understand this.
Week 3 / Exercise 2: Part 1: Finding Type
General Feedback: I have to select a picture and extract the text, not too simple, a little deeper and more detailed.
Specific Feedback: The letters I extracted were too simplistic. Mr. Vinod said this should be a little more detailed, and I'd love to try the other photos as well.
Week 4 / Exercise 2: Part 1: Finding Type
General Feedback: I need to make my text more detailed. I use the font I have extracted as an example, so that it can be a suitable font.
Specific Feedback: Continue to practice the letters, refine and correct them, and allow them to become more robust fonts.
Week 5 / Exercise 2: Part 2: Type and Image
General Feedback: Practice how naturally the image and typography can merge by choosing a typography that fits the image. I picked out pictures I could practice on and thought of a suitable typography for this. If the text fits the image well, this can make the image richer.
Specific Feedback: The blurry effect worked well for the image I wanted, and the 3D effect was also very suitable for expressing body wraps.
REFLECTION
Experience: All the typography exercises I learned this time were useful. All three exercises were so much fun to work on, and they helped me understand more about typography. For me, Exercise 1 and Exercise 3 were easy to understand and learned, and I was able to learn quickly. Exercise 2 was a very difficult exercise for me personally, but it was just as engaging and enjoyable as it was time consuming.
Observations: In doing these works, I learned the detail of typography and the process of observing it. I learned once again that fonts are very delicate, so look deeply and go through a detailed process to complete them.
Findings: Creating a typeface has always required a lot of time, effort, and delicacy. Through all these courses, I honed my skills and learned and felt a lot about typography.
Comments
Post a Comment