Typography - Task 1 : Exercises

September 24, 2024

Typography - Task 1 : Exercises

0px; visibility: hidden;" />

24 September 2024 - 22 October 2024 // Week 1 - Week 5

Racheal Tan Tze Rou // 0381005

Typography // Bachelor of Design (Hons) // Creative Media

Task 1 : Exercises

1. Lecture Notes

2. Instructions

3. Exercise 1 : Type Expression
3.1 Research & Inspiration
3.2 Sketch

3.3 Digitalization

3.4 Static ; Result

3.5 Animation

3.6 Animation ; Result

4. Exercise 2 : Text Formatting

5. Feedback

6. Reflection

7. Further Reading

LECTURE NOTES

Week 1 // Typo_0_Introduction

What is typography?

the act of creating letters, the creation of typefaces

Where will we find typography?

animation
website design
app design
signage design
bottle labels
books and posters

Typography has evolved over 500 years from calligraphy > lettering > typography

Font VS Typeface

Example of Fonts:

Regular
Bold
Italic
Bold Italic

Example of Typefaces:

Georgia
Helvetica
Trebuchet
Baskerville

In conclusion, Font ≠ Typeface

Typo_1_Development

*Disclaimer* : All the information presented here, is written from the perspective of the western world.

Early letterform development : Phoenician to Roman

Letterforms or scripts that have been developed on the pretext of the kind of tools, it has a major role in crafting the type of scripts that have eventually developed.
For Semitic peoples, they developed a style of writing called 'boustrophedon', while alternately writing the text from left to right, then right to left.
For Etruscan, they draw the words with a paintbrush to develop the strokes based on the tools they're using to carve on marbles, and they turned out to be the letters or letterforms that we see today.

Figure 1.1.1 ; Development of Letterforms

This is how the letter developed over a period of time within 1000 B.C.E .

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

Square Capitals

4th to 5th century
thick contain stroke
added the serifs

Rustic Capitals

late 3rd to mid 4th century
a compressed version of square capitals
took far less time to write
harder to read

Roman Cursive

4th century
simplified for speed
development of lowercase letterform was the result of writing uppercase letterform quickly

Uncials

4th - 5th century
did not have uppercase or lowercase letterform

Half-uncials

C. 500
further formalization of the cursive hand

Caloline minscule

C. 925
standardized to convey messages more accurately and precisely

Blackletter to Gutenberg's type

Blackletter (Textura)

C. 1300
developed because of the people's style

42 line bible, Johann Gutenberg, Mainz

C. 1455

Figure 1.1.2 ; Text type classification

Week 2 // Typo_3_Text P1

Text / Tracking: Kerning and Letter spacing

Kerning: the automatic adjustment of space between letters.
Letter spacing: To add space between the letters.
Tracking: The addition and removal of space in a word or sentence
Counter form: black spaces in between the white letterforms

Figure 1.2.1 ; Tracking

Letter spacing increased, readability of the word of sentence reduced.

Figure 1.2.2 ; Anatomy of a Typeface

Text / Formatting Text

Flush left:

the most natural way of formatting text
mirroring a symmetrical experience, each line starts at the same point but ends wherever the last word ends
spaces between the words are consistent throughout the text allowing the type to create an even greater value
ragged right

Centered:

not advisable, difficult to read
should be used for small amounts of copy or text
ragged right & left

Flush right:

should be used for small amounts of copy or text
ragged left

Justified:

Justified
justified produce 'rivers', which is the white spaces in between the words due to the justification of the text

Text / Leading and Line Length

Type size:

The text should be large enough to read easily at arm's length.

Leading:

Text that is set too tightly encourages vertical eye movement; the reader can lose its place.
A type that is set loosely creates stripped patterns that distract the reader.

Line length:

Line length between 55-65 characters occupy one sentence

Text / Type Specimen Book

Enlarge type to 400% on the screen so that we can see clearly between descenders on one line and ascenders one the line below

Week 3 // Typo_4_Text P2

Text / Indicating Paragraphs

(¶) 'pilcrow', a holdover from medieval manuscripts seldom use today

Line space VS Leading

Leading space is a space between two sentences, while the calculation for line spacing starts with the descender from one sentence to the descender of another sentence

Leading:

Each line of text is given a leading, the descender of the text does nit touch the ascender of the next line of text

