Advanced Typography // Task 1 - Exercises: Typographic Systems & Type & Play
31.08.2022 - 28.09.2022 (Week 1- Week 5)
Emelyne How Sok Hing (0352938)
Bachelor of Design (Hons) Creative Media
Advanced Typography // Task 1- Exercises: Typographic Systems & Type & Play
LECTURES
Week 1:
Advanced Typography: Typographic Systems
Shape grammar - It is a set of shape rules that apply in a step-by-step way to generate a set, or language, of designs.
There are 8 major variations:
1. Axial System - All elements are organised to the left or right of a single axis.
 |
| Figure 1.0 Axial System, 31st August 2022 Source: https://www.pinterest.com/pin/111675265734893751/ |
2. Radial System - All elements are extended from a point of focus
 |
| Figure 1.1 Radial System, 31st August 2022 Source: https://cargocollective.com/theresiaing/Typography-Project |
3. Dilatational System - All elements expand from a central point in a circular fashion
 |
| Figure 1.2 Dilatational System, 31st August 2022 Source: https://www.behance.net/gallery/9883405/Typographic-Systems-Dilatational-System |
4. Random System - Elements appear to have no specific pattern or relationship
 |
| Figure 1.3 Random System, 31st August 2022 Source: https://www.pinterest.com/pin/127508233189582968/ |
5. Grid System - A system of vertical and horizontal divisions
 |
| Figure 1.4 Grid System, 31st August 2022 Source: https://www.flickr.com/photos/george_strouzas/3742166703 |
6. Transitional System - An informal system of layered banding
 |
| Figure 1.5 Transitional System, 31st August 2022 Source: https://www.pinterest.com/pin/131026670392306673/ |
7. Modular System - A series of non-objective elements that are constructed in as a standardised units.
 |
| Figure 1.6 Modular System, 31st August 2022 Source: https://type365.com/2017/02/21/7-typographic-layout-systems/ |
8. Bilateral System - All text is arranged symmetrically on a single axis
 |
