Typography - Task 1: Exercises

Our first lecture is the introduction of Typography. It had grown over 500 years ago, the derivative of calligraphy (writing styles), lettering (when you draw the letters), and eventually it became typography. The definition of Typography could be the style of arrangement and appearance of letters, numbers, and symbols. Composition, Layouts, Presenting, and Expressions defines typography.

Typeface: the entire family of fonts.

Fonts: individual font or weight within the typeface.

Figure 1.1, Typefaces

Figure 1.2, Example of Fonts

2. Typo_1 _Development

In this lecture, Mr. Vinod explained about development or timeline of Typography. The definition of writing in the past is scratching into wet clay with sharpened stick/carving into stone with a chisel. The tool we used to write has a critical effect on a style of writing that is created.

Timeline:

A. Phoenician to roman

Latin letter nowadays are derived from Phoenician letter.

Figure 1.3, Phoenician evolution

The greeks developed a style of writing called “boustrophedon”—lines of the text read alternately from right to left and left to right. As they change the direction of reading, they also changed the orientation of the letterforms.

Figure 1.4, Boustrophedon

Old Roman letterforms are actually formed because of the brush strokes from the carvers who draws it to prevent any mistakes before the carve marbles.

Figure 1.5, Carved marble

B. Hand Script from 3rd-10th Century

Figure 1.6, Hand script evolution

- Square capitals: they started using pen but with a broader edge, and it have a slant. As a result, you have a thick and thin stroke, which was the serif.

- Rustic capitals: compressed version of square capitals, harder to read but faster and easier.

- Cursive: forms were simplified for speed (result of writing uppercase fast).

- Uncial: did not have uppercase and lowercase.

- Half-uncial: formalization of the cursive.

- Charlemagne: he introduce uppercase, lowercase, and punctuation.

C. Blackletter to Gutenberg

The styles of the letterforms had been developed. In Northern Europe, a condensed strongly vertical letterform known as Blackletter or textura gained popularity.

Figure 1.7, Blackletter (Futura)

Gutenberg— the people who invented the so-called modern printing. He build pages that accurately mimic the work of the hand scripts. His type mold has a different brush metrics for letterforms.

Figure 1.8, Printed bible made by Gutenberg

Text type classification

Figure 1.9, text type classification

WEEK 2:

1. Typo_2_Basic

In this lecture, Mr. Vinod is describing about letterforms:

Baseline: the imaginary line the visual base of the letterforms

Median: the imaginary line defining the x height of letterform

X-height: the height in any typeface of the lowercase ‘x’

Figure 2.1, Describing Letterforms

Although there are some terms that I already familiar with, there are many that I had not known and just learned it today. These are the terms that I noted down:

1. Apex/vertex: the point created by joining two diagonal stems (apex above, vertex below)

2. Arm: short strokes off the stem of the letterform

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

4. Barb: the half-serif finish on some curved stroke

5. Beak: the half serif finish on some horizontal arms

6. Bowl: the rounded form that describes a counter

7. Bracket: the transition between the serif and the stem

8. Cross stroke: the stroke that cross over the single stem (f/t)

9. Cross bar: the stroke that joins to stems together

Figure 2.2, Technical Terms of Typography

10. Crotch: the interior where two strokes meet

11. Descender: the portion of the stem of a lowercase letterform that projects below the baseline

12. Ear: the stroke standing out from the letterform

13. Em/en: em is a gap between the two words, is a unit of measurement equal to the current font, en is a unit equal to half of an em

14. Finial: the rounded non-serif terminal to a stroke

15. Link & loop: the stroke that connects the bowl and the loop of a lowercase G

16. Leg: short stroke off the stem of the letterform

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

18. Spine: the curved stem of the S

19. Serif: the right angled or oblique foot at the end of the stroke

20. Shoulder: the curved stroke that is not part of a bowl

21. Spur: the extension the articulates the junction of the curved and rectilinear stroke

Figure 2.3, Technical Terms of Typography

22. Stem: the significant vertical/oblique stroke

23. Stress: the thin stroke in round forms

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

25. Tail: the curved diagonal stroke at the finish of certain letterform

26. Terminal: a finished stroke without serif

Figure 2.4, Technical Terms of Typography

Mr. Vinod also explained to us about the type of fonts, such as Roman (Book), Italic, Boldface (Semibold/Medium, Poster/Black), Light (Thin), Condense (Compressed), and Extended. After that, we are given 10 basic typefaces to study before we make it into a typography design. These typefaces are Garamond, Janson, Caslon, Baskerville, Bodoni, Serifa, Futura, Gill Sans, and Univers.