the thickness can be varied

Widow:

A short line of type left alone at the end of a column of text

Orphan:

A short line of type left alone at the start of a column of text

We should avoid Widow and Orphan

Avoid widow & orphan by reducing the column width or the column height on one side, then introduce a second line

Option/Alt +Right/Left arrow key for kerning and letter spacing

only maximum plus 3 or minus 3 to avoid the spacing of the text to look different from the other line

Text / Highlighting Text

How to highlight important text?

Use Italic
Use Bold
Change color of the text (Black, Cyan, Magenta, Yellow)
Create a box
Use Quotation marks " " (only for small body of text)

Reduce the point size by 0.5 of the highlighted text when changing type family

Reduce point size of number in large amount of text by 0.5 because numbers usually stick out, but not when designing a book

Double the leading to remain the crosse alignment

Week 4 // Typo_2_Basic

Basic / Describing letterforms

Figure 1.4.1

Baseline: The imaginary line the visual base of the letterforms
Median: The imaginary line defining the x-height of letterforms
X-height: The height of lowercase 'x' in any typeface
Optical adjustments: To give the impression that the letters are all having equal height. Capital letters are smaller than the lowercase letter that has a stem stroke that reaches towards the ascender height, because capital letters are wider and have more surface area at the top

Figure 1.4.2 ; Describing letterforms

Stroke: Any line that defines the basic letterform
Apex/Vertex: The points that joined two diagonal stems, apex above & vertex below
Arm: The short strokes that extends from the stem stroke
Ascender: The stem of a lowercase letterform that projects above the median
Barb: Half-serif of a curved stroke
Beak: Half-serif finish on some horizontal arms
Bowl: A rounded form in the letterform that looks like a bowl; it may be either open or closed
Bracket: The transition between the serif and the stem
Cross Bar: What connects the stem stroke
Cross Stroke: The horizontal stroke that you see in lowercase letterform like t/f
Crotch: The interior space where two strokes meet
Descender: Anything below the baseline
Ear: The stroke extending out from the main stem
Em/En: Em is the gap space between words. En is half the letter of an em
Finial: The rounded non-serif terminal to a stroke
Leg: A short stroke that extends from the main part of a letter
Ligature:

Ligatures Part 1 – Standard - Fonts.com | Fonts.com

Figure 1.4.2 : Example of Ligature

Link: The stroke that connects the bowl and the loop of a lowercase 'g'
Loop: The bowl created in the descender of lowercase 'g' in some typefaces
Serif: The right-angled or oblique foot at the end of the stroke
Shoulder: The curved stroke that is not part of a bowl
Spine: The curved stem of the S
Spur: The extension the articulates the junction of the curved and rectilinear stroke
Stem: The significant vertical or oblique stroke
Stress: In round forms, the orientation of the letterform that indicated by the thin stroke. When written in hand, it tends to be slightly slanted, so by mimicking handwriting, the stress part was created
Swash: The flourish that extends the stroke of the lettterform. Never use swashes in capital letters together to form a word
Tail: The tail of the letterform like 'Q'
Terminal: The self-contained finish of a stroke without a serif

Week 5 // Typo_5_Understanding

Letters

Some minimal changes of the strokes were created to create delusion to create harmony

Letters / Maintaining x-height

Figure 1.5.1 ; example

Curved strokes like 'S' must rise above the median to optically look the same size as the vertical and horizontal strokes they adjoin
When the letter has lesser real estate, it will technically look smaller compared to the other letter

Letters / Form / Counterform

As mentioned earlier, the adjustment of the letterforms increases or decreases readability
Analyze the existing typeface to understand the form that you are designing

Figure 1.5.2 ; variation

Important to put different font together to differentiate different sets of information to create contrast

INSTRUCTIONS

TASK 1 : EXERCISE 1

TYPE EXPRESSION

Week 1

For task 1, we were asked to choose four words and to express the meaning typographically. Besides, we also learned how to open a blog website to create our own E-portfolio. Then, we voted in class and ended up choosing the following four words for our first task:

-Jump

-Fish

-Chop

-Shake

We should create typography that best describes the four words by using the 10 typefaces provided. For the first step, I did some research and found some inspiration from the internet.

Research&Inspiration:

Figure 2.1 ; Research

After that, I sketched my ideas using Procreate.