| Figure 1.7 Bilateral System, 31st August 2022 Source: https://kneeblog.wordpress.com/2014/04/25/bylateral-typographic-system/ |
Week 2:
Advanced Typography: Typographic Composition
Principles of Design Composition
Emphasis, Isolation, Repetition, Symmetry and asymmetry, alignment, perspective.
The Rules of Thirds
A photographic guide to composition. It basically suggest that a frame can be divided into 3 columns and 3 rows. The intersecting lines are used as guide to place the points of interest, within the given space.
Environmental Grid
The system is based on the exploration of an existing structure or numerous structures combined.
Form and Movement
This system is based on the exploration of an existing Grid Systems.
The placement of a form (irrespective of what it is) on a page, over many pages creates movement.
Week 3:
Advanced Typography: Context & Creativity
Handwriting
The shape and line of hand drawn letterforms are influenced by the tools and materials used to make them.
Cuneiform - is the earliest form of actual writing, It evolved from pictograms, written from left to right.
Hieroglyphics - is fused with the art of relief carving.
Can be used in 3 different ways:
1. As ideograms.
2. As determinatives to indicate the general idea of the word.
3. As phonograms to represent sound.
Early Greek / 5th C. B.C.E. - Built on the Egyptian logo consonantal systems. They were freehanded and no serifs.
Roman Uncials - By the 4th Century, Roman letters were becoming more rounded, the curved form allowed for less strokes and could be written faster.
English Half Uncials - More slanted and condensed.
Movable Type - Printing was practiced in China, Korea and Japan. China tried to use movable printing but failed as the materials used were too brittle. Koreans established a foundry to cast moveable type in bronze, allowing for dismantling and resetting of text, along with the creation of their new script Hangul. This was all done several decades before the earliest printing in Europe.
Week 4:
Advanced Typography: Designing Type
Type design carries a social responsibility so one must continue to improve its legibility. Type design is a form of artistic expression.
General Process of Type Design:
1. Research
During the creation process, we should understand type history, type anatomy, terminologies and type conventions. After that, we should determine the type's purpose or what it would be used for and what different applications it would be used in. Then, we should start examining existing fonts that are presently being used for inspiration/ideas/references.
2. Sketching
Some likes to sketch their fonts using the traditional tool set that is brush, pen, pencils and so on. After that, it can also be scanned.
Others use digital tool sets such as Wacom to directly sketch their typeface as it can be more quicker, persistent and consistent.
3. Digitalization
There are professional software used in the digitalization of the typefaces as for instance FontLab. Some designers uses Adobe Illustrator in order to illustrate their typefaces.
4. Testing
It is an important component in the design thinking process. The results of the testing is part of the process of refining and correcting aspects of the typeface. Depending on the typeface category, the readability and legibility of the typeface becomes an important consideration. However, it is not as crucial if the typeface is a display type, where the expression of the form takes a little more precedence.
5. Deploy
Even after deploying a completed typeface there are always teething problems that did not com to the fore during the prototyping and testing phases. Thus, the task of revision doesn't end upon deployment.
Typeface Construction:
During the process, using grids (with circular forms) can facilitate the construction of a letterforms and is a possible method to build/create/design.
Construction and Considerations:
An important visual correction is the extrusion of curved (and protruding) forms past the baseline and crap line. This also applies to vertical alignment between curved and straight forms.
A visual correction is also needed for the distance between letters. The letters must be altered to a uniform 'visual' white space. This means that the white space between the letters should appear the same. This is called 'fitting the type'.
Week 5:
Advanced Typography: Perception & Organisation
Different way to create contrast
1. A contrast of size between two elements.
2. Using weight that is other than using bold, using rules, spot, squares can also provide 'a heavy area' for a powerful point of visual attraction or emphasis.
3. Contrast of form. (A capital letter and its lowercase equivalent, a roman letter and its italic variant, condensed and expanded versions of typefaces)
4. Structure. It means the different letterforms of different kinds of typefaces.
5. Texture. It means putting together the contrasts of size, weight, form and structure, applying them to a block of text on a page, you come to the contrast of texture.
6. Contrast of direction.
7. Contrast of colour.
8. Contrast of form.
INSTRUCTONS
Exercises
Task 1 - Exercise 1: Typographic Systems
Week 1:
Our first exercise of this semester consist of exploring the 8 different types of typographic system. We are to create different layout for this exercise and also watch some lecture videos that Mr. Vinod provided us.
Note:
1. Size - 200 x 200 mm
2. Colour- Black and only one colour if needed
3. Limited use of graphical elements
Text to use:
The Design School,
Taylor’s University
All Ripped Up: Punk Influences on Design
or
The ABCs of Bauhaus Design Theory
or
Russian Constructivism and Graphic Design
Open Public Lectures:
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
Manish Acharia, 11AM-12PM
Lecture Theatre 12
InDesign Progress
These are my progress for the typographic systems using InDesign.
1. Axial System
 |
| Figure 1.8 Axial System version 1.0, 4th September 2022 |
Font: Futura Std
Typeface: Book, Bold, Heavy, Light
At first, I was a bit confused about how to proceed with the axial system. However, I knew that I wanted to create something clean, neat and direct. I also made use of the colour purple since it's my favorite colour.
After some reflection, I thought that my first trial was a bit too simple and wanted to try something more 'daring' in terms of arrangement.
 |
| Figure 1.9 Axial System version 2.0, 4th September 2022 |
 |
| Figure 2.0 Axial System version 3.0, 4th September 2022 |
 |
| Figure 2.1 Axial System version 4.0, 4th September 2022 |
 |
| Figure 2.2 Axial System version 5.0, 4th September 2022 |
From the different versions that I made, I prefer the last one as I think that it's the one who looks more balanced visually and is also more coherent together.
2. Radial System
Font: ITC Garamond Std
Typeface: Ultra Italic, Book Italic, Ultra, Light, Book
For the Radial System I wanted something which looked a bit more dynamic. My idea was to compile different typefaces so as to make my work look more interesting visually.
 |
| Figure 2.3 Radial System version 1.0, 4th September 2022 |
 |
