Advanced Typography / Task 1: Exercises

22/04/24 - 13/05/24 Week 1 - Week 4

Sheren Princessa Davon / 0362134

Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University

Task 1: Exercises

QUICK LINKS

Task 1: Exercise 1

Task 1: Exercise 2

LECTURES

Week 1: Typographic Systems

Axial: elements are arranged along a single axis

Fig 1.1 Axial System

Radial: elements are extended from a point of focus

Fig 1.2 Radial System

Dilatational: elements expand from a central point in a circular manner

Fig 1.3 Dilatational System

Random: elements have no specific relationship or pattern

Fig 1.4 Random System

Grid: elements are arranged in a system of vertical & horizontal divisions

Fig 1.5 Grid System

Transitional: informal system of layer banding

Fig 1.6 Transitional System

Modular: a series of non-objective elements that are constructed in standardized units

Fig 1.7 Modular System

Bilateral: all text is arrange symmetrically on a single axis

Fig 1.8 Bilateral System

Week 2: Typographic Composition

Principles of design composition

Rule of Thirds

Photographic guide to composition
basically a composition/frame can be divided into 3 rows and 3 columns as guides to place points of interest.

Fig 1.9 Rule of Thirds

8 Typographic Systems

Grid System: it's old and rigid but it's very versatile which is why it's still commonly used nowadays

Fig 1.10 Grid system

Environmental Grid

the exploration of many existing structures combined
includes extraction of crucial lines (curved & straight)

Fig 1.11 Environmental grid

Form and Movement

exploration of an existing grid system
to explore & play around with the different options and the applications of the grid system
the different placements of a form on a page can create movement
for ex the pic on the bottom are spreads of a book, when flipping through the pages, it creates movement

Fig 1.12 Form & Movement

Fig 1.13 Form & Movement #2

Week 3: Context & Creativity

Handwriting

The first letterforms produced were designed to imitate handwriting

Fig 1.14 Evolution of the Latin alphabet

Cuneiform

3000 B.C.E.
earliest system of writing, usually using a blunt end of reed stylus onto wet clay tablets
Fig 1.15 Cuneiform

Hieroglyphics

2163-2160 B.C.E.
Egyptian writing system fused with the art of relied carving
hieroglyphic images can be used as:

ideograms: to represent things they actually depict
determinatives: to show the signs are meant as phonograms/indicate the general meaning of a word
phonograms: to represent words that "spell out" sounds

Fig 1.16 Hieroglyphics

Early Greek

5th C. B.C.E.
the Phoenicians developed a phonetic alphabet of 22 letters, then the Greeks who added necessary vowels
they read in a format called boustrophedon: reading from left to right, then on the next row right to left
gradually, the appearance evolved, serifs appeared and served as models for lettering in imperial Rome

Fig 1.17 Early Greek

Roman Uncials

4th century
the letters became more rounded & curved
lesser strokes & quicker writing

Fig 1.18 Roman Uncials

English Half Uncials

8th century
more slanted & condensed form

Fig 1.19 English half uncials

Carolingian Minuscule

standardization of alphabet/language under Alcuin of York
pronunciation, spelling & writing conventions (capitals at the start of sentences, spaces, etc.)

Fig 1.20 Carolingian Minuscule

Black letter

12-15 C. CE
pointed arches

Fig 1.21 Black letter

Moveable Type

1000 - 1100 CE
pioneered in China but succeeded in Korea in late 1300-1399 CE

Fig 1.22 Moveable type

Evolution of Middle Eastern Alphabet

Fig 1.23 Evolution of Middle Eastern Alphabet

Evolution of the Chinese script

Fig 1.24 Evolution of the Chinese script

Brahmi script

450-350 BCE
India's earliest writing system

Fig 1.25 Brahmi script

Incung

Indonesia's historical writing system

Fig 1.26 Incung

Jawi

Arabic-based alphabet

Fig 1.27 Jawi

Week 4: Designing Type

Adrian Frutiger

designed Frutiger, Univers
main objective: to create a clean, distinctive & legible typeface easily read from far away

Fig 1.28 Univers

Fig 1.29 Frutiger Arabic

Verdana

Microsoft font
created by Matthew Carter
purpose: to be legible even in small sizes on screen
considerations: the characteristics of the font are derived from pixels than pen/brush/chisel

commonly confused characters: i / uppercase l

Fig 1.30 Verdana

London "Underground" / Johnston Sans

by Edward Johnston in 1916
was asked to create a typeface with bold simplicity, modern yet rooted in tradition
purpose: to be used in London's Underground posters & signange

Fig 1.31 Johnston Sans

Gill Sans

by Eric Gill
was highly based on Johnston's work

Process of Type Design

1. Research

