Typography: Task 1 Exercises

23.09.2024 - 21.10.2024 / Week 1- Week 5

Angelique Svetlana Pekasa / 0377365

Typography / Bachelors Of Creative Media / Taylor's University

Task 1: Exercise 1

Lectures
Instructions

Research and Ideation

Feedback
Reflections
Further Reading

Lectures

Week 1

Lecture 1: Typo_0_Introduction

Typography is the act of creating letters to make it appealing, readable, and legible. This lecture highlights a lot of terminology, such as:

Logotype is a mark consisting of letters that will represent a brand.
Lettering is drawing the letters out while calligraphy is the writing style.
Font is the individual font or weight within a typeface.

Fig. 1.1 Fonts, (week 1, 23/09/2024)

Typeface is the whole family of font or weight that share similar characteristics.

Fig 1.2 (Typefaces), (week 1, 23/09/2024)

Lecture 2: Typo_1_Development

Early letterform development: Phoenicion to Roman

Phoenicion wrote from right to left, while Greeks read and wrote alternately from right to left and then left to right (boustrophedon).

Fig 1.3 (Boustrophedon), (week 1, 23/09/2024)

Roman and Etruscan first paint letterforms on the marble before carving into them, which changes the strokes of the letterforms

Hand script from 3rd-10th century C.E.

Square capitals and rustic capitals were developed, rustics capitals are compressed version of square capitals which is faster to write, however it's harder to read.

Fig 1.4 (Left, square capital ; Right, rustic capital), (week 2, 24/09/2024)

Uncials are small letters which incorporate both elements of uppercase and lowercase. Half- uncials are the first official formal lowercase letterforms.
Charlemagne sets a standard for calligraphy by issuing an edict, making communication clearer.

Text type classification

Fig. 1.4 (text type classification), (week 1, 24/09/2024)

Week 2

Lecture 3: Text_3_P1

Kerning and letter spacing

Kerning: Automatic adjustment of space between letters.
Letterspacing: To add space between letters .
Tracking: The use of both kerning and letterspacing in a word or sentence (when tracking is done it reduces the recognizability of the letters as the pattern changes).

Formatting text

Flush left: Each lines starts at the same point but ends differently, depending on the last word on each line.
Centered: Imposes symmetry upon the text, every line have equal weights and value on both ends.
Flush right: Places emphasis on the end of a line as and not at the start of it
Justified: Manipulate the symmetrical shape on the text by expanding or reducing spaces (creating rivers) between the words. (Must be avoided).

Texture

Figure 1.5 (anatomy of a typeface), (week 2, 01/10/2024)

A good typographer should choose the right typeface according to the message they want to convey and also consider its texture and color. A text is more readable when the x-height is larger than the ascender and descender.

Leading and Line Length

Type size: size of text should be large enough to be read easily at arm's length.
Leading: Text can't be set too tightly as readers can easily loose track or too loosely that it creates patterns causing distraction.
Line length: Shorter lines require less reading while longer lines require more. However, extremely long or short line lengths will impair reading.

Type specimen book: a reference book showcasing samples of typefaces in a range of sizes. Its purpose is to give a precise reference for type, type size, type leading, and etc.

Week 3

Lecture 3: Text_Part_2

Indicating paragraphs:

Pilcrow (¶), was used to indicate paragraph space in medieval manuscript (rarely used nowadays)
Line space, if line space is 12pt then paragraph will also be 12pt, this ensures cross-alignment across columns of text.
Leading: space between 2 sentences, Line spacing: descender 1 sentence to the descender of the other sentence above it.
Standard indentation and extended paragraphs

Figure 1.6 (Standard Indentation (left) vs Extended Paragraphs (right)), (week 3, 9/10/2024)

Widows and Orphans

Widows and orphans are serious blunders or mistakes that should be avoided

Widow: a short line of type left alone at the end of a text column (the solution to it is to rebreak line endings)
Orphan: a short line of type left alone at the start of a new column (the solution is to reduce line length of the column)

Figure 1.7 (Widow and orphan), (week 3, 9/10/2024)

Highlighting Text