| Figure 2.4 Radial System version 2.0, 4th September 2022 |
Font: Adobe Caslon Pro
Typeface: Regular, Semibold, Bold
For this one I tried to create something which was inspired from the rays of light radiating from the sun.
 |
| Figure 2.5 Radial System version 3.0, 4th September 2022 |
3. Dilatational System
Font: ITC New Baskerville Std
Typeface: Roman, Bold
My main idea was to repeat the text and make them look like swirls which are connected together.
 |
| Figure 2.6 Dilatational System version 1.0, 4th September 2022 |
4. Random System
Font: ITC New Baskerville Std
Typeface: Bold, Roman
Doing the random system was how I expected it to be. I knew it was not going to be easy but I also knew that it would be somehow a bit fun to do it since we are allowed to 'break the rules'. I liked that we did not have to stick with one way of doing only but we could mix and match different layouts.
My first idea was to create a mix and match of the information that we had. I started with the letters 'A, B, C' as my centre point. Then from this, I added more elements around it. As I thought it didn't look messy enough, I thought of repeating the first pattern that I did but I'm not so sure that it's the best decision for it.
 |
| Figure 2.7 Random System version 1.0, 4th September 2022 |
 |
| Figure 2.8 Random System version 2.0, 4th September 2022 |
Font: Bodoni Std
Typeface: Bold, Poster Compressed, Book, Poster, Bold Italic
As I was not very satisfied of my first option, I tried to do another one but with a different concept. This time I used the letter 'B' as my starting point. Then, I tried to add as randomly as I can the other information. I believe that this one is way better compared to the first one as it looks more pleasing visually and looks random enough for me.
 |
| Figure 2.9 Random System version 3.0, 4th September 2022 |
5. Grid System
Font: ITC New Baskerville Std
Typeface: Roman, Bold
Doing the Grid System was a bit harder than I thought it would be. The ideas did not come easy and it was hard to judge whether my work was good enough or not. Despite trying multiple ones, I still felt that something was a bit off and the layout did not turn out that well.
 |
| Figure 3.0 Grid System version 1.0, 4th September 2022 |
 |
| Figure 3.1 Grid System version 2.0, 4th September 2022 |
 |
| Figure 3.2 Grid System version 3.0, 4th September 2022 |
6. Transitional System
Font: Futura Std
Typeface: Book, Regular, Heavy, Medium.
Doing the transitional system was quite fun but at the same time a bit tricky. It was challenging to find a good balance between the different elements. Sometimes, the layout felt like it looked odd or too empty. I'm pretty much satisfied with what I have done for this System as I think it has a cool vibes with it and I like how the layout turned out.
 |
| Figure 3.3 Transitional System version 1.0, 4th September 2022 |
 |
| Figure 3.4 Transitional System version 2.0, 4th September 2022 |
In the second version I added some lines and also tried to tilt the overall layout a bit more as I felt that the first one was a bit too straight and looked a bit awkward.
7. Modular System
Font: Bembo Std
Typeface: Regular, Extra Bold, Book, Bold, Semibold
The modular system was also quite challenging for me to do. I did lack of ideas for this one and was a bit confused on how it should look like. I'm not very satisfied of my first trial for this system.
 |
| Figure 3.5 Modular System version 1.0, 4th September 2022 |
8. Bilateral System
Font: Futura Std
Typeface: Light, Regular, Book
My first thought for this system was to extend the letter 'H' from Bauhaus as I thought it would look great but also match with the principle of this system where everything should be in one direction. I wanted to do something pure, clean and refined.
 |
| Figure 3.6 Bilateral System version 1.0, 4th September 2022 |
Week 2:
After Mr. Vinod's feedback, I made some improvement to what needed to be changed.
Font: ITC New Baskerville Std
Typeface: Roman, Bold
 |
| Figure 3.7 Dilatational System modified version 1.0, 7th September 2022 |
For the second version I repeated the same pattern that I made at first but changed the direction as I thought that the first one felt way too empty and looked boring.
 |
| Figure 3.8 Dilatational System version 2.0, 7th September 2022 |
In the third one, I added a graphical element which I think makes the work look more finished.
 |
