ADVANCED TYPOGRAPHY - EXERCISE

ADVANCE TYPOGRAPHY - EXERCISES

26/08/20 - 23/09/20 (Week 1 - Week 5)
Chan Jing Wen (0340480)
Advanced Typography
Exercises

---

LECTURE NOTES

Lecture 1
26/08/20 (Week 1)

Mr Vinod went through the MIB with us and explained how our online classes will be conducted.

For our first topic, we have to choose our title and create layouts for it.

Somethings to take note on for our first exercise:

• It's not necessary that one layout has just one system.
• The graphic elements cannot be too outstanding. It should be very minimal or even none used. It shouldn't take your eyes and attention away from the text. You can introduce an element if it helps with the flow or something.
• Our artboard should be 200mm x 200mm
• We have to identify which information is important so we can create a hierarchy.
• Alignment and consistency is important.
• Our body text should be kept between 8-12pt.
• It's ok to have headline in different text box. but try to minimize the amount of text box.

A short summary of what the different systems are :

1. Grid system is column and rows.
2. Axial must be done at the sides of a line.
3. radial starts at the point and expands from that. there is a point of focus and the info must be accurately expanded from the point.
4. Dilatational is on the circumference of the circle
5. random has to be chaotic and messy, but there is a hierarchy and people will know what they're supposed to look at first.
6. Transitional is something with a flow.
7. Bilateral has just one axis and everything is central align we can also try 2-3 axis later on.
8. Modular can move around in their respective boxes. if it takes up one box, it can move to any other box as long as that box isn't occupied by any other text.

Our first attempt should be more rigid to the rules, but our second attempt can be more experimental.

The difference between modular and grid is for grid, you don't have to be exactly within the boxes, text can be 2 boxes and a half or so, but modular has to be inside their space. For grid, the text must be in boxes, but for modular, we can have it in any shapes such as circles, hexagons even. We can have one diff shape, but not in the first attempt. but it must be in the modular unit.

Here are some of the tools and settings mentioned for InDesign :

• To pull a page next to another : Select all pages, right click, allow all selected page to shuffle
• To edit columns : Select the page, Click layout - margin and columns - change the number of columns based on your preference - gutter should maintain at 5.
• To create rows : Click layout - create guides - fit to margin - increase the rows based on how many you need.
• To open hidden symbols : ctrl+alt+i

Difference between paragraph spacing and force line break.

• To break the paragraph : press enter. 
• To create force line break : press shift + enter.
• To adjust paragraph spacing : control bar - paragraph formating control - space after - (key in leading space)
• For a force line break, It will follow the leading space instead of having a paragraph spacing if paragraph spacing was adjusted.
• Leading is important to achieve cross alignment (all the paragraphs are aligned)
• leading is 2.5 - 3.0 points larger than point size of typeface

Lecture 2
02/09/20 (Week 2)

Our first part of type & play is finding type. Basically, we have to analyse, dissect, and identify potential letterforms. For this, we can use any images such as man-made objects, structures, or even nature.

After dissecting the letters, put them between a caps height and base line, then only start refining. For the refining process, slowly refine it and try to make some elements consistent. The type in the end should be able to relate back the original reference but at the same time refined enough as an actual typeface. Sometimes we might accidentally refine it a little too much that it ends up losing the characteristic. In this case, we have to work backwards.

Lecture 3
09/09/20 (Week 3)

For Type & Play pt 2, we have to create text that fits the image, We can find any image we want on the internet, or even choose our own photos. It has to look like it's meant to be together.

Lecture 4

16/09/20 (Week 4)

There was no class since it was Malaysia Day.

YouTube Lecture: Designing Type

The objective of the typeface has to be clear and affects the design of the typeface. For example, if the objective of the typeface was for it to be clean and readable up close and afar, the typeface has to have characteristics that make it legible at different distance. 

Process of Designing Type

1. Research
• We should understand type history, type anatomy, and type conventions. 
• We have to determine the type's purpose or what it would be use for as different applications.
• We should also examine existing fonts that are presently being used. 
2. Sketching
• Whether it's hand sketches or digital, they both have their pros and cons.
• Hand sketches provides better control whereas digital makes the process faster and consistent.
3. Digitization
• FontLab and Glyphs are the popular software for digitalizing type. 
• Attention should be given to the counter forms as the readability of the typeface depends on it.
4. Testing 
• Process of refining and correcting certain aspects of the typeface.
5. Deploy
• Even until this stage, the process of refining will still occur to reduce teething issues.

