Typography Task 1 - Exercise

8.4.2023 - 14.4.2023 ( Week 1 )
Berlian Johanna / 0360054 
Advanced Typography / Bachelor of Design ( Hons ) in Creative Media
Task 1 : Exercise 1

---

LECTURES

Week 1 : Introduction to Typography

In our first lesson, a recorded lecture served as an introduction to the history of typography. We were told to draw our ideas for type expressions based on four words throughout class.

Early letterform development : Phoenician to Roman

Fig. 1.1 Phoenician to Roman Letter Evolution (9/4/2023)

• Using a pointed stick to scrape into wet clay or a chisel to carve into stone as a writing tool leads to the development of uppercase letterforms. 
• Combined straight and round lines and shapes make up the uppercase forms.

 Direction how to perform writing

Fig 1.2 Boustrophedon 

Fig 1.3 Development of Phoenican to Roman Letterform

• The Greeks revolutionised writing.  The Phoenicians, like other Semitic peoples, wrote from right to left.  The Greeks devised a writing style known as 'boustrophedon' (how the ox ploughs), in which lines of text were read alternately from right to left and left to right.  When they alter the reading direction, they also change the orientation of the letter form

Hand Script from 3rd - 10th Century C.E

Fig 1.4 Hand Script from 3rd - 10th century C.E

A hand script is a written rendition of typography. It dates from the third through the tenth centuries. The majority of hand scripts feature an angle off the perpendicular that can be written by holding a reed pen at that angle. Consider Square Capitals (4th to 5th century) and Rustic Capitals (late 4th to mid 3rd century), where the variety of stroke width is achieved by holding the reed pen at an angle of approximately 60 degrees off the perpendicular, whereas Rustic Capitals require us to hold the pen or brush at a 30 degree angle off the perpendicular.

Humanist Script to Roman Type

• C.1460: Lucius Lactantius, Venice
• 1472: Cardinal Jonannes Bessarion, Conrad Sweynheym and Arnold Pannartz, Subiaco Press, Rome
• 1471: Quintillian, Nicholas Jenson, Venice 

4. Venetian type from 1500

• 1499: Colona, type by Francesco Griffo
• 1515: Lucretius, type by Franceso Griffo

5. Golden Age of French Printing

• 1531: Illustrioussimae Galliaru Regina Helianorae, printed by Robert Estianne, Paris. Type-cast by Claude Garamond.

6. Dutch printing, c. 1600

• 1572: Polygot Bible (Preface) Printed by Christophe Plantin Antwerp

7. English type from the eighteen century

• 1734: William Caslon, Type specimen sheet, London.

8. Baskerville's Innovations

• 1761: William Congreve, typeset and printed by John Baskerville Birmingham

9. 1818 Giambatista Bodoni, Manuale Tipografico, Parma.

• 19th century types > the first square serifs > early twentieth century sans serif (1923 Bauhaus, Moholy-Nagy, 1959 Mulier-Brockman)

10. Text type classification 

• Due to prevailing technology, aesthetic trends, and commercial needs, typeforms have been developed.

Fig 1.5 Text Type Classification

Week 2 : Development for Digitalization of Type Expressions

Type Expressions' Digitization

On week 2, we were told to begin digitalizing our type expressions in Adobe Illustrator using the fonts we had chosen. Mr. Vinod also showed us several designs and taught us some approaches that may help us improve our understanding of Adobe Illustrator, which the bulk of us are still unfamiliar with. 

Fig 2.1 The Anatomy of Letterform

Basic Letterforms :