Figure 2.5, 10 Basic Typefaces

2. Typo_3_Text_Part_1

Kerning and letterspacing

Kerning: adjustment of space between letters. The pattern of the word is important because it affects the readability of the text.

Figure 2.6, Kerning Example

Formatting text

1. Flush left: this format most closely mirrors the assymetrical experience of handwriting. Has a ragged right.

2. Centered: this format imposes symmetry upin the text, equal value and weight to both of any line. Ragged right and left. Sometimes difficult to read, should be used sparingly for small amount text only.

3. ⁠Flushed right: this format places emphasis on the end of a line as opposed to its start. Ragged left. Only use this in low amount of text when readability is the priority.

4. ⁠Justified: like centering, this format imposes a symmetrical shape on the text. (Have no ragged sides). As a designer, we have to avoid this as possible because it has gaps.

Figure 2.7, Text Format

Type specimen book

Is a sheet or a book that we decide particular typefaces, shown in different point sizes, leadings, and many combination.

Figure 2.8, Type Speciment

Notes:

1. Balance and readability is important

2. ⁠Never use capital letter using script typefaces

3. ⁠As a designer, we have to know which typefaces are for screen reading purposes and which are not.

4. Three factors that are critical in when deciding readability: type size, leading, and line length.

5. Compositional requirement: text should create a field that can occupy a page or a screen. (Must be balance)

WEEK 3:

1. Typo_4_Text_Part_2

A. Indicating paragraphs