---

INSTRUCTIONS



EXERCISES

Typographic Systems (Week 1)

[Previous Semester - 14/04/20]
I decided that I wanted to keep this record as I basically updated my layouts based on the feedback given and most of the instructions are also the same. By keeping it, I also hope that I can refer back and see if I'd improved since I've deferred or if there's anything else I should improve on.

After receiving this task, I decided that I wanted to create the layouts based on the title "All Ripped Up : Punk Influence in Design".

The information that has to be included are :

The Design School
Taylor's University

Open Public Lectures:

November 24, 2020
Lew Pik Svonn, 9AM-10AM
Ezrena Mohd., 10AM-11AM
Suzy Sulaiman, 11AM-12PM

November 25, 2020
Muthu Neduraman, 9AM-10AM
Fahmi Reza, 10AM-11AM
Fahmi Fadzil, 11AM-12PM

Lecture Theatre 12

I started sketching some of my ideas on how the layout would be like.

Figure 1.1 Draft of Layout

At the beginning I thought I would literally draw out the layout with all the text and everything but after that it was a bit too unnecessary as I kept focusing on the text instead on the layout. Hence everything except the first two was plotted instead of sketching the exact layout.

Figure 1.2 Axial System - Process

For the first layout in Axial System, I drew 2 boxes and adjusted it to the thickness of P and N so it would seem like the letters are extending to create a line.

Figure 1.3 Radial System - Process

For Radial System, I drew circles to help me figure out the positioning better.

Figure 1.4 Dilatational System - Process

 For this, I basically created circles just like the previous one.

Figure 1.5 Random System - Process

I added "PUNK" at the background so it looked more full.

Figure 1.6 Grid System - Process

Figure 1.7 Bilateral System - Process

Figure 1.8 Transitional System - Process

Figure 1.9 Modular System - Process

For the remaining 4 systems, I created the layouts by relying on the columns and row. I didn't follow that much for transitional system as transitional system has a flow and everything is unique from my understanding.

Below are my outcomes :

Figure 2.1 Axial System - First Attempt

Figure 2.2 Radial System - First Attempt

Figure 2.3 Dilatational System - First Attempt

Figure 2.4 Random System - First Attempt

Figure 2.5 Grid System - First Attempt

Figure 2.6 Bilateral System - First Attempt

Figure 2.7 Transitional System - First Attempt

Figure 2.8 Modular System - First Attempt

Week 1 (26/08/20)
After the lecture, I felt like I understand some of the systems a bit better than before. With that, I started amending / redoing most of my layouts from my previous semester.

Below are my outcomes :

Figure 2.9 Axial System - Second Attempt

Figure 3.1 Radial System - Second Attempt

Figure 3.2 Dilatational System - Second Attempt

Figure 3.3 Random System - Second Attempt

Figure 3.4 Grid System - Second Attempt

Figure 3.5 Bilateral System - Second Attempt

Figure 3.6 Transitional System - Second Attempt

Figure 3.7 Modular System - Second Attempt

Week 2 (02/09/20)

After receiving feedback, I tried to improve my compositions. Below is the final outcome :

Figure 3.8 Axial System - Final Attempt

Figure 3.9 Radial System - Final Attempt

Figure 4.1 Dilatational System - Final Attempt

Figure 4.2 Random System - Final Attempt

Figure 4.3 Grid System - Final Attempt

Figure 4.4 Bilateral System - Final Attempt

Figure 4.5 Transitional System - Final Attempt

Figure 4.6 Modular System - Final Attempt

Figure 4.7 Typographic Systems - PDF File 

Type and Play - Finding Type (Week 2 - Week 3)

Week 2 (02/09/20)

After Mr Vinod gave us the brief on our second exercise, I went on to look for some photos on the internet. At first I was deciding between a tree trunk and an bamboo weaving pattern. In the end, I came across this pattern and I felt like I could already see some potential letters in it so I chose it. Below is the image I used.

Figure 4.8 Bamboo Weaving Pattern

I then made it into a black and white photo to make it easier to dissect.

Figure 4.9 Converting the photo to B&W

I then started dissecting the letters "F", "T", "L", "A", and "E".

Figure 5.1 Dissection of the letters