| Figure 3.9 Dilatational System version 3.0, 7th September 2022 |
I tried to make the Grid System look more cohesive this time and also tried to create a better layout.
 |
| Figure 4.0 Grid System modified version, 7th September 2022 |
 |
| Figure 4.1 Modular System modified version, 7th Septmber2022 |
In the modified version, I increased the size of my font so as to reduce the paragraph spacing.
 |
| Figure 4.2 Bilateral System modified version, 7th September 2022 |
Final Task 1 - Exercise 1: Typographic Systems
 |
| Figure 4.3 Final Axial System, 7th September 2022 |
 |
| Figure 4.4 Final Radial System, 7th September 2022 |
|
| Figure 4.5 Final Dilatational System, 7th September 2022 |
 |
| Figure 4.6 Final Random System, 7th September 2022 |
 |
| Figure 4.7 Final Grid System, 7th September 2022 |
 |
| Figure 4.8 Final Transitional System, 7th September 2022 |
 |
| Figure 4.9 Final Modular System, 7th September 2022 |
 |
| Figure 5.0 Final Bilateral System, 7th September 2022 |
Figure 5.1 PDF of Final Task 1 - Exercise 1: Typographic Systems, 7th September 2022
Figure 5.2 PDF with grids and guides of Final Task 1 - Exercise 1: Typographic Systems, 7th September 2022
Task 1 - Exercise 2: Type & Play
Part 1: Finding Type
Our exercise 2 is split into two parts. Part 1 consists of making a selection of an image either man-made objects, structures or nature. Then, we are to analyse, dissect and identify potential letterforms within the dissected image.
Note- Need 5 letters only
Progress
For this exercise, I chose 3 images that I found on Pinterest. Since I could not choose which one would be the best, I decided to try outlining the three of them and then decide which one I would prefer to continue with.
First choice - Butterfly
 |
| Figure 5.3 Butterfly image, 11th September 2022 Source: https://www.flickr.com/photos/smokingloon/418879074/ |
 |
| Figure 5.4 Outline of Butterfly, 11th September 2022 |
 |
| Figure 5.5 Traced out letters, 11th September 2022 |
The letters that I traced out from this image are Y, A, V, M, H & F
Second choice - Spider Lily
 |
| Figure 5.6 Spider Lily image, 11th September 2022 Source: https://oldhousegardens.com/store/category/DiverseFall#DI12 |
 |
| Figure 5.7 Outline of Spider Lily, 11th September 2022 |
 |
| Figure 5.8 Traced out letters, 11th September 2022 |
The letters that I found in this image are the letters C, J, R, P & A
Third choice - Decomposing leaf
 |
| Figure 5.9 Decomposing leaf image,, 11th September 2022 Source: https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/leaf-skeleton-jeff-schneiderman.jpg |
For this image, I did not do the outline as I thought that the image by itself is already quite linear and clear to understand and should be easy to depict shapes.
 |
| Figure 6.0 Traced out letters, 11th September 2022 |
Final choice - Butterfly image
After some reflection, I felt like going with the letters that I traced out from the image of the butterfly as I felt more inspired by and interested in doing it. I also used Adobe Illustrator to trace out the letterings.
 |
| Figure 6.1 Rough draft of the letterings, 11th September 2022 |
 |
| Figure 6.2 Reference using Univers LT Std - 39 Thin Ultra Condensed, 11th September 2022 |
Process
Week 3:
To illustrate my fonts I used Adobe Illustrator. During the process of my illustration, I encountered some difficulties at first as I was struggling to find inspiration to create something which would look interesting enough.
.png) |
| Figure 6.3 Progress from Adobe Illustrator, 14th September 2022 |
Progress of letter 'Y'
 |
| Figure 6.4 Progress of letter 'Y', 14th September 2022 |
 |
| Figure 6.5 Progress of letter 'V;, 14th September 2022 |
 |
| Figure 6.6 Progress of letter 'M', 14th September 2022 |
 |
| Figure 6.7 Progress of letter 'F', 14th September 2022 |
 |
| Figure 6.8 Progress of letter 'H', 14th September 2022 |
 |