Sketch:

Figure 2.2 Sketch (24/9/2024)

Week 2

After sketching out the ideas, we uploaded the sketch to Facebook. Next, I digitalized the sketch by using Ai.

First outcome:

Figure 2.3 First outcome ; JPEG (30/09/2024)

After consulting with Ms. Vitiyaa, I chose a design for each word, then finalized it.

Digitalisation second attempt:

Figure 2.4 ; Digitalization second attempt ; JPEG (8/10/2024)

Week 3

Ms. Vitiyaa told me that my work was too distorted, so I had to rework it.

I came up with some new ideas for my third digitizing attempt.

First, for 'JUMP', I thought of the 'U' as a big hole for the other letters to jump into. And I also put the letter 'J' higher up to make it looked like it's jumping.

Secondly, as for the 'FISH', I didn't changed much from my second attempt, I just replaced the distorted word with a normal typeface, 'S' as the body of the "fish" and 'I' as the tail of the "fish". Moreover, I added some bubbles beside the "fish" to make it more like being under the water.

Furthermore, the 'P' in 'CHOP' acts as a knife that cut apart letters that sticked together.

Lastly, I designed 'SHAKE' as a stacked tower with letters, but made the letters 'S', 'H', and 'A' look like they were unsteady and shaking precariously on top of the letter 'K' and letter 'E'.

Final Result of Type Expression Static:

Figure 2.5 ; Static Final Result ; PDF (16/10/2024)

Figure 2.6 ; Static Final Result ; JPEG (16/10/2024)

Animation:

When I first started working on the animation, I decided to choose the word 'FISH'. I made the exclamation marks in the bubbles turned into letter 'F' and letter 'H', then moved the "fish" from left to right to make it looked like it's swimming into the center of the frame.

However, Ms. V told me that my animation wasn't smooth enough and suggested not moving the letter 'F' and letter 'H'.

Figure 2.7 ; animation trial ; GIF (15/10/2024)

I still went with the 'FISH' from the static third attempt for my second trial of animating, I created my animation first using Ai by slightly moving the words and adding more bubbles to each frames. I only changed each frame slightly to make the animation look less stiff.

Figure 2.8 ; animation process in Ai

After that, I exported them into Ps and arranged them in order. For each frame, I set them to 0:04s to make sure the animation would be smooth enough.

Figure 2.9 ; animation process in Ps

Final Result of Type Expression Animation :

Figure 2.10 ; 'FISH' Animation ; GIF (16/10/2024)

Week 4

TASK 1 : EXERCISE 2

TEXT FORMATTING

By following the (Typo_Ex Text formatting 1:4 - Typo_Ex Text Formatting 4:4A) video tutorial, I did kerning and tracking with my name using the 10 typefaces provided.

Figure 3.1 ; without kerning (20/10/2024)

Figure 3.2 ; with kerning (20/10/2024)

Next, we were tasked to format the text with Adobe InDesign.

Below are the things to look out for when completing Task 1, Exercise 2 Text Formatting:

Font size (8–12)
Line Length (55–65/50–60 characters)
Text Leading (2, 2.5, 3 points larger than font size)
Paragraph spacing (follows the leading)
Ragging (left alignment) / Rivers (Left Justification)
Cross Alignment
No Widows / Orphans

Figure 3.1 ; kerning process (20/10/2024)

I tried out with 6 different layout compositions

Figure 3.2 ; layouts (22/10/2024)

After consultation with Ms. V, I finally chose the design #4 because #4 reflects a modern and minimalist aesthetic that complements the Helvetica theme, which is often associated with clean, simple design. Despite the vertical title, the rest of the text follows a traditional flow, making it easy to read and follow without too much disruption. Also, I applied golden ratio to the layout #4 to make it a visually balanced, and aesthetically pleasing composition.

Figure 3.3 ; Application of golden ratio to layout #4

FINAL text formatting layout :

HEAD LINE 'I AM'

Typeface: Gill Sans

Font/s: Gill Sans SemiBold
Type Size/s: 30 pt
Leading: 36 pt
Paragraph spacing: 0

HEAD LINE 'HELVETICA'

Typeface: Gill Sans

Font/s: Gill Sans Bold
Type Size/s: 65 pt
Leading: 11 pt
Paragraph spacing: 0

