Typography | Task 1: Exercise 1

|| 23/09/24 - 29/10/2024 (Week 1 - Week 6)

|| Te Li Wen, 0367811

|| Typography

|| Task 1

1. LECTURES

1.1 Pre-recorded Lectures

Typo_0_Introduction

Mr. Vinod explains what Typography is and how we see it and use it in our daily lives.

What if Typography?

It is the act of creating letters.

Figure 1.0 Construction grid for letters, Week 1 (28/9/2024)

It is also a form of animation, Typography is also prevalent in most website designs we now often see today.

Calligraphy: A type of writing styles

Lettering: Drawing out the circumference of a letter

Typography: An art and technique of arranging letters in a much more legible, readable and designs that would appeal to the viewers.

Font: Refers to the individual font or weight within the typeface, I.e.: Georgia Regular, Georgia Italic and Georgia Bold.

Typeface: Refers to the entire family of fonts/weights that all shar certain characteristics/styles, I.e.: Georgia, Arial, Times New Roman, Courier.

Typo 0 E-portfolio Briefing

This brief teaches us how to make a basic E-portfolio in a step by step video which includes using the website Blogspot. We learn how to post blogs about our weekly progress in Typography and how to code.😍😍

Basic Settings

Set up a gmail
Basic

Title
Description
Privacy

Publishing

Blog Address

Making a post

Student information
Lecture notes/summary
Instructions
Exercise: Type Expression

Input images of our work

Feedback
Reflections

Paragraph must at least be 5 lines long
Should be divided into 3 explanations experience, observation and findings

Further Reading

Choose any books to read and summarize a certain area which is of interest to us
If it is a site screenshot the site / a book have an image of the cover
Summary of what we read

Typo_1_Development

This lecture emphasizes the importance of context and diverse cultural contributions.

Evolution of Typography: Typography has evolved tremendously, reflecting technology advancements and cultural shifts over centuries.

Cultural Representation: An abundance of innovation in typography come from a variety of diverse cultures, mainly in Asia. It's important to recognize and include these perspectives in design education.

Influence of Tools: The tools which are often used for writing greatly affects the development of letter forms.

Development of Case: The changes from uppercase to lowercase letters allowed more efficient writing and reading, showcasing the adaptability of typography to practical needs over time.

Standardization by Charlemagne: Charlemagne's efforts to standardize writing systems contributed significantly to the clarity and consistency of textual communication, affecting typography's evolution in Europe.

Gutenberg's Impact: The invention of the printing press by Gutenberg marked a turning point in the production of literature, making books more accessible and altering the landscape of typography.

Historical Context Matters: Knowing the history of typography helps designers avoid reinventing the wheel and fosters a much more deeper understanding of their craft.

Typo_3_Text_P1

This lecture focuses more towards formatting, specifically kerning and letter spacing in typography, and the importance of readability in design.☝

Figure 1.1 Anatomy of a Typeface, Week 2 (5/10/2024)

Practice: Practicing everyday in design helps to develop a sense of.

Kerning: Automatic adjustment of letters to improve visual appeal.

Letter Spacing: Adding space between letters for clarity, especially in uppercase letters.

Text Formatting: Importance of alignment (flush left, center, flush right).

Leading: Space between lines of text affects overall readability and should be carefully managed.

Typefaces Matter: Selection of appropriate typefaces impacts the message and comprehension.

Balance: Continuous design practice helps develop sensitivity to typographic details.

Typo_4_Text_P2

This lecture relates to the previous typography concepts, emphasizing text formatting principles crucial for the upcoming projects in the future.

Figure 1.2 Pilcrow and leading, Week 3 (12/10/2024)

Pilcrow (¶): Pilcrow is used to indicate a paragraph from the medieval manuscripts that is seldom used in this day.

Leading (leading*): It is the (line space) between the paragraphs. If the line spacing is 12pt, then the paragraph spacing would be 12pt. This way it will ensure cross alignments for all columns in texts.

Figure 1.3 Indentation and Extended Paragraph, Week 3 (12/10/2024)

Indention: Typically for an indent, it is the same line spacing or the same as the point size of the text.

Extended Paragraphs: This usually creates unusually wide columns of text. However, it is sometimes used as compositional or functional reasons.

Figure 1.3 Orphans and Widows, Week 3 (12/10/2024)

Orphans: An orphan is a short line of type left alone at the start of a new column.

Widows: A widow is a short line of type left alone at the end of a column of text.

Figure 1.4 Highlighting Texts, Week 3 (12/10/2024)

Highlighting Text: If we choose a different font to highlight the text, we should adjust the point size to match the x-height for consistency.

