Advanced Typography | Task 1: Exercises

All elements are organized to the left or right of a single axis.
Information is categorized into groups and arranged along different angles or sides of an axis, which can be straight or curved.

Figure L1.1: Axial System, Week 1 (22/04/2024)

Radial System:

All elements are extended from a point to a focus.
Information spreads out from a central point of focus, with sentences directed towards that point, constituting a radial arrangement.

Figure L1.2: Radial System, Week 1 (22/04/2024)

Dilatational System:

All elements expand from a central point in a circular fashion.
Information can be organized into multiple concentric rings or hierarchically, prioritizing the most important in the inner circles or outer rings, with reading rhythm guiding the placement.

Figure L1.3: Dilatational System, Week 1 (22/04/2024)

Random System:

All elements appear to have no specific pattern/relationship.

Despite its apparent randomness, there's a method to the chaos on the page, challenging those who are mentally organized to adapt to this system.

Figure L1.4: Random System, Week 1 (22/04/2024)

Grid System:

A system of vertical and horizontal divisions, which is common since it is widely used.

e.g. structuring information on a page using various grids, sizes, and weights to establish emphasis and hierarchy.

Figure L1.5: Grid System, Week 1 (22/04/2024)

Transitional System:

An informal system of layered banding.
It involves segregating information into specific bands, such as headlines in one band, middle text in another, and integral information leading to different points in separate bands.

Figure L1.6: Transitional System, Week 1 (22/04/2024)

Modular System:

A series of non-objective elements that are constructed as a standardized unit.
Basically, the units have to be standardized (the red little squares in Figure L1.7 on the left-hand side).
Modular design enables the movement of individual units across different parts of the page by replacing other units, facilitated by their standardization.

Figure L1.7: Modular System, Week 1 (22/04/2024)

Bilateral System:

All text is arranged symmetrically on a single axis.
This system is commonly employed in invitation cards and formal invites, though it can become tedious and occasionally boring depending on its usage.

e.g. applying a single vertical and horizontal axis.

Figure L1.8: Bilateral System, Week 1 (22/04/2024)

InDesign Formatting

To create 3 columns:

Click File > New > Document.
Adjust the settings:

Width: 200 mm
Height: 200 mm
Pages: 2
Facing Pages: [X] *for this particular exercise it's probably good to turn it off*
Columns: 3
Column Gutter: 5 mm
Margins: 10 mm (minimum)

Then click Create.

To combine separate pages into one artboard:

Click the Pages > select both pages > right-click on both pages > turn off Allow Selected Spreads to Shuffle > drag the second page [2] to the first page [1].

As you add pages (click A-Master) on the Pages section, you need to do this step again to combine separate pages together.

To show the pilcrow:

Click Type > Show Hidden Characters (Ctrl + Alt + I).

To separate information from the text:

Highlight the information from the text > Ctrl + X > create another text box (drag the text box) > Ctrl + V in the new text box.

To change the leading:

Increase the leading: Ctrl + Alt + ↓.
Decrease the leading: Ctrl + Alt + ↑.

To add rows:

Select the pages particularly > click Layout > Create Guides > adjust the settings at the section.

To force line break/bring down a particular word (e.g. from In-fluences to Influences):

Put the cursor next to the word you want > press Shift + Enter.

To kerning/adjust the letter spacing:

Click Edit > Preferences > Units & Increments > adjust the Kerning/Tracking to 5.

5 is the appropriate amount.

Alt + →/←.

To change the uppercase numeral to small caps (e.g. from 12 - 12):

Highlight the number > click Small Caps at Character Formatting Controls.

For the time, make sure it is written in lowercase (e.g. AM - am) so it would look consistent with the numeral in small caps.

To em dash for the time (e.g. 9am-10am):

Alt + '-'.

We must use an em dash for time, not a normal dash.

To place the text in the center of the box (Text Frame Options):

Press Ctrl + B > on Vertical Justification, and change the Align to Centre.

Remember:

Keep the font size between 8 to 12.
The leading is always + 3.
The space after always follows the same number as the leading.

e.g. if the font size is 9 pt, then the leading is 12 pt, space after is 12 pt as well.

Recall back the previous task from Semester 1.

Week 2 (01/05/2024)

Typographic Composition

Principles of Design Composition:

Emphasis, isolation, repetition, symmetry and asymmetry, alignment, perspective, rhythm, and contrast.

Figure L3.1: Principles of Design Composition - Emphasis, Week 2 (01/05/2024)

The Rule of Thirds:

A photographic guide to composition.
The intersecting lines are used as a guide to place the points of interest, within the given space.

Figure L3.2: The Rule of Thirds, Week 2 (01/05/2024)