Pilcrow (¶): was used in text to indicate a paragraph spacing
Leading: the space between each space of text. 2.5-3 points larger than the size of the typeface. the paragraph spacing value should be the same as the leading to maintain the cross alignment.
Cross alignment: when you have two columns of text sitting next to each other where the text line is aligned to the next column as well.
Line space: the baseline of one sentence to the descender of the other sentence
Leading: the space between two sentence
Standard indentation is used when the text is justified (don't use it on another alignment)
Extended indentation: creates unusually wide columns of text

Figure 3.1, Leading vs Line Spacing

Figure 3.2, Standard vs Extended Indentation

B. Widows and Orphans

Widows: is a short line of type left alone at the start of new column
Orphans: is a short line of type left alone at the start of new column
Must avoid
Widows and orphans are tolerable in flushed left alignment
When doing kerning and letter spacing, the maximum is plus 3 or minus 3. (Tracking must be 5)
Solution to widows: rebreak your line endings through the paragraph so that the last line of any paragraph is not short.

Figure 3.3, Widows and Orphans

C. Highlighting Text

To make differences emphasis in text:

Italic
Bold/Medium
Change the typeface and make it bold (Change from serif to sans serif, -0.5 pt)
Change the color (Black, Cyan, Magenta)

Placing a field of color at the back of the text

Use Elements (bullets, quotation marks, etc)-> the position is subjective

Figure 3.4, Color Background

D. Headline within Text

The headline should be clear, along with the hierarchy (which one is the headline, sub headline, etc)

Putting together a sequence of subheads: hierarchy

Figure 3.5, Headlines

E. Cross Alignment

Cross alignment reinforces the architectural sense of the page
Double the leading could maintain cross alignment

Top ↑

INSTRUCTIONS

Top ↑

Exercise 1 — Type Expression

1. Sketches

Mr. Vinod gave us six words to explore: Bleed, Glitch, Burn, Shake, Squish, and Noisy. We were instructed to choose four of them, but I decided to sketch all six first in order to review and select the strongest four. I created all the sketches on my iPad using Procreate.

Figure 4.1, my sketches

For this, I use the movement of the word as my reference. I think a lot of how does "Noisy" like in visual, and then I tried to sketch it down, as well as the other words. From the sketch I explored, I decided that the best 4 words are Bleed, Shake, Noisy, and Burn. My favorite are Bleed #1, Burn #1, Noisy #4, and Shake #4 (Personally I love the #2 too, but I think this is mainstream). I decided that the sketches I will digitize is Bleed#1, Burn#1, Noisy#4, Glitch#1, Squish#1, Squish#2, Shake#2, and Shake#4 but with mr.Vinod's advice.

2. Digitization

These are the words that I Digitized. I make a lot of options to choose the best four, and before that, I tested all the 10 fonts to each words to see which ones suits them the best.

Figure 4.2, Font test random

After that, I continue to make the digitized version using the fonts I decided earlier, and these are all my digitized words:

Figure 4.3, First attempt digitized words

I had many hard time to figure out how to make it similar to the sketch, especially the "Noisy" one. The sketch I made is kind of distorted, meanwhile in this task, we must minimize distortion. The problem I face is because the spacing is either too empty or too full. But by the end, I could make it look like this (But I'm satisfied by the result because it still looks like "Noisy":

Figure 4.4, Noisy Sketch vs Digitized

For the "Shake" one, I'm following mr. Vinod's advice last week to make it more scattered in the same size, but differ in the thickness. I like how this turned out.

Figure 4.5, Shake before vs after advice

Also for the "Squish", at first I did not expect much since my sketches are mainstream (not unique enough because I saw that some of my classmate have similar sketch with mine). Mr. Vinod also gave feedback for my "squish" sketch; 2 letter in the middle is in the thin-condensed font, meanwhile others are thick. Keep the line thin (0.50 pt). I had made the one with line, but I prefer the one without the line. For this week, the advice given is maintain the word to be readable (because the before one is a bit unreadable).

Figure 4.6, Squish before vs after advice

For the Bleed, I used a lot of pen tool to modify the bleeding part. Mr. Vinod's feedback is to make the color lighter so that the dripping effect could be more visible.

Figure 4.7, Bleed before vs after advice

Lastly, the "Glitch" and "Burn" word. I like how it turned out, but I prefer the others because this is an average design (not bad but not unique). The "Glitch" one I used the tool pathfinder a lot, meanwhile the "Burn" one I modified it with pen tool and also dropped shadow.

Figure 4.8, Glitch & Burn; Sketch vs Digitized

3. Final Result (Type Expression)

For the best, I finally choose Bleed, Noisy, Shake, and Squish.

Figure 4.9, Type Expression Final Result

4. Type Animation

In week 3, we started to make the animated typography. We are required only to choose one word for the submission. I imagine how would each of those four words I choose moves visually, and finally I decided to make the "Squish" and "Shake" word (I'll choose the best in the end).

a. Squish Animated Typography

The idea for squish is basically the word squished itself, started with all word using bold fonts, squished until the "U" and "I" letter become thin. Firstly, I only use the kerning to "squish". The result turns out to be not as good as I expected, and it also too slow.

Figure 5.1, Squish GIF Attempt 1 Frames

Figure 5.2, Squish GIF Attempt 1

After that, I remake it. This time I stretch it out a little bit and also modify the kerning (only a little). The result is okay, and the "squishing" movement is nice. At first, I use 13 Frames in the photoshop. But I feel like the result is too exaggerated.

Figure 5.3, Squish GIF Attempt 2 Frames

Figure 5.4, Squish GIF Attempt 2

Because of that, I modified it into 8 frames only. I deleted some of the letters that are too stretched and made the delay 0.07s. For this result, it came out as I expected, so I will pick this version of Squish GIF.

Figure 5.5, Squish GIF Attempt 3 Frames

Figure 5.6, Squish GIF Attempt 3

b. Shake Animated Typography

The idea for this word is I imagined a box with a lot of scaterred letters that are been shaken randomly, so I want to make the entire artboard to shake to visualize that. At first, my attempt 1 didn't look like the artboard is shaken (it looks like only the text is shaken)

Figure 5.7, Shake GIF Attempt 1

Seeing that didn't worked, I tried to add a black and white square so it looks more like a box. This time, I use 17 frames for this and 0.06s delay.

Figure 5.8, Shake GIF Attempt 2 Frame

Figure 5.9, Shake GIF Attempt 2

Final Result (Animated Type Expression)

For the final result, I finally choose the Shake GIF one because it was unique and also represents the word nicely. The reason why I didn't pick the "squish" GIF is because it was too ordinary.

Figure 5.10, Type Expression GIF Final Result

Exercise 2 — Formatting Text

Before I started this task, I initially learned kerning and tracking. To practice, I followed the tutorial by Mr. Vinod. I kern and track with the 10 fonts given.

Figure 6.1, Kerning & Tracking Practice (Comparison)

Figure 6.2, Kerning & Tracking Practice (Difference)

1. Process

At first, I attempted to explore all of my ideas to make the layout. I tried to use the 3 column margin and 4 column margin for my initial ideas. For this task, I want to utilize the use of the negative space. I expected the design would turn out to be simple but have a great impact.

Figure 6.3, Text Formatting Draft 1

After making some drafts, I realized that my paragraph are not aligned, and I also found out some mistakes in my first draft. I decided to make another idea. I tried a different margins, grids, and text setting. For this task, I tried my best to maximize the using of negative space so that it will look minimalist and simple.

Figure 6.4, Text Formatting Draft 2

Actually, my personal favorite is the one in the bottom left (the 3 columns one) but I'm not sure about it. So, I choose the one in the bottom right because it has a nice negative space and also the words are readable. I also changed the picture from the draft 1 because it looks more like an architecture picture than design picture. For finalizing, I edited the kerning again to make it more neat.

2. Final result (JPEG & PDF)

HEAD
- Font: Futura Std Bold
- Type Size: 48pt/36pt
- Leading: 42pt/37pt
- Paragraph spacing: 0 pt

BODY
- Font: Futura Std Book
- Type Size: 9pt
- Leading: 11pt
- Paragraph spacing: 11pt
- Characters per-line: 60
- Alignment: Flushed Left

PAGE MARGINS

- Top/Left/Right/Bottom: 44mm/12.7mm/12.7mm/44mm
- Columns: 4
- Gutter: 5mm

Figure 7.1, Final Result

Figure 7.2, Final Result (grid)

UPDATED FINAL RESULT (17/11/2025)(JPEG & PDF):

HEAD
- Font: Futura Std Bold
- Type Size: 48pt/36pt
- Leading: 42pt/37pt
- Paragraph spacing: 0 pt

BODY
- Font: Futura Std Book
- Type Size: 9pt
- Leading: 11pt
- Paragraph spacing: 11pt
- Characters per-line: 60
- Alignment: Flushed Left

PAGE MARGINS

- Top/Left/Right/Bottom: 44mm/12.7mm/12.7mm/44mm
- Columns: 4
- Gutter: 5mm

Figure 7.3, Final Result (Updated)

Figure 7.4, Final Result (Updated)

Top ↑

FEEDBACK

WEEK 2

Specific Feedback:

The strongest are Bleed #1, Burn #1, and Noisy #4.
Burn #3: the 'fire' should be above the word "BURN"
Glitch: he told me to consider which sketches is the best
Squish #1: Make sure the line is thin (0.5 pt), take a very condensed-thick and put it together very close. the middle 2 letter use condensed-thin
Shake #1 and #2 could work
Shake #4: could be done more scattered, same size, and only a view letter is bold.

General Feedback:

Minimize distortion
The words have to be readable
Create contrast, increase communication
Composition, stability, symmetry is important

WEEK 3

Specific Feedback:

The "BLEED" color could be more lighter so that the bleeding could be more visible
Squish is not really readable
Do not change the fonts in the template (must be Univers LT STD Roman, 7 pt)

General Feedback

Do not add any unrelated movement into the animation
Choose the best design by yourself because it shows your critical thinking

WEEK 4

Specific Feedback:

Mr. Vinod prefer the shake GIF one

General Feedback:

Further reading must be updated every week
Don't use the ''–" in the top, just use the code that mr. Vinod give
The process should be clear in the e-portofolio

WEEK 5

General Feedback:

Make sure every design is readable, not only prioritizing the design (shapes, etc).
The number of column above 3 is not recommended

WEEK 9 (Updates)

Specific Feedback:

Mr. Vinod suggested me some arrangements for the text headline in text formatting.

Top ↑

REFLECTION

Experience

This is my first time doing typography, and it really takes me to explore new things. I learned how to be more creative with letters, how to bring words into something that can be alive visually. It was really challenging (I crashes out during the first week), but also making my skills improve through a lot of practices. Using Adobe Illustrator for the first time was also stressful because I'm still not used to it, but now I'm starting to get it.

Observations

Typography may seem simple, but when you learn it, you realize that it was very detailed and complicated that even every 5 pt of kerning could affect the arrangement of the text. Beside that, I found out that by just walking and be aware of your surroundings could trigger new ideas for our designs. I realized that learning typography also requires a lot of reading, not only practices.

Findings

From this task, I learned to pay attention to small details while I keep exploring for my designs. I realized that I need to be more observant to my surroundings to explore ideas and also read more books. And of course, keep practicing my adobe illustrator & In design skill.

Top ↑

Search This Blog

Cherilynn Farrencia Faustine (0384745)

Typography - Task 1: Exercises

Comments

Post a Comment

Popular Posts

Typography - Task 3: Type Design & Communication