This is to ensure the visual cohesion of the texts.

We must also take note that when highlighting text by placing a field of color at the back of the text, it must be maintained to the left reading axis (right example) of the text make sure readability is at its best.

At times, positioning certain typographic elements outside the left margin, extending rather than indenting, can help maintain a strong visual axis.

Figure 1.5 Headline within Text, Week 3 (12/10/2024)

Headline within Text: It is to clearly signify to the reader the relative importance within the text and to their relationship with each other.

An A head signals a distinct break between topics within a section. It is set larger than the body text, using small caps and bold for emphasis. In the fourth example, the A head is extended to the left for added impact.

B heads indicates a new supporting argument or example topics at hand. As such, they should not interrupt the texts as strongly as A heads do.

C heads are less common but serve to highlight specific aspects within B head text. They are always followed by an 'em' space to ensure visual separation.

Putting together a sequence of subheads = hierarchy.

Figure 1.6 Cross Alignment, Week 3 (12/10/2024)

Cross Alignment: Cross aligning headlines and captions with text type reinforces the architectural sense of the page while articulating the complimentary vertical rhythms.

E.g. 4 lines of caption type (leaded 9pts) cross align with 3 lines of text type (leaded 13.5pts).

Typo_2_Basic

Figure 1.7 Describing Letterforms, Week 4 (19/10/2024)

Describing Letterforms:

Baseline: The imaginary line on the visual line of the letterforms.
Median: The imaginary line defining the x-height of letterforms.
X-height: The height in any typeface of the lowercase 'x'.

Stroke: Any line that defines the basic letterform.

Apex/Vertex: The point where it is created by joining two diagonal stems.

Arm: Short strokes off the stem of the letterform, either horizontal or inclined upwards.

Ascender: The portion of the stem of a lowercase letterform that projects above the median.

Barb: The half-serif finish on some curved stroke.

Beak: The half-serif finish on some horizontal arms.

Bowl: The rounded form which describes a counter. The bowl may either be opened or closed.

Bracket: The transition between the serif and the stem.

Cross Stroke: The horizontal stroke in a letterform that join the two stems together.

Crotch: The interior space where the two strokes meet.

Descender: The portion of the stem of a lowercase letterform that project below the baseline.

Ear: The stroke extending our from the main stem or body of the letterform.

Em/en: Originally referring to the width of an uppercase M, and 'em' is now the distance equal to the size of the typeface.

Finial: The rounded non-serif terminal to a stroke.

Ligature: The character formed by the combination of two or more letterforms.

Figure 1.8 Ligature, Week 4 (19/10/2024)

Stress: The orientation of the letterform, indicated by the thin stroke in round forms.

Swash: The flourish that extends the stroke of the letterform.

Terminal: The self-contained finish of a stroke without a serif. Terminals may be flat, flared, acute, grave, concave, convex, or rounded like a ball or a teardrop shape.

The Fonts:

Uppercase
Lowercase
Small Capitals
Uppercase Numerals
Lowercase Numerals
Italic
Punctuation, Miscellaneous Characters
Ornaments
Roman
Boldface
Light
Condensed
Extended

Comparing Typefaces:

Figure 1.9 Different Typefaces, Week 4 (19/10/2024)

It is very important to understand different typefaces and examine how we feel about the type and specific typefaces. Studying other designer's works would help us on noticing how many people who work seriously with type employs a limited palette of typefaces.

Typo_5_Understanding

Figure 2.0 Baskerville Typeface Letter, Week 5 (27/10/2024)

The uppercase letterforms below suggests symmetry, however it is not symmetrical at all. It is easy to see the two different stroke weights of the typeface Baskerville stroke in Figure 2.0.

Figure 2.1 Univers Typeface Letter, Week 5 (27/10/2024)

Letters: The uppercase letterforms may seem symmetrical, but upon closer observation shows that the width of the left slope is thinner than the right stroke. Both Baskerville and Univers demonstrate the meticulous care a type designer takes to create letterforms that are both harmonious and individually expressive.

Figure 2.2 Helvetica and Univers Typeface Letters, Week 5 (27/10/2024)

Comparing the stem finishes and how the bowls connect to the stems quickly reveals the distinct character differences between the two letterforms.

Maintaining X-Height: The x-height generally describes the size of the lowercase letterforms.

Form/Counterform: The important concept when working with letterforms like lowercase 'r' that have no counters per se. It is mainly to give the reader an easier time to read what has been set.

A way to understand the form and counter of a letter is to examine them in a very close detail. These close examinations provides us a better feel of how the balance between the form and counter is achieved and a palpable sense of letterform's unique characteristics along with giving us a glimpse into the process of letter-making.