| Figure 6.9 First version of my fonts, 15th September 2022 |
After doing a lot of refinements to my font, I came up with this. The concept was to create a font which looked simple but also had some character to it. Referring to the veins and antennae of a butterfly, I wanted a font whose stroke would be both thick at the start and thin at the end, just like a butterfly's veins on its wings. I also wanted to create something which looked delicate which I think I was able to convey mostly in the letter 'Y'.
Week 4:
After hearing Mr. Vinod's feedback which was to increase the stroke size on one side and trim the end of my strokes so that they would look more refined, this is my final version of this task.
Final Task 1 - Exercise 2 (Part 1): Finding Type (Before feedbacks)
 |
| Figure 7.0 Extracted letterforms, 21st September 2022 |
 |
| Figure 7.1 Final Finding Type, 21st September 2022 |
Figure 7.2 Final Finding Type PDF, 21st September 2022
Final Task 1 - Exercise 2 (Part 1): Finding Type (After feedbacks)
Taking into consideration what I got as feedback, I wanted to improve my finding type. I tried to make my type look more consistent and thicker as well.
 |
| Figure 7.3 Final Finding Type, 12th October 2022 |
Figure 7.4 Final Finding Type PDF, 12th October 2022
 |
| Figure 7.5 Final Finding Type placed on an image, 12th October 2022 |
Part 2: Type & Image
The part 2 of this exercise consists of combining a visual with a word of our choosing. The text must be woven into a symbiotic relationship with the image.
For this exercise we were also asked to take part into a competition called '2022 HONOR Talents
Global Design Awards'. We were given two themes which were either 'Cultural Prosperity' or 'Renewal of life'.
I decided to go with the theme 'Renewal of life' and chose to include the word Renewal. For the picture, I tried scrolling through my camera roll to find something that would correlate with the theme and then thought of using a picture that I took back in Mauritius. I picked some pictures which were taken near the sea as for me renewal is related to water. As we say, water is the source of life and life is also like a stream of water where the latter is always renewed somehow. Water also plays an important role in rituals and meditation to cleanse and freshen the mind, spirit, and soul. As it can be seen, in countless creation myths water is seen as the source of life itself, so this is the reason why I chose those pictures specifically.
 |
| Figure 7.6 Image choice number 1, 24th September 2022 |
 |
| Figure 7.7 Image choice number 2, 24th September 2022 |
 |
| Figure 7.8 Image choice number 3, 24th September 2022 |
Visual Research
I also did some research on Pinterest so as to get some ideas on how I could proceed with my own artwork.
.jpg) |
| Figure 7.9 Visual Research, 24th September 2022 Source: https://i.pinimg.com/474x/11/35/0e/11350e13efc1607264f59414149917dd.jpg |
.jpg) |
| Figure 8.0 Visual Research, 24th September 2022 Source: https://design.tutsplus.com/articles/inspiration-amazing-3d-typography--vector-3530 |
Progress
I decided to use Adobe Photoshop as I believe that this software has the tools necessary to help me in my task. My first step was to try and blend the font as much as I could with the background but also tried to keep a reasonable level of readability. Then, I proceeded to use the Gaussian Blur Effect so as to make the font blend in more. I also used the liquify effect so as to reproduce a ripple effect so that it could match with the texture of water. I also played with the brush tool so as to try to incorporate the lettering into the image as much as possible.
 |
| Figure 8.1 First trial, 25th September 2022 |
 |
| Figure 8.2 Second trial, 25th September 2022 |
 |
| Figure 8.3 Third trial, 25th September 2022 |
Week 5:
After the feedback session I proceeded to modify my work.
Before feedback
 |
| Figure 8.4 Work before feedback, 28th September2022 |
After feedback
This time I implemented clip masks using clouds on the lettering. Additionally, I played with the brush tools so as to make it blend with the background. Then, I also added the blur effects and used the liquify effect. After that, I also decreased the contrast of the picture.
 |
| Figure 8.5 Work after feedback, 28th September 2022 |
 |
| Figure 8.6 Work after feedback, 28th September 2022 |
Final Task 1 - Exercise 2 (Part 2): Type & Image
 |