• Baseline : imaginary line at the visual base of the letterforms
• Median : imaginary line defending the x-height of letterforms
• X-height : height in any typeface of the lowercase 'x'
• Bowl : Rounded form that describes a counter. may be either open or closed
• Cross-bar : horizontal stroke in a letterform that joins two stems together
• Ear : The stroke extending out from the main stem or body of the letterform
• Apex/Vertex : The point created by joining two diagonal stems
• Arm : short strokes off the stem of the letterform
• Ascender : the portion of the stem of a lowercase letterform that projects the above median
• Barb : the half-serif finish on some curved stroke
• Bracket : the transition between the serif and the stem
• Cross stroke : the horizontal stroke in a letter form that joins two stems together
• Crotch : the interior space where two strokes meet
• Descender : the portion of the stem of a lowercase letterform that projects below the baseline
• Em/en : referring to the uppercase M, and em is now the distance equal to the size of the typeface. An en is half the size of an em.
• Finial : the rounded non-serif terminal to a stroke
• Ligature : the character formed by the combination of two or more letterforms
• Spine : the curved stem of the S
• Stress : orientation of the letterform, indicated by the thin stroke in round letterforms
• Swash : flourish that extends the stroke of the letterform
• Link : the stroke that connects the bowl and the loop of the lowercase g 

Fig 2.2 Uppercase  & Lowercase

Font :

• Small capitals : Uppercase letterforms are drawn to the typeface's x-height.
• Uppercase numerals : They are the same height as the capital letters and have the same kerning width.
• Lowercase numerals : They have the ascenders and descenders set to x-height.
• Miscellaneous characters : They can change from typeface to typeface 
• Ornaments : they are used as flourishes in invitations or certificates. often provided as a font in a larger typeface family

Describing typefaces :

• Roman : uppercase forms are derived from inscriptions on Roman monuments 
• Italic : based on 15th century Italian handwriting
• Oblique : based on Roman form of typeface
• Boldface : characterized by thicker stroke than Roman form
• Light : characterized by lighter stroke than Roman form
• Condense : condensed version of Roman form
• Extended : extended version of Roman form.

Week 3 :  Animating our Type Expressions

Following comments on our four digitised type expressions, we were instructed to create an animated version of one of them using Adobe Illustrator and Photoshop. We learned how to animate our digitised type expression by seeing a pre-recorded video on how to do so. Then we began to explore with those two tools, creating a small gif animation.

Text/Tracking :

 1. Kerning, Letterspacing, and Tracking 

• Kerning : the automated adjustment of letter spacing.
• Tracking : the addition and removal of space in a word or phrase.
• Letterspacing : the addition of spaces between letters.

Fig 2.2 Kerning

Fig 3.1 Normal, Loose, and Tight Tracking

Uppercase letterforms are designed to stand alone; lowercase letterforms rely on the counterform formed between letters to keep the line of reading straight.

2. Formating Text

Flush Left :

• A format that closely resembles the asymmetrical sensation of handwriting in that each line begins at the same position but stops wherever the final word on the line finishes. 
• The spacing between words is continuous throughout the text, allowing the type to provide an equal grey value.

Fig 3.2 Flush Right

Centered :

• The format of the text imposes symmetry by allocating equal significance and weight to both ends of every line. 
• Transforms text fields into shapes, adding visual to non-pictorial data.

   

Fig 3.3 Centered

Justified : 

• The format of the text imposes symmetry by allocating equal significance and weight to both ends of every line. 
• Transforms text fields into shapes, adding visual to non-pictorial data.

Fig 3.4 Justified

Flush Right :

• Emphasises the finish of a line rather than the beginning.
• It can be effective when the link between text and image is uncertain and there is no strong direction to the right.

Fig 3.5 Flush Right

3.Texture

Displays how various fonts have varied grey values that range from bright to dark. The middle gray value is the best option.

Fig 3.6 Anatomy Typeface

• The primary purpose of text type selection is to allow for simple and sustained reading.
• The size of the text is determined by the font type. It should be large enough to read comfortably at arm's length.
• The gap between each line of text is known as the leading. A lack of leading stimulates vertical eye movement and makes it easy for the reader to forget their position (which line they were reading). Too much leading, on the other hand, generates striped patterns that make it easy for the reader to lose attention.

4. Leading and Line Lenght

• Text size: Text should be large enough to be read comfortably at arms length.
• Leading : Tightly positioned text increases vertical eye movement, which can cause a reader to lose his or her place; loosely set text generates striped patterns, which distract the reader from the content at hand.
• Line length : Appropriate text leading is as much a function of line length as it is of leading type size. 
• Less leading with shorter lines
• Longer lines indicate greater leadership.
• As a general rule, keep line length between 55 and 65 characters. 

