TYPOGRAPHY / TASK 1 : EXERCISES 1 & 2

April 04, 2023

TYPOGRAPHY / TASK 1 : EXERCISES 1 & 2

04/04/2023 - 25/04/2023 (Week 1 - Week 4)

Agnes Fadhyllah / 0360503

Typography / Bachelor of Design (Hons) in Creative Media

Typography Task 1 / Exercises 1 & Exercise 2

Table of content

Lectures

[04/04/2023]

Summary

On the first meeting Mr.Vinod introduced us into the basic knowledge of typography. what we needs and what we have to prepare for his class. he told us to made an E-Portfolio for Typography and Told us about the Facebook groups, what are the uses of the features, And the lecture playlist for us to watch. he taught us on what to do and what to add in an E-Portfolio and what for us to not do in E-Portfolio. Shortly after the introductions we were tasked to do an Exercise which is making Type expressions.

Typhography - Development / Timeline

(Note: Might be biased to western view point)

Early Letterform Development

The Phoenicians

Initially (using Phoenician's perspective) writing meant scratching on a wet clay with pointed tools (chisel, sharp stick).

Phoenician clay tablet
At early days, typography tended to be uppercase because it's a straight combination of straight line and circles for simplicity.

Phoenician to Roman

Evolution from the Phoenician letters

The Greeks

Developed a, rather distinct direction of writing from the status quo of right to left reading used by the Phoenician and Semitic, to a style of writing called 'boustrophedon'

Boustrophedon Example

What is Boustrophedon?

Boustrophedon is a reading/writing style where it allows the reader/writer to have a continuous reading pace instead of going back to the right most text at the end of the line. It is a style of writing where the text is written in alternating directions. The first line is written from left to right, the second line is written from right to left, and so on. The term comes from the Greek word bous, meaning “ox,” and strophe, meaning “turn.” The term is derived from the way an ox turns when plowing a field.
The Greeks did not use letter spacing or punctuation.
Eventually they would witch to strictly Left to Right text style.

The Romans

They worked in marble and carved and inscribe letters on them.

Roman Inscribed Marble
This has caused a change of quality in letter strokes

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

Roman Square Capitals (3rd/4th Century)

The written versions that can be found in roman monuments
Have serifs added to the finish of main strokes
Variety of stroke is achieved by reed pen used at the angle of 60°

Rustic Capitals

A compression of square capitals, allowing for 2x efficiency
While fast and easier to write, it's harder to read due to it's compressed nature.
Variety of stroke is achieved by reed pen used at the angle of 30°

Roman Cursive Letterform

Used for everyday transaction
Simplified for speed

Uncials

More readable than rustic capitals at small sizes
Basically, small letters

Half-Uncials

A further formalization of cursive
The formal beginning of lowercase letterform

Charlemagne

Issued on 789 to standardize all ecclesiastical texts.
Was the standard of calligraphy for a century
Text using Majuscules (uppercase), miniscule, capitalization, and punctuation.

Blackletter to Guttenber's type

Was around on the 1150’s.
Also known as Gothic Script, or Textura.
Was widely used until the 17th century.

Text type classification (to the nearest quater century)

Text type classifications (to the nearest quater century)

1450 Blackletter

Emerging as the first printing type, Blackletter was inspired by the manuscript styles utilized in Northern European books during that era.

1475 Oldstyle

Designed from lowercase lettering employed by Italian humanist scholars in book transcription and uppercase characters found on Roman ruins.

1500 Italic

Characterized by its condensed and closely-spaced design, now no longer considered an individual typeface.

1550 Script

Designed to imitate the appearance of engraved calligraphy.

1750 Transitional

An enhancement of Oldstyle forms, featuring exaggerated thick-to-thin relationships and lighter brackets.

1775 Modern

Distinctive for its unbracketed serifs and the stark contrast between thick and thin strokes.

1825 Square Serif / Slab Serif

Featuring unbracketed serifs and minimal variation between the thickness of strokes.

1900 Sans Serif

Notable for the complete absence of serifs.

1900 Serif/Sans Serif

A combination of both serif and sans serif lettering styles.

[11/04/2023]

Summary

On week 2 Mr.Vinod gave us some feedback which are

General Feedback: avoid using too much graphics (allowed but keep it minimal), avoid using too much distortion. use the words as "graphics" to make sure to keep the graphic minimum. Graphical elements should be used to enhance the word (minimal) not use it as the main point.
Specific Feedback: to leave the first sketch of water (sketch A as it was) , the word sick needs to be rework because it was too graphical, and for rain the first sketch are a good idea just need a few adjusting (remove the clouds/make it smaller)

not only a feedback, he gave us some inspirational words to encourage us and to help us improving not only on sense of design but also about life skills. He also did a self-introduction, his background, his achievements, and his projects.

Basics in Typhography

Describing Letterform

Letterform Component parts

Letterform Positioning

The letterform positioning are divided into 3 parts which are

Baseline: the line where the letterform sit on
Capline: the line where the uppercase letterform sit on
X-height: the line where the lowercase letterform sit on

Letterform Structure

Stroke: Any line that defines the basic letterform.
Apex/Vertex: Point created by joining two diagonal stems.
Arm: Short strokes off the stem of the letterform.
Ascender: Portion of the stem of a lowercase letterform that projects above the median line.
Barb: Half-serif finish on some curved stroke.
Beak: Half-serif finish on some horizontal arms.
Bowl: Rounded form that describes a counter.
Bracket: Transition between the serif and stem.
Cross Bar: Horizontal stroke in a letterform that joins two stems together.
Cross Stroke: Horizontal stroke in a letterform that joins two stems together.
Crotch: Interior space where two strokes meet.
Descender: Portion of the stem of a lowercase form that projects below the baseline.
Ear: Stroke extending out from the main stem or the body of the letter form.
Em: Distance equal to the size of the typeface.
En: Half of the em.
Finial: Rounded non-serif terminal to a stroke.
Ligature: Character formed by the combination of two or more letterforms.
toc_link: Stroke connecting the bowl and the loop of a lowercase G.
Loop: Bowl created in the descender of the lowercase G (in some typefaces).
Serif: Right-angled or oblique foot at the end of the stroke.
Shoulder: Curved stroke that is not part of a bowl.
Spine: Curved stem of the S.
Spur: Extension the articulates the junction of the curved and rectilinear stroke.
Stem: The significant vertical or oblique stroke.
Stress: Orientation of the letterform, indicated by the thin stroke in round forms.
Swash: The flourish that extends the stroke of the letterform.
Tail: The curved diagonal stroke at the finish of certain letterforms.
Terminal: Self-contained finish of a stroke without a serif.

Letterform Fonts styles

Uppercase & Lowercase
Small Capitals
Uppercase & Lowercase Numerals
Italic & Roman
Punctuation & Miscellaneous Characters
Ornaments

Describing Typefaces

Roman & Italic
Boldface & Light
Condense and Extended

[18/04/2023]

Summary

On week 3 we had an online class and Mr.Vinod gave us another feedback, especially for the blog and the final digitalized version.

General Feedback : Make sure to use the composition nicely, and still avoid lots of graphical elements (small details are okay)
Specific Feedback : make the sketch of water simpler (black bg and remove reflection) and fix the rain sketch and make the font smaller to make it look like rain, the rest of the sketch are Good to go
Blog Feedback : Finish all the lecture summary, Add dates and week to the progress images like sketch and digitalization, fix the quality of the sketch image, finish the reflection and further readings.

we were also instructed to watch the video tutorial on Type Expression Animation and attempt an animation on one from the 4 words expressed. we will be advised to use Photoshop for this.

Text Pt. 1

Spacing Techniques in Typography

Kerning

Kerning is when the space between letters is automatically adjusted.

Letterspacing

Letterspacing is when extra space is added between letters.

Tracking

Tracking is when space is added or removed in a word or sentence.

Here's an example to help you understand:

This image shows the different types of tracking from left to right: Univers 55, Normal Tracking, Tight Tracking, Loose tracking.

Formatting Text

Flush Left

Flush left is when each line starts at the same point but ends wherever the last word on the line ends. This allows the spaces between words to be consistent throughout the text and creates an even gray value.

Centered

Centered text imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It adds a pictorial quality to material and creates a strong shape on the page. However, line breaks need to be amended so the text does not appear too jagged.

Flush Right

Flush right emphasizes the end of a line. It's useful in situations where the relationship between text and image might be ambiguous without a strong orientation to the right, such as captions.

Justified

Justified text expands or reduces spaces between words and letters. However, it can occasionally produce 'rivers' of white space running vertically through the text, which can be fixed by editing line breaks and hyphenation.

Leading and Line Length

Type Size

Text should be large enough to be read easily, as if you were holding a book in your lap.

Leading

Text that is set too tightly encourages vertical eye movement, while text that is set too loosely creates striped patterns that can be distracting. A good rule of thumb is to use 2-3 points of leading space.

Line Length

Shorter lines require less leading, while longer lines require more. The ideal line length is between 55-65 characters.

Text / Leading and Line Length

When formatting text, the goal is to make it easy to read for prolonged periods of time.

Type Size

Text should be large enough to be read easily, as if you were holding a book in your lap.

Leading

Line Length

Shorter lines require less leading, while longer lines require more. The ideal line length is between 55-65 characters.

[25/04/2023]

Summary

On week 4 Mr.Vinod gave us another feedback about our animation progress and there are a few changes for us to do, here are the feedbacks :

General Feedback : Make sure the animation plays longer especially on the last layer so that it has a pause. use less graphical element as always.
Specific Feedback : The animation concept is good however the k should be animated as if it was pushed by the C, lastly i should add the bounce effect in the animation to add more exaggeration

after that, he gave us a brief explanation about our next assignment which is Text Formatting.

Text Pt. 2

In this lecture, we will cover some advanced techniques for formatting text in typography. These techniques include indicating paragraphs, handling widows and orphans, establishing a hierarchy of information, and cross-aligning captions and text. Let's get started!

Indicating Paragraphs

Indicating paragraph breaks is an important aspect of typography. This can be done in a number of ways:

Using the Pilcrow symbol (¶) to indicate paragraph breaks.
Adding line spacing between paragraphs.
Using indentation to separate paragraphs.
Indentation is best used when the text is justified, as ragged margins on the right can be distracting to readers.

Widows and Orphans

Widows and orphans refer to the occurrence of a single line of a paragraph at the top or bottom of a page. This can be distracting to readers and can disrupt the flow of the text. Here are some tips for handling widows and orphans:

Match the fonts' x-height by reducing font size by 0.5 points.
Reduce point size of numbers by 0.5 points so that they don't stand out in a small amount of text.
In the case of designing a book with large amounts of text, lowercase numerals are recommended.
When highlighting text, always maintain the left reading axis to ensure that the readability is good.
In some cases, graphical elements such as bullet points can be placed outside the margin.
Remember that a single apostrophe (') indicates feet and double apostrophes ('') indicate inches.

Hierarchy of Information

Establishing a hierarchy of information is important for making the text easily scannable for readers. Here are the three main types of headings:

A Head: The main headline of a section.
B Head: A subheadline that provides more detail about the section.
C Head: A smaller headline that can be used to break up large blocks of text.

Cross Alignment

Cross align captions and text reinforces architectural sense of the structure of the page.

Instructions

Task 1: Exercise 1 - Type Expression

For Exercise 1, we are given a set of words to create type expressions, and we were instructed to make 3 sketches of each 4 words, The words are Rain, Fire, Crush, Water, Dissipate, Freedom, and Sick. We are only allowed to choose the 10 Typefaces Mr.Vinod gave us which are Adobe Caslon Pro, Bembo, Bodoni, Futura, Gill Sans, Garamond, New Baskerville, Janson, Serifa and Univers.

I decided to choose the word Water, Rain, Crush, and Sick.

Sketches

I start sketching in my notebook at first, here are pictures of the rough sketches I do in the notebook.

Fig. 2.1 Sick Sketch [Week 1 (07/04/2023)]

Fig. 2.2 Water Sketch [Week 1 (07/04/2023)]

Fig. 2.3 Crush Sketch [Week 1 (07/04/2023)]

Fig. 2.4 Rain Sketch [Week 1 (07/04/2023)]

Note that here i dont really know the fonts that i will be using because i didnt familiarize myself with Adobe Illustrator yet. so the sketch are pretty messy and very rough.

Digitalization

I start sketching in my notebook at first, here are pictures of the rough sketches I do in the notebook.

I start on making "Water" first while also testing the water on Adobe Illustrator cause this is my first time using the software, it takes me a very long time to do it because I'm still trying to get used to the features and a lot of other things, it gets super overwhelming but the video from Mr.Vinod helped really greatly

Fig. 2.5 Water Digital Sketch Left To Right (A, B, C) [Week 1 (07/04/2023)]

For Sketch A : i used the ITC Garamond Std (Ultra Condensed Italic) Font size : 115.8109, im trying to create an effect of the word "Water" reflected on a Water, to make the wavey effect on the reflection i use the Envelope distort feature and choose Make with mesh.
For Sketch B : i used Myriad Pro (Regular) Font size : 115.8109, the same thing i do for reflection on the sketch A, and added a wavy water effect on the words by using the paintbrush tool.
For Sketch C : i used ITC Garamond Std (Ultra Condensed Italic) Font size : 107.046, i used the Warp feature, the Arc ones. and then proceed to draw droplets and lighting to give it a water-ish texture

On Week 2 Mister Vinod told me that Sketch A is great enough, just needs some minor adjustment which is to make it much more simpler, but then again i wasnt sure what are the things that needs adjustments so i leave the sketch A be, until week 3 he told me to just make it simpler without reflection and just leave the background black. after that i got this as a final outcome for sketch A

Fig. 2.6 Water Sketch Rework [Week 3 (18/04/2023)]

Fig. 2.6 Crush Digital Sketch Left To Right (A, B, C) [Week 1 (07/04/2023)]

For Sketch A : i used the ITC Garamond Std (Ultra Condensed) Font size : 86.425 , i made a slice effect using line segment tool and then change it into a sharper stroke, and then merge the layer together with the text, then i used the magic wand tool to erase the line, and then i seperate all the broken letters to create the shattered effect. to make the dust and crumbles i create a new brush and make it into a scatter brush.
For Sketch B : i used ITC Garamond Std (Ultra Condensed) Font size : 86.425 , same thing i did with sketch A , only on the letter C to create a falling down and collision effect to the floor.
For Sketch C : i used Gill Sans Std (Ultra Bold Condensed) Font size : 91.2, much more simpler this time because i was getting lazy with the effect and features so i draw the cracks by myself using the pencil tool and add the dust and small rocks using the brush tool.

After getting a feedback from Mr.Vinod, according to him sketch A is the best and theres no need for further adjustment anymore.

Fig. 2.7 Sick Digital Sketch Left To Right (A, B, C) [Week 1 (07/04/2023)]

For Sketch A : i used the Futura Std (Light Condensed) Font size : 94, i didnt really use alot of feature in the sketch A, i just draw a thermometer that represents the "I' in Sick using the Pen Tool.
For Sketch B : i used Bodoni Std (Book Italic) Font size : 94, same thing, not alot of feature just another drawing on the C.
For Sketch C : i used Futura Std (Light Condensed) Font size : 94, i rotated the C 180 degrees to make it into a Bed position and drew a body of someone resting on a bed.

Mr.Vinod said that all the sketches of Sick were too Graphical so I will need to do some rework for the sketches again. I tried to make it so that the C fainted or felt sluggish because it felt sick, so this is the finalized sketch for the Sick sketch.

Fig. 2.8 Sick Sketch Rework. [Week 2 (15/04/2023)]

Fig. 2.9 Rain Digital Sketch Left To Right (A, B, C) [Week 1 (07/04/2023)]

For Sketch A : i used the ITC New Baskerville Std (Italic) Font size : Varies, I rotated the words 45 degrees and make it an effect as if the rain words are falling down from the clouds to make it look like its raining. i drew the clouds and the thunder using Pen Tool.
For Sketch B : i used Futura Std (Light Condensed) Font size : 70 (20 for the I), i drew the clouds using pen tool and just duplicate all the A to make it into raindrops
For Sketch C : i used Futura Std (Light Condensed) Font size : 17, same thing with sketch A and B i drew the clouds and make a simpler version of rain.

After the feedback, Mr.Vinod told me that the Sketch A had a great idea/concept, but it's too graphical so there will be a rework for the Sketch A. I start reworking Sketch A and this is how it looks like after

Fig. 2.10 Sketch A Rework. [Week 2 (15/04/2023)]

I deleted the graphics of the clouds, and add more of the words rain to make sure it look like its raining diagonally. Then on week 3 Mr.Vinod said the words rain are too big, i should make it smaller so i changed it again so it'll be smaller.

Fig. 2.11 Sketch A Rework. [Week 3 (18/04/2023)]

TYPE EXPRESSION FINAL OUTCOME

At the end of the sketches and digitalization, i have chosen 4 of these sketches for my assignment (with the help of feedback from my peers and my own critical thinking), and here the finalized digital version.

Fig. 2.12 Finalized Sketch [Week 3 (18/04/2023)]

PDF :

Fig. 2.13 Finalized Sketch (PDF) [Week 3 (18/04/2023)]

TYPE EXPRESSION ANIMATION

After we're done with week 3 Mr.Vinod instructed us to start working on animation. I decided to go with sick and here are the progress of my animation.

Fig. 2.13 Animating progress [Week 3 (19/04/2023)]

Fig. 2.14 Sick Animation Outcome [Week 3 (19/04/2023)]

i followed the video just as instructed and here is the outcome, and on week 4 Mr.Vinod gave us a feedback and according to him it would be better if the K is getting pushed because of the C falling down. after getting a feedback i fixed it right away to make it look more natural.

Fig. 2.15 Rework Progress [Week 4 (25/04/2023)]

Fig. 2.16 Sick Animation Rework Ver.1 [Week 4 (25/04/2023)]

I showed this work to Mr.Vinod and he said that its getting better but i should add something more into it , which is making the C bounce when it falls so that way it will be more exeggerated. so i progressed immediately right after getting the feedback.

Fig. 2.17 Sick Animation Rework Ver.2 [Week 4 (25/04/2023)]

TYPE EXPRESSION ANIMATION FINAL OUTCOME

Fig. 2.18 Sick Animation Final Outcome GIF [Week 4 (25/04/2023)]

TASK 1: Exercise 2 - Text Formatting

1. Kerning and Tracking

The exercises cover various aspects of formatting such as type choice, type size, leading (line spacing), line length, paragraph spacing, forced line breaks, alignment, kerning (adjusting spacing between individual letters), widows and orphans (isolated lines at the beginning or end of a paragraph), and cross-alignment.

These exercises help us to become more familiar with the relevant software and enhance our knowledge of organizing information and arranging it visually. The tasks gradually progress from Formatting Text 1:4 to 4:4A, introducing incremental amounts of text and building upon the previously learned concepts.

Fig 3.1 Text formatting with kerning Week 4 [27/04/2023]

2. Text Formatting

the importance of well-designed margin space is in creating an appealing page layout. an unequal margin can be more attractive because it introduces dynamism through the use of white space.

These are some things to look out when doing the text formatting exercise :

Recommended point size for A4 or A3 paper: 8 pt to 12 pt.
Optimal line length: 55 to 65 characters per line.
Leading (line spacing): Add 2 to 3 points to the point size, depending on the typeface.
Paragraph spacing: Set it to the same value as the leading.

For example, if using a 9-point font size, you would check the number of characters in a row and aim for 55 to 65 characters. The leading (line spacing) would then be set two points larger than the font size. Additionally, the same unit as leading should be used for paragraph spacing.

Furthermore, there should be an equal balance between positive space (black/grey spaces) and negative space (white spaces) in body text. This contributes to the overall visual harmony of the page layout.

Fig 3.2 , Text formatting Layout Process Week 4 [27/04/2023]

The text alignment are still very messy and it has different gaps at the end, i adjusted alot of things including the fonts the point size and the kerning. i also checked if the characters are 55-65 per line.

Fig 3.3 , Text formatting Layout Process Week 4 [27/04/2023]

After getting another last feedback from Mr.Vinod , he said that the images had no corellation with the text so i changed the images into this.

Fig 3.4 , Text formatting Layout Process Week 7 [17/05/2023]

FINAL Text Formatting Layout

HEAD
Font/s: Futura Std
Type Size/s: 34 pt
Leading: 22 pt
Paragraph spacing: 0

BODY
Font/s: Futura Std
Type Size/s: 9.5 pt
Leading: 11.5 pt
Paragraph spacing: 11.5 pt
Characters per-line: 58
Alignment: left justified

Margins: 50 mm top , 12.7 mm mm left + right + bottom
Columns: 4
Gutter: 5 mm

Fig 3.5 , Text formatting Finalized Week 7 (With Grid) [17/05/2023]

Fig 3.6 , Text formatting Finalized Week 7 (Without Grid) [17/05/2023]

PDF :

Fig 3.7 , Text formatting Finalized Week 7 (PDF) (With Grid) [17/05/2023]

Fig 3.8 , Text formatting Finalized Week 7 (PDF) (Without Grid) [17/05/2023]

Feedback

Week 1 :

We just started the week so no feedback, woo ~

Week 2 :

General Feedback : avoid using too much graphics (allowed but keep it minimal), avoid using too much distortion. use the words as "graphics" to make sure to keep the graphic minimum. Graphical elements should be used to enhance the word (minimal) not use it as the main point.
Specific Feedback : to leave the first sketch of water (sketch A as it was) , the word sick needs to be rework because it was too graphical, and for rain the first sketch are a good idea just need a few adjusting (remove the clouds/make it smaller)

Week 3 :

General Feedback : avoid using graphical elements, minor elements are allowed as long as it only works to enchance the meaning. Make sure to make use of the composition (do not leave alot of spaces
Specific Feedback : Water sketch needs a little bit more of adjustments (just need to remove the reflection and just change it into a completely black background) and as for rain needs to change the font size to make it looks a rain cause rain drops are smaller, Mr.Vinod likes the sick and crush sketch.

Week 4 :

General Feedback : Make sure the animation plays longer especially on the last layer so that it has a pause. use less graphical element as always.
Specific Feedback : The animation concept is good however the k should be animated as if it was pushed by the C, lastly i should add the bounce effect in the animation to add more exaggeration

Week 5 :

General Feedback : When changing the font size, adjust the spacing between letters, paragraphs, and lines accordingly. Use images that don't appear to be part of the layout. To avoid using abbreviations, make the font size of the full word smaller. Align images with elements in the layout.

Week 6 :

General Feedback : N/A

Week 7 :

Specific Feedback : Image have no corellation with the text, Submit the final with grid and without grid.

Reflection

Experience : Honest to say, i thought i will be enjoying typography, but turns out i am not, since i am more of an illustration type of side than a graphical one. it's a nice experience especially for the challenges to think bigger. Honestly, the "workflow" of this module is stressful, its too fast and rushed. no offense but there are too many things to do at once that its really hard to keep up sometimes and it drains me a lot. i will be honest, the experience made me hate typography and i think i wont touch it anymore in the future, i know this is good preparation if you would like to work in the professional industry but i have to remind myself alot of time this is uni not office, i shouldn't stress myself too much. that is probably the only thing that made me stand strong
Observations : Different typefaces can express different things, if you could choose the right typeface to the mood of your writing it will enchance it even way more.
Findings : E-portfolio is pretty much a difficult thing to do and it takes a very long time, but typography does make me learn about balance and how people will interpret your design , layout and also makes me learn better about composition.