Environmental Grid:

Based on the exploration of an existing structure/numerous structures combined.

Figure L3.3: Environmental Grid, Week 2 (01/05/2024)

Form and Movement:

Based on the exploration of an Grid Systems.
The placement of a form (irrespective of what it is) on a page, over many pages create movement.
The form could represent:

Image.
Text.
Colour.

Figure L3.4: Form and Movement, Week 2 (01/05/2024)

Week 3 (08/05/2024)

Context & Creativity

The Importance of Handwriting in the Study of Typography:

The first mechanically produced letterforms were designed to directly imitate handwriting.
The basis/standard for form, spacing and conventions mechanical type would try and mimic.

Cuneiform:

The earliest system of actual writing.
Written from left to right.

Figure L4.1: Cuneiform - c. 3000 B.C.E, Week 3 (08/05/2024)

Hieroglyphics:

As ideograms to represent the things they actually depict.
As determinatives to show that the signs preceding are meant as phonograms and to indicate the general idea of the word.
As phonograms to represent that sounds that "spell out" the individual words.

Figure L4.2: Hieroglyphs, Week 3 (08/05/2024)

Early Greek/5th C. B.C.E.:

Drawn freehand.
Not constructed with compasses and rule.
No serifs.
In time the strokes of these letters grew thicker, the aperture lessened, and serifs appeared.

Roman Uncials:

By the 4th century Roman letters were becoming more rounded, the curved form allowed for fewer strokes and could be written faster.

English Half Uncials/8th C.:

In England, the uncial evolved into a more slanted and condensed form.

Carolingian Minuscule:

Capitals at the start of a sentence, spaces between words and punctuation.
It was this style that became the pattern for the Humanistic writing of the fifteenth century; this latter, in turn, was the basis of our lower-case roman type.

Black Letter/12-15 C. CE:

Characterised by tight spacing and condensed lettering.
Evenly spaced verticals dominated the letterform.
Condensing line spacing and letter spacing reduced the amount of costly materials in book production.

The Italian Renaissance:

Newly rediscovered letterforms Antica.
The renaissance analysis of form that was being applied to art and architecture was directed toward letterform, resulting in a more perfect/rationalised letter.

Figure L4.3: Letterforms Through The Ages, Week 3 (08/05/2024)

Indus Valley Civilization (IVC) Script/3500-2000 BCE:

The oldest writing found in the ‘Indian’ subcontinent.
Yet undeciphered.
Somewhat logo-syllabic in nature.

Figure L4.4: Indus Valley Civilization (IVC) Script, Week 3 (08/05/2024)

Brahmi Script/450-350 BCE:

The earliest writing system developed in India after the Indus script.
One of the most influential writing systems.

All modern Indian scripts and several hundred scripts found in Southeast and East Asia are derived from Brahmi.

Figure L4.5: Brahmi Script, Week 3 (08/05/2024)

Figure L4.6: Southeast Asia Scripts, Week 3 (08/05/2024)

Description: Scripts of the communities that assimilated into Peninsula Malay communities

Week 4 (15/05/2024)

Designing Type

Reasons for Designing A Typeface:

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:

Research:

Understand type history, type anatomy, type conventions and terminologies.

Determine the type’s purpose or what it would be used for and what different applications it will be used in.

Sketching:

Traditional/digital.

Digitisation:

Professional softwares: FontLab and Glyphs App.
Some designers also use Adobe Illustrator then only the specialised font apps.

Testing:

The results of testing are part of the process of refining and correcting aspects of the typeface.
Prototyping leads to important feedback.
Readability and legibility of the typeface becomes an important consideration.

Deploy:

Even after deployment, a typeface often requires revisions to address issues that were not evident during prototyping and testing.
Rigorous testing is important so teething issue remain minor.

Typeface Construction:

Grids with Circular Forms:

Facilitate the construction of letterforms.
A possible method to build/create/design your letterform.

Figure L5.1: Roman Capital, Week 4 (15/05/2024)

Constructions and Considerations:

Different forms and constructions must be considered when designing a new type.

Fitting The Type:

A visual correction is also needed for the distance between letters.
The letters must be altered to a uniform visual white space - the white space between the letters should appear the same.

Ink Traps:

Generally used when:

Printing on cheap absorbent paper.
When printing is fast and not very precise.

Excess ink gathers at the corners, but with ink traps the corners remain visible.

Figure L5.2: Ink Traps, Week 4 (15/05/2024)

Week 5 (22/05/2024)

Perception & Organisation

Perception:

Deals with the visual navigation and interpretation of the reader via contrast, form and organisation of the content.