A text could be emphasize by making it italics, bold (could also change it's typeface in bold), change it's color (black, cyan, and magenta), or highlighting the area behind the text.
Reduce point size by 0.5 when changing the type family
Extending typographical elements outside the column margin (ex. bulletin points, quotation marks).

Headline within Text

A heads marks a clear break between topics within a section
B heads introduce new supporting points or arguments
C heads draws attention to specific facets of material within B head text

Week 4

Lecture 4: Typo_2_Basics

Describing letterforms

Fig. 1.8 (describing letterforms), (week 4, 15/10/2024)

The font

Make sure to work with full fonts containing:

Uppercase
Lowercase
Small capitals (uppercase letterforms draw to the x-height of typeface)
Uppercase and lowercase numerals
Italic
Punctuation, miscellaneous characters
Ornaments

Describing typeface

Fig. 1.9 (describing typeface), (week 5, 15/10/2024)

Fig. 1.10 (Top 10 essential typefaces), (week 5, 15/10/2024)

Comparing Typefaces

It's important to see the differences between typefaces and not it's similarities. Each typefaces have different weight, x-height, widths, and etc. This allows them to convey different message and expression which is why it's significant to choose the right typefaces.

Instructions

Task 1: Type Expression

In this task, we are provided with 6 words: Pull, Explode, Chop, Rush, Wind, and Tangle. We are asked to choose 4 of this words and make a sketch for it. For this I choose the word Chop, Explode, Pull, and Tangle.

Research and Ideation

Typography is using existing typefaces rather than making new ones, so for this project I won't be able to make graphic images in order to give meaning to the words. Instead I should come up with layouts and choose the right fonts. To do this we need to know each meaning of the word. Here are those meaning I found on the cambridge dictionary.

Cut: to break the surface of something, or to divide or make something smaller, using a sharp tool, especially a knife.

(source: https://dictionary.cambridge.org/dictionary/english/cut)

Pull: to move something towards yourself, sometimes with great effort

, to move in a stated direction

(source: https://dictionary.cambridge.org/dictionary/english/pull)

Explode: to break up into pieces violently, or to cause something to do this

(source:https://dictionary.cambridge.org/dictionary/english/explode)

Tangle: an untidy of things that are not in a state of order, or a sate of confusion or difficulty

(source: https://dictionary.cambridge.org/dictionary/english/tangle)

I also searched a lot of reference from google and pinterest. Here are some images of reference that i got compiled in one picture.

Figure 2.1 (reference for chop), (week 1, 24/09/2024)

For the word chop, I want the words to be cut one way or another. I also think that the meaning of the word chop could also be extended as a chopstick. I also reference from the word slice as it have similar meaning to cut. However the word chop from the reference above have too many graphic elements, which I don't want.

Figure 2.2 (reference for explode), (week 1, 24/09/2024)

For the word explode I want the words to scatter as an effect, and also increase in size to make it more dramatic. I might also change the fonts of it to make the changes more visible.

Figure 2.3 (reference for pull), (week 1, 24/09/2024)

For the word pull, I want either the words to all be pulled towards a point, or the letter "u" to act as a magnet to pull the rest of the letters. There might be some distortions made to make the effect that the words are being pulled.

Figure 2.4 ( reference for tangle), (week 1, 24/09/2024)

For the word tangle, I want the words to form an invisible knot to make the illusion that the word tangle is tangled within itself. Another idea that I have is to make the words intertwine with each other.

From the research and ideation above I created 2 to 3 sketches for each words, Below are my sketches done on clip studio paint.

Figure 2.5 (sketches), (week 1, 25/09/2024)

Digitalization

It was my first time using Adobe Illustrator so it was a quite hard for me to find my way through it as it was a new workspace.

Figure 2.6 (exploration), (week 2, 3/10/2024)

Above are some of my exploration for the words pull, tangle, and chop. I tried using different fonts and type faces for pull and chop. It was a bit tricky to make the word tangle into a knot since it needs a lot of rotation. After more exploration I settle with this four outcomes, shown below.

Figure 2.6 (digitalization version 1), (week 2, 3/10/2024)

In week 3, our digitalization outcomes was reviewed by Mr. Vinod, Mr. Vinod approves the words explode, chop, and pull. However, for the word tangle, he said that it needs more elaboration, more entanglements. So I improvise it and made the the entire space filled with entanglements. Below are the final outcome for all the words.

Figure 2.7 (Final digitalization outcome), (week 2, 4/10/2024)

Final Type Expression PDF

Animation

We were introduced on how to make animation by using adobe illustrator and then adobe photoshop. I first choose the word chop and use adobe illustrator to make 7 frames. Then I input this frame in photoshop to make a short animation.

Figure 2.8 (chop animation process), (week 3, 9/10/2024)

Figure 2.9 (chop animation process), (week 3, 9/10/2024)

After that I export the file and make it a gif, below is the final result.

Figure 2.10 (chop animation), (week 3, 9/10/2024)

However I am not satisfied with the results, so I pick another word, explode. Then I redo the process from the start.

Figure 2.11 (explode animation process), (week 3, 10/10/2024)

Figure 2.12 (explode animation process), (week 3, 10/10/2024)

For the explode animation, there are a total of 13 frames put together into gif, below is the final result.

Final animated type expression

Figure 2.13 (explode final result), (week 3, 10/10/2024)

Task 1: Exercise 2 - Text Formatting

For this exercise we are tasked to create a final layout which involves kerning, tracking, paragraph spacing, and etc. We are provided with a total of 4 lectures divided into 5 videos which provides exercises needed to practice skills required for the final outcome.

Lecture 1/4: Kerning & Tracking

For this exercise I tried to choose fonts that differ from each other to experiment and explore more on kerning & tracking. I also tried to make the overall presentation more appealing by putting bold fonts on the top and on the bottom of the page.

Figure 2.14 (without kerning & tracking), (week 4, 15/10/2024)

Figure 2.15 (with kerning & tracking), (week 4, 15/10/2024)

Fig. 2.16 (with kerning & tracking alongside without overlayed to show the difference), (week 4, 15/10/2024)

Lecture 2/4: Text formatting

In this exercise I became more familiar with InDesign, I learned that the number of character within a line should be around 55-65, point size could be anywhere between 8-12pt, leading should be 2-3pt larger than the it's point size.

Fig 2.17 (text formatting), (week 4, 16/10/2024)

Lecture 3/4: Type Formatting

Rule of thumb: can't track more than or less than 3 times.

Fig. 2.18 (inserting pictures), (week 4, 17/10/2024)

Fig. 2.18 (type formatting, with hyphenation, before tracking ), (week 4, 17/10/2024)

Fig. 2.18 (type formatting, without hyphenation, after tracking), (week 4, 17/10/2024)

Lecture 4/4: final layout

Fig 2.19 (trial layout), (week 4, 17/10/2024)

This is my first attempt on creating a layout. I wanted the title to be horizontal to make it stand out. However, I realized that with this layout I couldn't show my understanding of cross-alignment so I made another layout. I also realized that there's a widow at the end of the third and forth paragraph so I fixed it by using a forced line break.

Fig. 2.20 (trial layout), (week 4, 19/10/2024)

Fig 2.21 (layout), (week 4, 19/10/2024)

In class, Mr. Vinod mention on how forced line break shouldn't be use a lot so I redo the 4th paragraph as it contains a lot of forced line break. Below is the final layout version alongside it's guidelines.

Fig 2.22 (final layout), (week 4, 21/10/2024)

Final Layout PDF

HEAD LINE
Typeface: Univers LT Std
Font/s: Univers LT Std 55 Roman
Type Size/s: 64 pt
Leading: 66 pt
Paragraph spacing: 0

BODY
Typeface: Univers LT Std
Font/s: Univers LT Std 55 Roman
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Average characters per-line: 59
Alignment: left justified
Margins: 12.7 mm top, 12.7 mm left + right + bottom
Columns: 4
Gutter: 5 mm

Feedback

Week 1 (Introduction)

Week 2

General feedback: The font should be readable and should contain minimal graphics. We should also consider the place in which the words will sit in.
Specific feedback: There's no need of elongation in the word chop. And 1 version of the word tangle is not readable. Overall most of the sketches could be made onto the next stage which is digitalization.

Week 3

General feedback:The works submitted should be final. This meansthat there should only be 1 version of each word submitted, as we should learn on making decisions by ourselves. To make decisions easier you should take a break from seeing your work and see it again after taking a rest as how you view it will change.
Specific feedback: The word pull, chop, and explode are good already, however for the word tangle requires more elaboration. So to elaborate it Mr. Vinod suggested to fill up the entire square.

Week 4

General feedback: We can use motion blur to create effects. We can find fonts that is already condensed in nature to minimalized the use of distorting as distorting is usually not recommended. In our animation we could also pause for effect, this means that we add extra frames to make the animation stop before it repeats itself.
Specific feedback: The animation for the word explode and all the fonts made are all good. The word tangle is approved already (since last week it requires more elaboration).

Week 5

General feedback: White areas present in the layout is good as it gives room to breath for the readers. We don't need to have a huge headline as it's only an A4 paper, not a news paper. Not only that, we couldn't use a bold typeface for the entire text as bold is only used for highlighting.
Specific feedback: Overall the layout is good and well balance, however line break should be minimized. There should also be more space between the headline and the name.

Reflections

Experience:

Typography was my very first class as I stepped into college, I was first very overwhelmed with all the task I have to do. I barely know how to find my way into this new software, adobe illustrator and also indesign which was introduce at week 4. But as I watch the video tutorials provided I began to understand and no longer felt overwhelmed by it. I also learn how to manage my time wisely in order to finish all my task in time.

Observation:

By week 2, I observed that there's actually a lot going on behind the scene in order to make a good font and layout. I also figure out that this major is more onto doing a lot of practical learning outside of class, unlike school which focuses more on lectures inside of class.

Findings:

I've discovered that typography is more complex than it seems, although it might seems very simple. There's a lot of terms and sets of rules that we need to remember to make a good layout. I also learned to record every process that I do and all the sketches made as it is part of the progress.