HEAD LINE 'by John Doe''

Typeface: Gill Sans

Font/s: Gill Sans Light Italic
Type Size/s: 19 pt
Leading: 11 pt
Paragraph spacing: 0

BODY
Typeface: Gill Sans

Font/s: Gill Sans Light
Type Size/s: 10 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 60
Alignment: left justified

Margins: 12.7 mm top + bottom + left + right
Columns: 4
Gutter: 4.23 mm

Figure 3.4 ; FINAL layout without grids ; PDF (22/10/2024)

                      Figure 3.5 ; FINAL layout without grids ; JPEG
                          (22/10/2024)
                    

                      Figure 3.6 ; FINAL layout with grids ; PDF
                          (22/10/2024)
                    

                      Figure 3.7 ; FINAL layout with grids ; JPEG
                          (22/10/2024)
                    

FEEDBACK

Week 1

General feedback

-Open a blogspot website, do research, sketch the idea for the four words that we voted in class(Jump, Fish, Chop, Shake), and update in our portfolio.

-Watch lectures 0–1 and update e-portfolio with take-away points, download all the 10 typefaces.

Specific feedback

-no specific feedback

Week 2

General feedback

-Update e-portfolio: with the lecture summary for "Typo_3_Text P1", with the digitized explorations: 4 words (Ai), with feedback, reflection and further reading

Specific feedback

Sketch
1. Are the explorations sufficient?

The explorations provide a solid foundation, but there’s room for further development. Exploring more variations in typography styles and sketch techniques could enhance the visual communication of each word.

2. Does the expression match the meaning of the word?

Overall, the expressions generally align with the meanings of the words chosen. However, there may be areas where the connection could be more direct or visually striking.

3. On a scale of 1–5, how strong is the idea?

I'd give it a 3

4. How can the work be improved?

Explore additional typographic styles that better reflect the energy and movement of the words.

Digitisation
1. Is the exploration sufficient?

The exploration during the digitization process is a good starting point, but additional iterations are necessary to fully realize the potential of each design

2. Does the expression match the meaning of the word?

Yes, the expressions mostly align with the meanings. However, further refinements could strengthen the clarity of each design.

3. Is the expression well crafted (crafting/lines/shapes)?
3a. Does it sit well on the art-board

The designs are generally well-positioned on the art-board, but careful attention to alignment and balance could enhance their overall visual appeal.

3b. Is the composition engaging? Impactful?

The compositions have engaging elements, but there’s potential for greater impact through more dynamic arrangements and interactions between the letters.

4. How can the work be improved?

Explore animation techniques more thoroughly to create smoother transitions and more lively interactions.

Week 3

General feedback

Update E-portfolio: watch and write lecture summaries for lecture "Typo_3_Text P2", update Exercise 1 digital exploration of static designs and animation. Update feedback, reflection and further reading for week 3
-Upload Final JPEG & PDF of Exercise 1 Type Expression static artwork (4 words)

Week 4

General feedback

-Watch lecture and write summaries for "Typo_2_Basic"

-Update progress for task 1 exercise 2

-Complete and submit the final task 1 exercise 2 in e-portfolio

Specific feedback

-words are too distorted, rework on it

-animation is not smooth enough

Week 5

General feedback

-arrange and finalize this task1 e-portfolio and show it to Ms. V next week

Specific feedback

-kerning and tracking on names are fine but the text formatting needs to refine

REFLECTION

Experience

I learned a lot from this typography class in these few weeks. Through feedbacks, I trial and error for few times to refine the work. I realized that some minor adjustments could help to capture the essence of the work more effectively. Digitalizing the sketches and experimenting with adjustments in Adobe Illustrator and Photoshop has improved my workflow and increased my familiarity with these tools.

Observation

Typography requires attention to small details, such as kerning, tracking, and the specific structure of letterforms. I noticed that even minor changes in spacing could affect readability and aesthetics, especially with the text formatting exercise.

Findings

Through these exercises, I've discovered that typography is not only about aesthetic choices, but also about conveying tone and intent in design. Each typeface and letter setting must serve a purpose, whether it is to emphasize meaning or to ensure smooth readability. I also learned that patience and attention to detail are important, as I need to make many adjustments to achieve the right balance.

Search This Blog

Racheal Tan Tze Rou (0381005)