Content can be textual/visual/graphical/in the form of colour.

Figure L6.1: Contrast in Typography, Week 5 (22/05/2024)

Contrast:

Adds a two more principles into the mix; texture and direction "to make design work and meaning pop out clearly and unambiguously, and with flair".
There are 7 kinds of contrast:

Contrast of size, contrast of weight, contrast of form, contrast of structure, contrast of texture, contrast of colour, and contrast of direction.

Figure L6.2: 7 Types of Contrast, Week 5 (22/05/2024)

Form:

The overall look and feel of the elements that make up the typographic composition.
Plays a role in visual impact and first impressions.
To represent a concept.
To do so in a visual form.

Figure L6.3: Forms in Typography, Week 5 (22/05/2024)

Gestalt:

In German, means the way a thing has been "placed"/"put together".
Gestalt theory emphasizes that the whole of anything is greater than its parts, based on the idea that we experience things as unified whole.
Gestalt Principles:

Law of Similarity, Law of Proximity, Law of Closure, Law of Continuation, Law of Symmetry, Law of Simplicity (Praganz)...

Figure L6.4: Gestalt Theory in Organisation, Week 5 (22/05/2024)

INSTRUCTIONS

EXERCISE 1: TYPOGRAPHIC SYSTEMS

Week 1 (24/04/2024)

Requirements:

We are only allowed to use Adobe InDesign only.
Size 200 x 200 mm.
In addition to black, you can use one other colour.
Graphical elements (line, dot, etc.) can be used but limitedly.
The 8 systems mentioned above (Axial, Radial, Dilatational, Random, Grid, Modular, Transitional, and Bilateral) are to be explored using the following content:

           The Design School,
           Taylor’s University

           1. All Ripped Up: Punk Influences on Design
           2. The ABCs of Bauhaus Design Theory
           3. Russian Constructivism and Graphic Design
           *Choose 1 from the titles.*

           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

Submissions:

Export final outcomes as JPEG @300ppi (1024 px); PDF with guides and without guides (turn on/off guides when saving PDF). Compile all 8 systems together for PDF presentation (turn off spreads).

Progress:

First Attempt

This was the first attempt I made by following the video tutorials: InDesign Formatting.

Figure E1.1: First Attempt, Week 1 (24/04/2024)

For this exercise, it was an event and open public lecture. The audience wanted to know:

Where it's happening?
Who's speaking?
What it's the time?

Before I started to do this exercise, I looked for the 3 titles from the contents that were given in the requirements. I read them briefly and wrote the meanings/purposes and some graphical elements on each of the titles.

Figure E1.2: General Ideas, Week 1 (24/04/2024)

I decided "The ABCs of Bauhaus Design Theory" as the title for the contents. Then, I started to explore the typographic systems.

Axial System

I realised it wasn't as simple as I thought, it was really struggling to do by myself at first. In my attempt, I placed the title obviously on the left side in a larger font size, while more information was placed on the right side in a smaller font size. This difference in font sizes helped to the readability of the design. Then, I tried putting different shapes on the design, and I think Axial System 2 (Figure E1.4) was better.

Fonts: Univers LT Std 45 Light/55 Roman/65 Bold/65 Bold Oblique.
Graphical elements: Red-coloured rectangles, and a black-coloured line.

Figure E1.3: Axial System 1, Week 1 (24/04/2024)

Figure E1.4: Axial System 2, Week 1 (24/04/2024)

Radial System

To create the radial system, I made two circles on the left and right, and then I applied lines on the circles to see the movement, so I knew how the composition would look. After that, I removed the circles and lines because they looked messy to me. I felt it was quite 'empty' on the design, so I added two red-coloured circles in different sizes to make a contrast between the main title and other info.

Fonts: Futura Std Bold/Book/Heavy/Medium.
Graphical elements: Red-coloured circles, red-coloured text - 'Bauhaus Design Theory', '24', and '25'.

Figure E1.5: Radial System, Week 1 (24/04/2024)

Dilatational System

To create the dilatational system, I made the circle with the Ellipse Tool (L), then applied the Type on a Path Tool (Shift + T). For Dilatational System 1 (Figure E1.6), the title's font size was bigger than the other information. However, I realized a problem from here: too much white space. To improve this I made the font size consistent for Dilatational System 2 (Figure E1.7) readable.

Fonts: Univers LT Std 55 Roman/65 Bold.
Graphical elements: Red-coloured text - 'BAUHAUS'.

Figure E1.6: Dilatational System 1, Week 1 (24/04/2024)

Figure E1.7: Dilatational System 2, Week 1 (24/04/2024)

Random System