5. Type of Specimen Book

Displays samples of different size fonts to offer an exact reference for type, type size, type leading, type line length and so on. It is frequently used for headlines and text in various sizes. A type specimen book contains typeface examples of various sizes. Without printed pages exhibiting examples of types at various sizes, no one can make an informed type selection. A type specimen book is also designed to be a precise reference for type, type size, type leading, type line length, and many other things.

Fig 3.7 Type Specimen Sheet

Week 4 :  Formating Text

Methods for indicating paragraphs :

•  A pilcrow (¶)
• Adding a gap between paragraphs. Line spacing and paragraph spacing should be equal, which aids in cross-alignment. It should be 2-3 points bigger than the text.
• The use of indentation. Usually the same size as the line spacing or text point size. There should be no ragging on the right while using indentation because there is already ragging on the left. As a result, justified alignment is recommended.
• Long paragraphs with the first line normal and the remainder of the lines indented.

Line space :

• The overall 'height' of the line, including the leading above it, taking into account descenders and ascenders of the line below it.

Leading :

• Only the empty space between the lines.  It provides cross-alignment between columns of text by increasing vertical eye movement, making it easy for readers to become disoriented. Striped patterns are caused by text that is placed too loosely and are distracting.

Fig 4.1 Leading and Line Space

Widow- A single short line of type at the end of a column of text. 

Orphan- A short line of type that is left alone at the beginning of a new column.

Fig 4.2 Widow and Oprhan

They are particularly severe in justified alignment. Widows can be forgiven by flushing left or flushing right, but orphans are always awful. 

Widows may be corrected by rebreaking your line ends throughout the paragraph so that the final line is not too short. Orphans can be prevented by ensuring that no text column begins with the final line of the previous paragraph.

---

 INSTRUCTIONS

---

Task 1 : Exercises - Type Expression

1. Idea Sketches

Love, Pause, Party, and Surprise are the words I picked. I digitally drew my ideas on my phone using the Ibis x paint app. We are limited and using the following 10 typefaces that being given by the lecturer which is Surprise, Love, Pause and Party. But so far to many distort and graphic element as i need to fix or think for the proper design idea.

Fig 2.1 Type Expression Sketches Planning

2. Idea Development 

Another phase idea for fixing some elements and the element graphic decrease it in order to focus the main issue as the typeface more outstanding. But from 4 idea design in development from before, 2 of the design being rejected during not convince the point and how it distorted. The 2 design that got rejected was Love and Surprise. But the 2 lefted design idea has some kind potential by fix some part in order to perform as for nextweek how the assignment animation by choosing 1 of the accepted design idea.

Fig 2.2 Idea Development (12/4/2023)

3. Accepted Design

Before focusing the nextweek project for animation, I fix the accepted design typface which is Pause and Party as it has unique feature and this is the result that I need to decide which one I animate it. In the end I choose Party using Universe LT std 59 Ultra Condensed typeface.

 

2.4 Accepted Design (13/4/2023)

 Process Animation Party : Part 1 & 2

 Process Animation prepared first the structure on Adobe Illustration as i as the line movement for as a water wafe and the falling alphabet p, a, r, t and Y as the glass champagne to get filled by it. The champagne part that shape Y i amde a bit motion in order to look alived and more interesting.

 

 Fig 2.5 Animation Party (Part 1) (27/4/2023)

Fig 2.6 Animation Party 2 (part 2) (27/4/2023)

Process Animation On Photoshop

In this part when we manage to do animation structure on Adobe Illustration we moved the file as we saved to the Photoshop using Timeline to do motion movement animation, by following step from tutorial the animation manage created.

Fig 2.7 Process Animation on Photoshop (27/4/2023)

Fig 2.8 Type design in JPEG

Fig 2.9 Typeface design in PDF

Animation Result

Fig 2.8 Final Animation of " Party"(27/4/2023)

Task 1 : Exercise 2 - Formating