Below are the letters without any attempt in editing. I drew two lines as the Capital Height and the Baseline. For this exercise, I feel like it reminds me of Futura Std Bold so I'll be using it as a guideline while refining the letters.

Figure 5.2 Extraction of letters and Futura Std Bold as reference

I then started refining the letters.

For my first attempt, I made the fill black and created a white outline to show the weaving pattern from the bamboo. I also editing the width of the letters as they were excessively stretched.

Figure 5.3 Attempt 01

After that, I felt like there wasn't much standard in the curves of the letters and the width of everything is also not standardized, so I tried to standardize everything. I also added curves on the extending stroke as I felt like it would seem more fitting.

Figure 5.4 Attempt 02

I still felt like the curves weren't standardized enough as each letter kind of had a different angle, so I made all of the horizontal strokes the same width and angle.

Figure 5.5 Attempt 03

The widths of the horizontal strokes now were really thick but the vertical ones were thin, so I decided that it would be better if I made it thicker.

Figure 5.6 Attempt 04

The width of the stokes look better now, but I felt like the extending of the stroke's curves weren't aligned with the curve of the vertical strokes so I tried adjusting them. I also felt like the letters "L", "A", and "E" had a weird width in general so I tried to decrease/increase the size of it. I also adjust the horizontal strokes for "F" and "E" to go to the back as the bamboo weaving pattern is criss cross. It would also help the "A" look less out of place.

Figure 5.7 Attempt 05

I was still not happy with the "A" so i make it smaller again. I also adjusted the "F" and "E" to make the vertical stroke (the middle one) a bit shorter.

Figure 5.8 Attempt 06

Week 3 (09/09/20)

After receiving the feedback from Mr Vinod, I tried to make the amendments based on it.

Figure 5.9 Attempt 07

Figure 6.1 Attempt 08

I tried to do both exaggerating and removing the overlapping elements. I think I like the final one (removing the overlapping elements) more. The smallest point size this can go is 20pt until it loses it's legibility.

And so, below is the final compilation of the letters :

Figure 6.2 Final Type & Play 1 - Letter "A"

Figure 6.3 Final Type & Play 1 - Letter "E"

Figure 6.4 Final Type & Play 1 - Letter "F"

Figure 6.5 Final Type & Play 1 - Letter "L"

Figure 6.6 Final Type & Play 1 - Letter "T"

Figure 6.7 Final Type & Play - All Letters (PDF File)

Type and Play - Type & Image (Week 3 - Week 5)

Week 3 (09/09/20)

After the brief for this exercise, I went on Pinterest to find photos that I found interesting to edit. 

Below are the pictures that I found potential in:

Figure 6.8 - Potential Images

After I have all of my options, I decided to try sketching out my ideas on how I would want the layout to be like.

Figure 6.9 - Sketches for each option

I really didn't know what to do for the two on the right so I gave up on them. Between the other 4, I felt like the top left and top middle would turn out better. In the end, I decided that the top left would be my best choice as I had a stronger visualization and how I can do it and what effects I can add to the text.

Final decision:

Figure 7.1 Original Photo

I decided to do my project in photoshop as I knew I wanted to do masking for the text and I'm more familiar in using the mask layer in Photoshop.

Figure 7.2 Process 01

I started by masking the parts that I wanted the ice cream to show. After that, I felt like I could mask out some parts of the letters to have a wave (?) effect to help suggest the dripping of the syrup. I also added a gradient to the letters by eyedropping the colours from the syrup itself.

Figure 7.3 Process 02

After that, I felt like it was kind of flat so I added highlights and shadows to the letters to places I felt would be suitable.

Figure 7.4 Process 03

I felt like the letters were still very stiff, so I added drips on the letters to further push the dripping effect on the text. 

Below is my final attempt. I felt like the letters were really bold and stand out a lot, which made the top right corner a bit empty. I decided to just write the word "enjoy" and lower down the opacity while changing the blend mode to overlay so it wouldn't stand out as much as my main text but at the same time fill in the empty spacing.

Figure 7.5 Final Attempt (JPG)

Figure 7.6 Final Attempt (PDF)

---

FEEDBACK

Week 0 (21/04/20)
General Feedback :
Alignment is very important in grid system. It should be aligned to columns first then rows. Open public lecture isn't the same hierarchy as lecture theater 12, therefore we shouldn't treat it as the same thing. Make sure when text are bold, the text that are beside the bold text but isn't bold has to be larger than the bold text.