type history, type anatomy, type conventions
terminologies, side-bearings, metrics, hinting
the type's purpose (the diff applications: for school buses/airport signages. etc.)
examine existing fonts as inspiration/context/usage pattern

2. Sketching

traditional method: some designers use pen/brushes/ink & paper then scan them for digitization

have better control over their designs by hand

digital method: using a tablet directly into the font design software

quicker & consistent
but can impede the natural movement of hand strokes

Fig 1.32 Sketch of Johnston Sans, sketch by Eiichi Kono

3. Digitization

software commonly used for digitization: FontLab, Glyphs
some also use Adobe Illustrator to design the letterforms, then bring them into the font apps
consistency of letterforms are crucial

4. Testing

the process of refining, correcting aspects of letterforms, prototyping, ultimately leading to important feedback
readability, legibility is an important consideration (but this isn't 100% crucial for display types with a lot of expression in letterforms)

Fig 1.33 Prototype Stencil

5. Deploy

sometimes problems might still arise during deploying that didn't arise during the testing stages

Fig 1.34 Prototype Number Plate

Type Construction

Roman Capital

placing letters in a grids (squares, rectangles & circles)
using grids with circular forms can help in constructing letterforms

Fig 1.35 Construction grid for roman capitals
Construction & considerations

the 26 letters of the alphabet can be grouped according to its different attributes (both lowercase & uppercase)

Fig 1.34 Classification according to form & construction

important visual corrections:

the curved forms moving past the baseline & cap line

Fig 1.35 Curved forms moving past capheight

the distance between letters, 'fitting' the type (the letter spacings must be adjusted to make sure the white space between letters look the same)

INSTRUCTIONS

Task 1: Exercise 1 - Typographic Systems

For Exercise 1, we are tasked to create 8 different layouts following the 8 different typographic systems which are Axial, Radial, Dilatational, Random, Grid, Modular, Bilateral, Transitional. The exercise task is to be done using Adobe InDesign only. Size 200 x 200 mm. In addition to black, we can use one other color. Graphical elements (line, dot, etc.) can be used but limitedly. The text given is:

The Design School,

Taylor’s University

All Ripped Up: Punk Influences on Design

The ABCs of Bauhaus Design Theory

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

Process

I did several attempts of each system on InDesign, trying to experiment with different layouts until I reach a layout I am satisfied with.

Fig 2.1 Process in Adobe InDesign

Layout Attempts

AXIAL

Fig 1.2 Axial Attempts, Week 1 (22/04/24)

For this attempt, I used a singular axis, tilted a little to the left/right. For attempt #2 I had the idea to let the downward stroke of the p and upward stroke of k act as the axis line for the text to follow. However, I didn't really like how the layout looked so I decided to split the information into two parts in attempt #3.

RADIAL

Fig 2.3 Radial Attempts, Week 1 (22/04/24)

My first attempt was me getting the hang of using the type on a path tool, as well a adjusting the circumferences of the circles used. It was quite tedious, but in attempt #2 and #3 I found that the elements I added really helped in highlighting the center point of where the text is coming from.

DILATATIONAL

Fig 2.4 Dilatational Attempts, Week 1 (22/04/24)

Similar to Radial, this system was quite hard to get the hang of since there were quite a lot of circular text boxes used. I played around with the title placements, as well as some of the structures of the text.

RANDOM

Fig 2.5 Random Attempts, Week 1 (22/04/24)

Upon research and looking for inspiration, I found a lot of Random System designs like my attempt #1 and #2. Though I really like my attempt #2 as it has a lot of randomness, I found it quite similar to designs I've seen my seniors and peers do. After pondering on it, I decided to go for attempt #3 as I feel like it has a greater sense of originality and an enough sense of randomness.

TRANSITIONAL

Fig 2.6 Transitional Systems, Week 1 (22/04/24)

I struggled quite a bit with this system. For attempt #1 I tried to create a feel of the text transitioning into a wave-like shape, however I wasn't too sure about it. I tried creating a "straight", sort of static version in attempt #2 but I didn't like it so I waited until next class to ask for Mr. Vinod's feedback.

GRID

Fig 2.7 Grid Attempts, Week 1 (22/04/24)

The only difference in attempt #2 and #3 are the fonts and typefaces used. I liked both attempts of this layout, but I decided to go for attempt #3 since I felt like it had a more playful feel, and it matched the vibe of Punk more.

MODULAR

Fig 2.8 Modular Attempts, Week 1 (22/04/24)

This system is all about using units for blocks of text, I found it quite fun as I liked the symmetry of it. For attempt #1 I used a dots to create a further sense of symmetry, however I chose to go with attempt #2 as I liked the minimalist concept of it.

BILATERAL

Fig 2.9 Bilateral Attempts, Week 1 (22/04/24)

My attempt #1 was quite simple as I was figuring out how to layout the text into a singular, central alignment. For attempt #2 I decided to place the text in the center, arranging them by hierarchal importance. Final attempt, I combined my two attempts of placing text on both sides of a central axis and keeping text aligned in the center. I used the same typeface but its different fonts and colors to maintain the hierarchy, also with the help of the lines.

Final Task 1: Exercise 1 - Typographic Systems

After receiving some feedback and creating modifications, I was done with my 8 layouts.

Fig 1.10 Final Axial System - JPEG. Week 2 (29/04/24)

Fig 2.11 Final Radial System. Week 2 (29/04/24)

Fig 2.12 Final Dilatational System. Week 2 (29/04/24)

Fig 2.13 Final Transitional System - JPEG. Week 2 (29/04/24)

Fig 2.14 Final Grid System - JPEG. Week 2 (29/04/24)

Fig 2.15 Final Modular System - JPEG. Week 2 (29/04/24)

Fig 2.16 Final Random System - JPEG. Week 2 (29/04/24)

Fig 2.17 Final Bilateral System - JPEG. Week 2 (29/04/24)

Fig 2.18 Final Exercise 1 (without grids) - PDF. Week 2 (29/04/24)

Fig 2.18 Final Exercise 1 (with grids) - PDF. Week 2 (29/04/24)

Task 1: Exercise 2 - Finding Type

For Exercise 2, we are tasked to extract letterforms from an image of a man-made object (chair, glass, etc.) or structures (buildings), or something from nature (Human, landscape, leaf, plant, bush, clouds, hill, river, etc). Then, we are to analyze and explore at least 4 letterforms and digitize them.

Fig 3.1 Chosen image (rocks)

I searched the internet for patterns in nature and found a picture of cool rocks/crystals with wavy patterns. Upon seeing the image, I immediately got the inspiration to create wave-like letterforms.

Extraction of letterforms

I placed the image in Adobe Illustrator and began tracing some letters I saw using the Pencil Tool. I ended up with the letters U, S, M, V, O, and two versions of D and A.

Fig 3.2 Extracting letterforms

I decided to explore the letters A, V, S, D.

Fig 3.3 Extracted letterforms - Week 2 (29/04/24)

Reference Font

I picked Univers Lt Std Roman 55 to use as my reference font.

Fig 3.4 Extracted letterforms over reference font

Refining Letterforms

I started to refine the letters, first smoothing out the edges and refining the shapes. The letter S was thicker than the rest, so I simplified it to be thinner. Upon shaping the S, I also made the weights of the other letterforms a bit thicker to match the letter S.

Fig 3.5 Refining Letterforms #1

In my third step of refining, I realized that the letters were actually too thick, so I reverted the letters back into thinner forms. In my fourth step, I continued to refine the shapes of the letters, also adding some swiggly shapes to maintain the wave-like patterns from the original image. I tried to make the wave-like elements similar to create a more unified look, making some of the strokes alternating between thick and thin.

Fig 3.6 Refining letterforms #2

After playing around with the Pencil tool, adding and removing certain swiggle shapes, I was finally satisfied with refining the letterforms.

Fig 3.7 Refined Letterforms - Week 2 (29/04/24)

Attempt #2

After the feedback session in class, I decided to try another approach to extracting the letterforms. Instead of tracing the patterns on the rocks, I extracted letterforms from the actual rocks instead, creating a chunkier font.

Fig 3.8 Extracting letterforms #2

Extracted Letterforms

Fig 3.9 Extracted Letterforms #2 - Week 3 (06/05/24)

Reference Font
I picked Futura Sd Extra Bold as my reference font since it has a heavier weight, the direction I'm aiming for.

Fig 3.10 Reference font against extracted letterforms #2

Refining Letterforms
I started to refine the letterforms again, making sure they have a consistent weight, thickness and heights. The D and O had a thinner weight than the A and J, so I gradually increased its thickness while making the A and J slightly thinner to maintain the same weights.

Fig 3.11 Refining letterforms #2

I made the final outcome not perfect strokes to maintain the original nature of the rocks, which aren't perfect in general. As can be seen with the letter A, I reformed it a bit too much in the 3rd step, making it look a little out of place amongst the rest, hence why I decided to reshape it.

Fig 3.12 Refined Letterforms #2 - Week 3 (06/05/24)

The final refined letterforms has a chunky-a bit playful vibe to it, maintaining the origins of the rock I used as my chosen image. Then, Mr. Vinod suggested I add the lines/patterns like in the rocks of my image. I realized the patterns seem to be outlines of the shapes of the rocks, circling the outers and gradually getting smaller and closer to the center, if that makes sense.

Fig 3.13 Studying the rocks

I ended up with two attempts of adding the pattern into my letterforms. After further inspection, I realized the second one is more accurate to the shapes and patterns on the image.

Fig 3.14 Further Refined Letterforms #2

Final Letterforms

Fig 3.15 Refined Letterforms #2 - Week 3 (06/05/24)

Movie Poster

For the final part of this exercise, we are required to utilize our refined letterforms and the original image chosen (or similar images of the same object) and create a final outcome; a movie poster.

I first edited my base picture on Photoshop, adjusting the Hue/Saturation and also Lightness.

Fig 3.16 Photoshop

Then, I downloaded some PNGs of the icons of the film studios to use in the poster. When I first downloaded them they were in black, so I just brought them into Photoshop and inverted the colors.

Fig 3.17 PNGs

Finally, I started working on my poster, I added some text and formatted them accordingly. I placed the letterforms and adjusted the letters a little. At first I used a serif font but then I realized it didn't really match the vibe of my letters so I switched them our for a sans serif font (Futura Std Medium Condensed). For the text, I also added some Gaussian Blur and layered it with another layer of text at 55% Opacity to create a subtle blur and glowy text. To finish it, I added a grain texture.

Fig 3.18 Process on Illustrator

Fig 3.19 Movie Poster #1. JPG - Week 3 (06/05/24)

Movie Poster Attempt #2

I wasn't really satisfied with the outcome of my first attempt, so I decided to go back to my original extracted letterforms and create a poster with that. I implemented the same text, just changed the typeface to a serif font (ITC Garamond Book Narrow). I also kept the same base format for the image and logos.

Fig 3.20 Process on Illustrator #2

I added a dark gray overlay with slight grain to darken the background and add a little bit of texture. Alongside, I also created the same glow-blur effect for the 4 letterforms of my title.

Fig 3.21 Movie Poster #2. JPG - Week 3 (06/05/24)

Fig 3.22 Movie Poster Options - Week 3 (06/05/24)

I felt as if Letterform Refinement #2 isn't too good and frankly quite boring compared to Letterform Refinement #1, so I decided to wait for feedback given in the next class. After the feedback session in Week 4 class, I made some changes and finally decided on Poster #2 and Letterform Refinement #1.

Final Task 1: Exercise 2 - Finding Type

Fig 3.23 Final Image & Extraction - Week 3 (06/05/24)

Fig 3.24 Final Reference Type + Extraction Process - Week 4 (13/05/24)

Fig 3.25 Final Extracted Letterforms. JPG - Week 4 (13/05/24)

Fig 3.26 Final Extracted Letterforms. PDF - Week 4 (13/05/24)

Fig 3.27 Final Extracted letterforms VS. Refined Letterforms - Week 4 (13/05/24)

Fig 3.28 Final Movie Poster. JPG - Week 4 (13/05/24)

FEEDBACK

Week 2 (29/04/24)

General Feedback

- Make sure to update blog regularly (further reading, process)

- For axial system, align text in single axis for better alignment

- Make sure not to tilt the text too much (preferably less than 45 degrees)

Specific Feedback

- Transitional system attempt #1; Mr. Vinod said to make use of more space in the artboard

Week 3 (06/05/24)

General Feedback

- Reference font must reflect the letterform & also image

- Make sure font contains consistent weight

Specific Feedback

- The final outcome is acceptable as I'm using the textures in the rocks instead of the rocks in general

- It would be better if I tried to extract the letterforms from the actual rocks instead

- Use a chunkier/thicker weight as my reference font for this

- Fig 3.12: add lines like the ones in the rocks, make sure to properly study the nature of the lines

Week 4 (13/05/24)

General Feedback

- Interplay the text a bit more, don't just slap the text on the image

- Make sure the image doesn't stand out, but the typography

Specific Feedback

Fig 3.19 Poster #1 (From Mr. Vinod)

- It doesn't work as well as Poster #2 because the title text is too small

- There's a lack in the interplay of the letterforms

Fig 3.21 Poster #2

- Swiggles in letterform reflect the patterns in the rocks better

- Reduce letter spacing & make it bigger

From classmates

- More people preferred Poster #2 in comparison to Poster #1

REFLECTION

Task 1: Exercise 1 - Typographic Systems

It's been a while since I've used InDesign and this exercise helped me refresh my memory on the software, and also some new features (like creating text that follows a certain shape). This exercise was also very insightful as I got to learn the different typographic systems that will help me in my future layouts. It was interesting to learn how to incorporate few graphical elements and colors to enhance a certain design or to highlight key parts of a design.

Task 1: Exercise 2 - Finding Type

This exercise was fun for me, I had an enjoyable time extracting letterforms from a chosen picture. Even though my second attempt was supposed to be a "better" attempt, I still found myself preferring my original idea. This was a learning process for me as it gave me an opportunity to further explore and not just restrict myself to one idea, even though I didn't even end up using it (and possibly took up quite some time).. Nonetheless I liked this exercise and it helped me utilize my previous learning in Typography and creating letterforms.