Contrast: The basic principles of Graphic Design is applied directly to Typography. Simple contrasts produces numerous variations: E.g. small + organic/large + machined; small + dark/large light...

Figure 2.3 Different Contrast Letters, Week 5 (27/10/2024)

2. INSTRUCTIONS

Task 1: Exercises

Module Information Booklet below

Task 1: Exercises - Type Expression

We were tasked to make sketches of 4 words that the class had chosen. Once the ideas have been selected, we are given a set of 10 typefaces to work with during the digitization phase. Software to use: Adobe Illustrator.

Rules:

Must only use black and white colors
No visual elements or drawings can be utilized unless we are permitted to
Only use the 10 typefaces that were provided

Type Expression Words:

Fancy
Spicy
Bloom
Smoke

Timeframe given:

Week 1 - Week 3 (Deadline on Week 6)

3. Process Work

Research:

Typography involves refining and working with existing typefaces rather than creating new ones from scratch. This process requires designers to make thoughtful decisions, such as selecting an appropriate typeface, determining the point size, adjusting kerning, tweaking line spacing, and ultimately crafting a layout that harmonizes all these elements.

These are some of the images that gave me inspirations for the words

Figure 2.4 Reference images from Pinterest for the words "fancy, spicy, bloom, smoke", Week 1 (27/9/2024). Url

There are numerous ways to transform words into expressive visuals while maintaining a clean, minimalist design. All these words each have their own meaning and could change depending on the impression that is given.

Fancy:

Elaborate/Describing a structure or decoration.
A feeling of desire or liking a certain thing.
Something that is superficial or from an imagination.

Spicy:

A type of flavor often related to a burning sensation.
Something that is exciting or entertaining.

Bloom:

A flower that is cultivated for its beauty.
Represents growth when it is used on a person.

Smoke:

A visible suspension of carbon or other particles in air, typically one emitted from a burning substance.
An act of smoking.
Emit smoke or visible vapor.

Ideation:

After exploring various sources of inspiration, I came up with several ideas that aligned with my style.

Figure 2.5 My sketches for Type Expression, Week 2 (2/10/2024)

For the word 'fancy', my ideas primarily revolved around using cursive writing. I sought objects that symbolized elegance and landed on a trumpet for the letter 'F,' as trumpets were historically used to announce the arrival of high-status individuals who had power.

For 'spicy,' the challenge was that many of the ideas felt too common, and I wanted to avoid accidentally duplicating my classmates' concepts. I explored alternatives and eventually designed letters with spiked ends, symbolizing heat and sharpness. Afterward, I experimented with additional elements to enhance the 'spicy' feel. The last sketch was an attempt to take the most common idea for this word and give it a fresh, distinct twist.

Moving on to 'bloom,' the challenge was that the initial idea—flowers blooming—was the first to come to everyone's mind. I initially thought of light blooming through darkness, but had to scrap that idea due to the restriction on using airbrushes. Instead, I envisioned vines sprouting from the word 'bloom,' with thick leaves at the tips. Another design I created depicted ink blooming and bleeding from the letters, adding a different visual interpretation.

Lastly, 'smoke' was one of the easier designs out of the four. I envisioned smoke emerging from the letters but wasn't sure exactly how or where it would form. I experimented by deforming the 'o' in 'smoke' to give the impression that it was releasing smoke. For another design, I duplicated the word 'smoke' three times and applied the same deformation technique to create a layered, smoky effect.

Figure 2.6 Digitalized Type Expression, Week 3 (8/10/2024)

After contemplating which words to digitalize, I decided to choose the 1st sketch for 'fancy', the 4th sketch for 'spicy', the 3rd sketch for 'smoke' and a combination of the 1st and 2nd sketch for 'bloom'.

I basically retraced my sketches on adobe illustrator without too much changes as shown in Figure 2.6. However, I had to make some minor changes to 'fancy' because the word did not seem fluid to me and my tutor gave me some advice on how I could elevate it better.

Figure 2.7 Final Digitalized Outcome, Week 4 (17/10/2024)

Figure 2.8 Final Digitalized Outcome (PDF), Week 4 (17/10/2024)

Animation Process

Moving on, it is time to choose one out of the four words and proceed to the animation part. For the final work, I chose the word 'bloom' since it was one of the simplest one to animate out of the four.

Figure 2.9 Frames for the Animation, Week 4 (15/10/2024)

I encountered a few challenges while creating the frames for the animation. Some minor mistakes slipped through and only became apparent when I compiled all the frames into an animation in Photoshop. However, aside from these small issues, the process went smoothly. Here is the final animation GIF in Figure 2.9.

Final Outcome:

Figure 3.0 Final Animation Gif, Week 4 (17/10/2024)

Figure 3.1 Final Animation Gif (Embedded), Week 4 (17/10/2024)

Process Work For Text Formatting

Mr. Vinod provided us with instructions and videos on teams for us to better understand how text alignment works and how to do them. We were instructed to type out our names 10 times and change them to the 10 specific typefaces that were given to us on Week 1.

Figure 3.2 Text Formatting Without Kerning and with Kerning, Week 5 (22/10/2024)

Figure 3.3 Overlayed for Better Visualization of Kerning, Tracking and Leading, Week 5 (26/10/2024)

I made some minor fixes in kerning the letters since my 'T', 'L' and 'W' are more further apart compared to the other letters. I compacted them a little more closer since the letters felt awkward when they were too separated from each other.

Figure 3.4 Final Minor Exercise on Text Formatting with Kerning, Tracking and Leading, Week 5 (22/10/2024)

Exercises on Text-Formatting:

For instructions about this exercise, refer to the above. I followed how Mr. Vinod instructed us throughout the video. We are to make sure that there are no rivers, orphans, widows, etc...

Figure 3.5 Body of Text with Kerning and Tracking, Week 5 (22/10/2024)

Layout reference:

Figure 3.6 Pinterest Layout Inspirations, Week 5 (27/10/2024) Url

I spent time researching various layout designs and exploring how others approached their layouts. Through this process, I discovered several styles and arrangements that stood out to me for their creativity and functionality. I carefully selected a few that I found especially appealing and engaging, which inspired me to consider new ways to enhance my own design.

Digital Exploration:

Figure 3.7 Layout Experiments With Grids and Without Grids, Week 5 (27/10/2024)

Figure 3.8 6 Digital Layout Explorations, Week 6 (29/10/2024)

These were my 6 layout designs while waiting for my tutor's approval. I tried making the layouts a little more interesting and changed my style in each layout.

Figure 3.9 Final 6 Digital Layout Explorations, Week 6 (29/10/2024)

In the final 6 layouts, I had to change all the images to books since the images before were not related to typography. Then I did some minor fixes for most of the layouts because it was not fitting the golden ratio. My tutor gave me a lot of advices on how I could improve my layouts more and I tried following what she had told me.

Final Text Formatting Layout

Head Line:

Typeface: Gill Sans Std, Bembo Std

Font/s: Gill Sans Std Bold Condensed, Bembo Std Regular

Type Size/s: 36 pt, 90 pt, 9 pt

Leading: 72 pt, 72 pt, 9 pt

Paragraph spacing: 0 mm

Body:

Typeface: Bembo Std

Font/s: Bembo Std Regular

Type Size/s: 8 pt

Leading: 10 pt

Paragraph spacing: 1mm

Characters per-line: 60

Alignment: left justified

Margins: 123 mm top, 26 mm left + right + bottom

Columns: 2

Gutter: 10 mm

Figure 4.0 Final Digital Layout Exploration (JPEG), Week 6 (29/10/2024)

Figure 4.1 Final Digital Layout Exploration (PDF), Week 6 (29/10/2024)

Figure 4.2 Final Digital Layout Exploration with Grids (JPEG), Week 6 (29/10/2024)

Figure 4.3 Final Digital Layout Exploration with Grids (PDF), Week 6 (29/10/2024)

4. Feedback

Findings

Over the past two weeks of classes, I’ve learned that rushing through the creative process doesn’t lead to good ideas. Whenever I tried to force myself to come up with concepts under pressure, the results were often uninspired or lacking in quality. This made me realize the importance of taking my time. Instead of trying to push through when I feel stuck, I should step back, take a breather, and give myself the space to pause and reset. By allowing myself to continue the next day, when I’m more refreshed and motivated, I can approach the task with clearer focus and better creativity. This change in mindset has helped me understand the value of patience in the design process, and that great ideas often emerge when I give myself time to think rather than rushing through.

6. Further Readings

Figure 4.4 Typography Referenced (5/29/2020) by Taylors University

For my further readings, I chose the book Typography Referenced. As soon as I looked through the first few pages, I was very intrigued by the sign language as I've always found sign language fascinating since I was young.

Figure 4.5 Typography Referenced (5/29/2020) by Taylors University

The front few pages mentions about how typography has an admirable amount of history that evolved over decades and is now what we call typography. This book is essentially for people who seek to be in the typography industry and it covers essential knowledge of the complexity in the subject of typography.

Figure 4.6 Typography Referenced (5/29/2020) by Taylors University

I read page 8 which talks about the centuries starting from 2010s on how the Romans and the Greeks carved out letters on the stone slabs.