Exercise 2 focuses on creating a layout using Adobe InDesign to demonstrate various text formatting techniques. These techniques include adjusting letter spacing (kerning), line spacing (leading), paragraph spacing, alignment, and more. The main objective is to improve our ability to organize information visually and establish clear hierarchies.

To begin, I explored the 10 different typefaces allowed in Adobe InDesign. I tested each typeface to assess their suitability for the layout design. This helped me determine which ones would effectively convey the intended message.

 Fig 3.1 - Kerning and Tracking Exercise JPEG (02/05/2023)

Fig 3.2  Setting Kerning & Tracking Increments

Fig 3.3 The Process Kerning

3.4 Text Formating Layouts, Final (JPEG)  (2/5/2023)

Final text formatting layout

HEAD

Font/s: Univers 73 Black Extended

Type Size/s: 38 pt

Leading: 45.6 pt

Paragraph spacing: 11pt

BODY

Font/s: Univers 55 Roman

Type Size/s: 10 pt

Leading: 12 pt 

Paragraph spacing: 11 pt

Characters per-line: 55

Alignment: left

Margins: 12.7 mm top + inside + outside, 100 mm bottom

Columns: 2

Gutter: 4.233 mm

3.5 Text Helvetica Final Design ( PDF )

3.6 Text Helvetica Final Design (PDF)

3.7 Text Helvetica (JPEG)

---

Feedback 

Week 2 : 

• Week 2 General Feedback:Difference Idea & Concept.
• Specific Feedback : The first desing wont work if its too much distort element.

Week 3 :

• General Feedback : Fix the part and dont distort or made more graphic elements.
• Specific Feedback : Love and Surprise isn't working but Party and Pause can be improvised and used.

Week 4 :

• General Feedback : Animate the typeface choice.
• Specific Feedeback : Need to work more for the flow words and the animation movement.

Week 5 :

• General Feedback : Select one component to change (font, point size) and leave the rest alone. If you want to make abbreviations stand out, use tiny caps. Do not force a line break. Never use bold, italics, or condensed for body text.
• Specific Feedback : The spacing between paragraphs is excessive, and the typeface is unsuitable for reading the content.

---

Reflection

1. Experience

I learned a lot of new concepts while working on these assignments. I had no idea that so much could go into simply formatting a body of text, but through this task alone, I learned about line length, cross-alignment, ragging, leading, kerning, tracking, paragraph spacing, and selecting the right typeface and font. 

My experience was quite great, despite being extremely difficult. I struggled with coming up with distinct emotions and layouts, as well as assessing them. However, during the last few weeks, I've become more assured. Classes were very lighthearted, and feedback sessions were quite beneficial to my work. I also received inspiration from my peers. 

2. Observations

Even a minor modification in a design element can alter how your content appears to a viewer. Kerning piqued my interest because it was such a small alteration that made a significant effect, instantly making the words seem cleaner. During this job, I saw how many diverse and similar designs may emerge from the same surrounding material. It was fascinating to see how other individuals came up with concepts that I would never have thought of. 

3. Findings

I've foudn each people have different potential and skills in each subject, I find it amusing. They may emerge from the same surrounding material. It was fascinating to see how other individuals came up with concepts that I would never have thought of. 

4. Further Reading

Fig 4.1 Computer Typography Basic

This is the book that I choose to read

Fig 4.2  Character & Word Spacing

The book teaches the correct way to do kerning by illustrating the differences between each step. It helps readers understand the importance of proper spacing and shows how small adjustments can make a big impact on the overall look of the text. The book provides visual examples and breaks down the process into easy-to-follow steps, empowering designers to improve their typographic compositions. It's a valuable resource for anyone interested in learning about kerning and its significance in design.

Fig 4.3 Paragraph Alignment

In addition to kerning, the book also explores different types of alignment. It provides insights into various alignment options, such as left, right, center, and justified alignment. By showcasing visual examples and explaining the impact of each alignment choice, the book helps readers understand how alignment can affect the overall readability and visual appeal of a design. Whether you're a designer or simply interested in typography, this book offers valuable knowledge on different alignment techniques.