| Figure 8.7 Final Task 1 - Exercise 2 (Part 2): Type & Image, 28th September 2022 |
Figure 8.8 Final Task 1 - Exercise 2 (Part 2): Type & Image, 28th September 2022
FEEDBACKS
Week 2:
Axial - Good but remove the graphical elements
Radial - Good job
Grid - Cohesiveness is lagging, need to improve the layout
Bilateral - Increase the font size. Good idea for the elongation of the letter 'H'. Decrease font size of 'Lecture theatre 12'
Dilatational - Design could be better
Modular - Improve arrangement & layout
Week 3:
Still need to refine it.
Week 4:
Make the strokes thicker on one side like I did for the letter M. Cut the end of the strokes so that they are not that sharp
Week 5:
Looks decent but is not really challenging. Maybe try to put the lettering on the horizon and make it look like clouds. Additionally, the contrast from the rocks need to be subdued so that it looks more like a wallpaper.
Lecturer's feedbacks:
W7, T1: Complete. You need to place your finding type on an image, both type and play have room for improvement. Competency level: Developing
W7, T1: Complete.
REFLECTIONS
Week 1 & 2 (Typographic Systems):
When I saw the amount of workload for the first week I felt overwhelmed. It felt like a lot for our new start of this semester 2. After a while, I got back on the train and felt more used to it. I cannot deny that I struggled to find ideas or at least ideas that were somehow unique or did not feel too boring to look at. It felt challenging and frustrating but it's weird for me to say that I did enjoy this exercise somehow as I felt the freedom to do whatever I want despite having to stick to some rules for this exercise. I enjoyed doing the dilatational system and transitional system the most. I struggled mostly with the ones which required to be more disciplined like the modular system or the grid system. In terms of observations, I felt like the problem this time was not with the typeface being used or the font but mostly in terms of composition, layout and the arrangement of the different elements. It felt harder this time because we had to be careful of the visual weight of each work and if they looked harmonious or coherent. Creating those systems, made me realise that indeed typography is harder than it seems to look.
Week 2 & 3 (Finding Type):
As I saw this exercise, it reminded me of the exercise that we had to do in semester 1 and I remembered how it felt like a nightmare for me to do. No need to say that when I had to do this exercise, I did not feel very elated to tackle this task. I would say that the only fun part of this task was to extract the letters from the image that we would pick. Doing this felt new and I found it interesting as this stimulated the creative side of my brain to think out of the box in order to find some letters hidden throughout the different shapes and lines. I felt like this exercise forces you in a way to be more observant and pay attention to the details as compared to our everyday life where our schedule does not really permit us to do so very often. One finding that I made is that typography indeed is present everywhere we go and even in static images.
Week 4 & 5 ( Type & Image):
Doing this type of exercise was a first for me. I would say that I did feel a bit clueless despite doing some research on the internet about this type of work. I did not really know how to tackle it at first, I was a bit lost as I did not really know what tools to use and so on. Still, after doing a kind of 'trial & error' type of process, I managed to find out what to use and not to use in this exercise. I saw that doing the font is one thing but making it match with the overall composition is another thing which is also way harder than what we can see. I found out that in order to create a good visual balance so that the composition does not look too awkward requires a type of visual sensitivity so as to make good aesthetic judgements.
FURTHER READINGS
Week 1:
 |
| Figure 8.9 '7 essential typographic layout systems', 4th September 2022 Source: https://type365.com/2017/02/21/7-typographic-layout-systems/#transitional |
Summary of the article: For our further reading, I wanted to try online articles. In this article, there was an explanation of the different systems and how we can proceed with each system. There were some useful tips which I tried to apply in my work too. I found this article helpful as it was clear, direct and simple to understand and read.
Week 3:
 |
| Figure 9.0 'Playing with Type: 50 Graphic Elements for Exploring Typographic Design Principles', 14th September 2022 |
Author: McCormick, Lara
Publication Information: Beverly, Massachusetts : Rockport Publishers. 2013
Summary of the book: This book was a good opportunity for me to refresh my mind about the anatomy of letters since our next task was related in creating our own fonts.
Comments
Post a Comment