To create the disorganised design (chaos), I adjusted the opacity of the title: The ABCs of Bauhaus Design Theory to 20%, then rotated the titles (after copying and pasting) for the background purpose. After that, I emphasized the main title by adjusting to the bigger font size, especially 'BAUHAUS'. I also rotated the other info to fit with the background.

Fonts: Univers LT Std 65 Bold/75 Black/93 Extra Black Extended Oblique.
Graphical elements: Red-coloured text - '24' and '25'.

Figure E1.8: Random System, Week 1 (24/04/2024)

Grid System

For the Grid System, the first two rows are used as white space, creating a clean and spacious look, while the remaining rows are used for content.

Fonts: Univers LT Std 55 Roman/63 Bold Extended/65 Bold.
Graphical elements: Red-coloured text - 'BAUHAUS' and 'Open Public Lectures'.

Figure E1.9: Grid System, Week 1 (24/04/2024)

Modular System

For the modular system, I placed my contents into the squares. The main title was in the middle, and the others' info was placed separately in the other squares.

Fonts: Serifa Std 55 Roman/65 Bold.
Graphical elements: Black-coloured box.

Figure E1.10: Modular System, Week 1 (24/04/2024)

Transitional System

For the transitional system, I designed the layout to evoke the feeling of a staircase. This helps to guide the viewer's eye from one section to the next.

Fonts: Univers LT Std 45 Light Oblique/55 Oblique/65 Bold Oblique/93 Extra Black Extended.
Graphical elements: Red-coloured text - 'Bauhaus'.

Figure E1.11: Transitional System, Week 1 (24/04/2024)

Bilateral System

For the bilateral system, all the text was aligned in the center to create a balanced and symmetrical layout.

Fonts: ITC New Baskerville Std Bold/Roman.
Graphical elements: A black-coloured line and red-coloured text - 'JUNE 24, 2021', 'JUNE 25, 2021', and '12'.

Figure E1.12: Bilateral System, Week 1 (24/04/2024)

Final Submission of Exercise 1: Typographic Systems

Figure E1.13: Final Submission of Exercise 1 - Axial System (JPG), Week 1 (24/04/2024)

Figure E1.14: Final Submission of Exercise 1 - Radial System (JPG), Week 1 (24/04/2024)

Figure E1.15: Final Submission of Exercise 1 - Dilatational System (JPG), Week 1 (24/04/2024)

Figure E1.16: Final Submission of Exercise 1 - Random System (JPG), Week 1 (24/04/2024)

Figure E1.17: Final Submission of Exercise 1 - Grid System (JPG), Week 1 (24/04/2024)

Figure E1.18: Final Submission of Exercise 1 - Modular System (JPG), Week 1 (24/04/2024)

Figure E1.19: Final Submission of Exercise 1 - Transitional System (JPG), Week 1 (24/04/2024)

Figure E1.20: Final Submission of Exercise 1 - Bilateral System (JPG), Week 1 (24/04/2024)

Figure E1.21: Final Submission of Exercise 1 - With Grid (PDF), Week 1 (24/04/2024)

Figure E1.22: Final Submission of Exercise 1 - Without Grid (PDF), Week 1 (24/04/2024)

EXERCISE 2: TYPE & PLAY

Week 3 (08/05/2024)

Requirements:

Select an image of a man-made object (chair, glass, etc.), structure (buildings), or something from nature (human, landscape, leaf, plant, bush, clouds, hill, river, etc).
Ensure that the image does not contain many different elements.
Analyse, dissect, and identify potential letterforms within the dissected image.

Submissions:

Image.
Extracted Letterforms on baseline (Adobe Illustrator).
Reference font - Final letterforms on baseline.
Original extraction.
Final letterforms next to each other.

Progress:

Part 1 - Letterform Extraction

Image:

I choose a honeycomb image from Pinterest for this exercise.

Figure E2.1: Honeycomb, Week 2 (04/05/2024)

Letterform Extraction:

I use the Pen Tool in Adobe Illustrator to trace the letterforms: O, E, S, and Y.

Figure E2.2: Letterform Extraction, Week 2 (04/05/2024)

Reference Font:
The reasons I chose Serifa Std Roman for the reference font are:

Serif Characteristics: Serifa Std Roman's serif has similarities with the extracted letterforms, resulting in an identifiable and harmonious design element.
Modern Aesthetic: The hexagonal shape of a honeycomb is linked with a modern style, which aligns well with the contemporary feel of Serifa Std Roman.

Figure E2.3: Reference Font, Week 2 (04/05/2024)

Refinement Attempt #1:
Observing the extracted letterforms, I found a common characteristic: equal-length sides resulting from the honeycomb's hexagonal shape. However, a problem was made since the letterforms were not uniform in proportion. To solve this matter, I:

Adjust the proportion of extracted letterforms by using Serifa Std Roman as a guide.

Figure E2.4: Refinement Attempt #1, Week 2 (04/05/2024)

Refinement Attempt #2:

I found it quite hard to adjust the shapes with the pen tool, so I created shapes to maintain uniformity.

Figure E2.5: Refinement Attempt #2 - Shapes, Week 2 (04/05/2024)

Figure E2.6: Refinement Attempt #2, Week 2 (04/05/2024)

Refinement Attempt #3:

The letterforms in Refinement Attempt #2 weren't consistent at all because I adjusted the shapes based on the extracted letterforms (pen tool version). To solve this matter, I:

Letter 'O': Decrease the width of the shapes to match with letters 'E' and 'S'.
Letter 'E': Add serifs to make it look consistent.
Letter 'S': Add serifs to make it look consistent.
Letter 'Y': Decrease the width of the shapes to match with letters 'E' and 'S'.

Figure E2.7: Refinement Attempt #3, Week 2 (04/05/2024)

Refinement Attempt #4:

I think the Letters 'O' and 'Y' are fine. However, I realised that the Letter 'S' didn't look consistent with the Letter 'E'. To solve this matter, I:

Letter 'E': Bend the serifs to be more curvier.
Letter 'S': Make the spine (width) look even with the Letter 'E'.

Figure E2.8: Refinement Attempt #4, Week 2 (04/05/2024)

Overall Progression:

Figure E2.9: Overall Progression, Week 2 (04/05/2024)

Part 2 - Poster

Image:

I use this image for the poster.

Figure E2.10: Image for Poster, Week 3 (11/05/2024)

Then, I add gradient and outer glow on my final letterforms to let them blend into the image.

Figure E2.11: Gradient, Week 3 (11/05/2024)

Figure E2.12: Outer Glow, Week 3 (11/05/2024)

I also added some text and a rating label for the poster.

Figure E2.13: Text and Rating Label, Week 3 (11/05/2024)

Final Submission of Exercise 2: Type & Play

Figure E2.14: Image + Extraction, Week 3 (11/05/2024)

Figure E2.15: Reference Type - Serifa Std Roman, Week 3 (11/05/2024)

Figure E2.16: Entire Process from Extraction to Reference to Refinement, Week 3 (11/05/2024)

Figure E2.17: Final Submission of Exercise 2: Part 1 - Type & Play (JPG), Week 3 (11/05/2024)

Figure E2.18: Final Submission of Exercise 2: Part 1 - Type & Play (PDF), Week 3 (11/05/2024)

Figure E2.19: Final Submission of Exercise 2: Part 2 - Type & Play (JPG), Week 3 (11/05/2024)

Figure E2.20: Final Submission of Exercise 2: Part 2 - Type & Play (PDF), Week 3 (11/05/2024)

FEEDBACKS

Week 3 (08/05/2024)

Specific Feedback: Do your final fonts represent the extracted image (the form/characteristic)? Is it consistent? Are they proportional? When you choose the reference of your typeface, it must have a resemblance to the image. You'll get the character if you get a larger portion from the image.

General Feedback: Try to make sure your final font is thick enough, it won't stand out from the poster.

Week 4 (08/05/2024)

Specific Feedback: The poster needs to be able to convey properly and contain logos.

General Feedback: Remember the main thing is your 'Typography', you must emphasize it, not the background image.

REFLECTIONS

Experience

For Exercise 1, it was quite interesting to explore 8 typographic systems with our own design. This helped me to get a better understanding of the purpose of the typographic systems. For example, Dilatational System all elements expand from a central point in a circular fashion. Information can be organized into multiple concentric rings, the most important in the inner circles/outer rings, with reading rhythm guiding the placement.

Observation

I realised my typographic system designs in Exercise 1 were in my comfort zone, which means I didn't try to explore the other possible/challenging ideas while creating the design. Simplicity has its advantages, but it also limits my potential for exploration and creativity.

Findings

Although simplicity allowed focus and control in my designs, it also limited my willingness to take risks. I suggest looking at how different design elements might be used more boldly and imaginatively to push the limits of each typographic system.

FURTHER READING

Figure FR1: Typographic Systems by Kimberly Elam

Reference:

Elam, K. (2007, May 3). Typographic Systems. Princeton Architectural Press.

QUICK LINKS

Projects

Task 1: Exercises

Task 2: Key Artwork & Collateral

Task 3: Type Exploration & Application
Final Compilation & Reflection

Search This Blog

Khu Ying Ying (0357306)