Specific Feedback :
For Axial, (R) the angle is a little steep, should try to increase leading; Good job for (L), like how the P and N extends. For Radial, nothing much, is okay. For Dilatational, (L) have to work on the leading, good job for (R). For Random, (L) is quite good but can increase in size, (R) is not random so I should try again. For Grid, a bit too conservative, especially the typeface, the underline on the "open public lecture" will cause it to reduce it's readability Layout ok for the left, just change the typeface; right has a bit huge gap of space which is awkward and causes a lot of pressure on the left. Need to work on both. For Bilateral, layout almost the same, lacks imagination, change typeface. For Transitional, the one on the left can be considered as transitional, but the spacing between Nov and the text is inconsistent, it's just I have to connect the text, "the design school" can be taken upwards so it seems like it extends from the top to bottom. The one on the right still needs work. For Modular, can see the cells, ok, just choice of typeface, the type of non objective elements that I'm using doesn't match with the style.

Week 2 (02/09/20)
General Feedback :
Downsize the number to 0.5pt when the numbers are capital. Leading has to increase/decrease depending on the composition, don't just follow the automatic leading. Make sure to not double enter, use force breaks.

Specific Feedback :
For Axial, the one on the left needs a little more leading. For both grids, there's an awkward white space separating the texts. For Bilateral, the one on the left has too many axis so try to decrease the number of axis. The one on the right need to adjust leading. Transitional, the one of the left, can move "Taylor's University" somewhere to the left to make it flow a bit better. Everything else is great.

Week 3 (09/09/20)
General Feedback :
Make sure to date blog captions

Specific Feedback :
Increase the spacing between the lines as it might disappear if you decrease the point size. Maybe exaggerate the overlapping elements or eliminate it entirely.

Week 4 (16/09/20)

No feedback as I didn't attend the class.

Week 5 (23/09/20)

Specific Feedback:

Everything is good.

---

REFLECTION

EXPERIENCE
Week 1 (26/08/20); I was very happy to actually be able to continue this semester and I find that I can actually understand some of the systems better now. For example, I couldn't understand what Modular and Transitional really were but now I feel like I understand a little bit more about it. Although there are still areas where I lack in, I just feel excited overall to be able to come back. Week 2 (02/09/20); I feel like the finding type exercise is a very creative exercise as it helps us think out of the box while creating typefaces. I think it was harder during Typography when we had to just brainstorm a typeface out of nowhere. Week 3 (09/09/20); I think the type and play pt 2 was a really fun exercise and I had fun brainstorming how to put the text into different images to fit the image. I think the hard part was just me trying to find good photos on Pinterest that were easy to work with haha. I actually wanted to do more but I was too busy this week so I couldn't, if not it would be even fun if I could do the other images that I chose too.

OBSERVATION
Week 1 (26/08/20); I notice that I was a bit unclear about some technical stuff such as using InDesign, but my blog really helped me refresh my memory and I kind of got back the hang of it. Still, I'm not sure if I'm entirely back on track haha. Week 2 (02/09/20); I find it very cool that difference reference can lead to different type of typefaces. I also observe that I've forgotten a lot of stuff and I really had to refer back to my previous Typography blogs to revise back. Week 3 (09/09/20); I notice that it really helps if you analyze what's the main aspect of the image to incorporate it into the text. If not, it would just look cool but it wouldn't make sense. 

FINDING
Week 1 (26/08/20); I found myself being willing to learn more this semester, maybe because I stopped for awhile. I also find that the new interface of Blogger and even Google Drive is a bit confusing and I'm really lost trying to figure out what to do because I'm scared my whole blog would accidentally be deleted if I pressed something wrongly. Week 2 (02/09/20); I find it a bit hard to know how much or how little I should do the refinement for the letters. I was afraid that it wouldn't remind people of the original pattern but at the same time wanting it to look like an actual typeface. Week 3 (09/09/20); I find that my Photoshop skills have definitely improve when compared to my previous semesters, and I'm quite happy with it.

---

FURTHER READING

Typography Sketchbooks by Steven Heller and Lita Talarico
26/08/20-16/09/20 (Week 1 - Week 4)

Figure 7.7 Typography Sketchbook

Week 1: Reza Abedini (pg 8-9) and Diego Giovanni Bermudez Aguirre (pg 10-11)

Reza Abedini pointed out that it is important for us to have a sketchbook with us at all times. Sometimes, ideas just come to us, and we need to have a sketchbook in hand to just jot down our ideas. Everything can spark an idea, so be prepared for it. He also mentioned that he had different sketchbooks to record different kinds of ideas.

Below are some of Reza Abedini's work. 

Figure 7.8 Reza Abedini Work 01

Figure 7.9 Reza Abedini Work 02

Figure 8.1 Reza Abedini Work 03

Diego Giovanni Bermudez Aguirre is popular for using vibrant colours in his work as it reflects the colours of native Columbia. He says his sketchbook is used to define and clarify his doubts. He also doesn't like using too much graphical elements in his work and relies more on the typography as we wants to work with basic elements and typography only.

Below are some of Diego Giovanni Bermudez Aguirre's work:

Figure 8.2 Diego Giovanni Bermudez Aguirre Work 01

Figure 8.3 Diego Giovanni Bermudez Aguirre Work 02

 Week 2: Dmitri Aske (pg 18-19) and Peter Bilak (pg 42-43)

Dmitri Aske says that he finds his sketches sometimes better than the actual work as it just gives off a different vibe and seems more precise. He used to do his sketches in different kinds of medium. This would include pen, pencils, markers, and so on. He says that by that, he can see some of those sketches turning into graffiti. However, he does his sketches now in pencil as he's doing more vector art work currently.

 

Below are some of Dmitri Aske's artwork:

Figure 8.4 Dmitri Aske Work 01

Figure 8.5 Dmitri Aske Work 02

Figure 8.6 Dmitri Aske Work 03

Click for more Dmitri Aske's work 

Peter Balik says that when we develop a typeface, we can't just look at one specific shape, we have to consider the whole set of letters so that it will work when it's all assembled. He also says that he usually starts by constructing the lowercase letter "a" as it's the most complex letter and it usually shows the character of the typeface. 

Below are some artworks from Peter Balik:

Figure 8.7 Peter Balik Work 01

Figure 8.8 Peter Balik Work 02

Figure 8.9 Peter Balik Work 03

Click for an interview of Peter Balik

Week 3: Chank Diesel (pg 66-69) and Ivan Chermayeff (pg 72-73)

Chank Diesel had previously worked with companies such as Taco Bell, Tanqueray, and Ocean Spray by creating custom typefaces for them. To him, his sketchbook helps him to get the idea out of his head. After that, it'll be easier for him to see if it's an idea to keep or not, and what kind of refinement should be made. The reason behind this is because artist often think of an idea and let the idea play out in their head but often times, we don't actually see the idea clearly until we see it physically. One fun fact is that he tries to keep a human element somewhere in the final fonts.  

Below are some of Chank Diesel's artwork:

Figure 9.1 Chank Diesel Work 01

Figure 9.2 Chank Diesel Work 02

Figure 9.3 Chank Diesel Work 03

Ivan Chermayeff has created many corporate identity, brand development, and logo design in his career. As he started his career prior to the advancement of technology today, he still does most of his sketches with paper and pen. He finds the need of having a sketch as it helps him plan ahead. 

Below are some of Ivan Chermayeff's artwork:

Figure 9.4 Ivan Chermayeff Work 01

Figure 9.5 Ivan Chermayeff Work 02

Click for an interview of Ivan Chermayeff

Week 4: Charles Spencer Anderson (pg 12-13) and Susan Archie (pg 16-17)

Charles Spencer Anderson thinks that most designers have their sketchbooks since high school. He thinks a lot of his sketches are ideas that get abandoned through refinement. Although it seems like our sketches don't actually end up in our final product, they are still good as our inspiration and improvisation. 

Below are some of Charles Spencer Anderson's artwork:

Figure 9.6 Charles Spencer Anderson Work 01

Figure 9.7 Charles Spencer Anderson Work 02 

Click for more artwork from Charles Spencer Anderson

Susan Archie uses her sketch to help her find he right typeface for her projects. Basically, she has a font book that has a collection of typefaces. She says that sometimes I typeface that looks good on itself might not look good on a brand. Having a font book for her to flip through helps her compare and contrast different typefaces in order for her to select the most suitable one.

Below are some of Susan Archie's artwork:

Figure 9.8 Susan Archie Work 01

Figure 9.9 Susan Archie Work 02