Typography Task 1 : Exercises

30/03/2022-27/04/2022 (Week 1-Week 5)

Brigita Maria/0352958

Typography/ Bachelor of Design in Creative Media

JUMPLINKS:

LECTURES
Back to jumplinks

Week 1 Introduction and Briefing:

Introduction to the module. Mr. Vinod also introduces the google sheets where we can find our feedbacks . Also the Facebook group and how to see the information, the PDF and the books for further reading. And the most important thing is setting up our e-portfolio. Lastly, we where briefed with the first task.

We had extra time, so he introduces his past works and what he did in front of the class. Honestly it was a blast knowing what he had done and contribute to the World of Art in Malaysia.

Week 2:

The day of the first submission of the type expression. We all submit the results into the Facebook group and one by one got evaluated by Mr. Vinod. Then we proceeded to start the type expression in adobe illustration. He gave some examples, as how to reinterpret our sketches/ideas into type forms.

Figure 1.1 Class Tutorial by Mr. Vinod - Week 2 (6/04/2022)

Week 3:

Today we submitted the digitalized version of our sketch. And Mr. Vinod commented on all of our attempt on our type expressions digitalization. Also explain to us the animation that we can possibly do. We did a couple animation and if ready can be presented to him to be commented on.

Week 4:

Today we submitted the animation version of the type expression. Mr. Vinod commented and evaluate on all of our submission. Also looking at our Blogspot's progress by checking some of the students websites. As well as giving a brief on the type formatting exercise. Giving us time to star the exercise and answer our questions

Week 5:

Today we submitted the type formatting part 2 exercise. And Mr. Vinod commented on all of our submission. As well as giving suggestions and example on how to solve some of our problems. He also checked or Blogspot before the next day's submission.

Lecture Typo 0 Introduction

Lecture Typo 0 video

What is typography?

- Art of creating letters (typefaces, type families etc)

- the style and appearance of printed matter

- Art and technique of arranging type to make written language legible, readable and appealing when displayed.

- No right or wrong in typography (no hard rule) -> good or bad typography ( takes time and trial error)

It had evolved for over 500 years!

from calligraphy > lettering > typography

Typography usually appears in:

- App designs

- Website

- Animation

- Signage design

- Labels

- Books and posters

- Logo type

Typography is now something that everybody does (democratization of typography) causing the reduction of quality around the world. There are less skilled typographers. It affected effective communication.

Font

refers to the individual font or weight within the typeface

i.e : Georgia regular, Georgia italic, Georgia Bold

Typeface

refers to the entire family of fonts/weights that shares similar characteristics/style

i.e : Georgia, Arial, Times New Roman, Pidot, Futura, ..

Lecture Typo 1 Development

Lecture Typo 1 video

TIMELINE OF TYPOGRAPHY

Kane.J (2002) A Type Primer-London, UK : Laurence King

Early letterform development:

PHOENICIAN TO ROMAN

- Scratching into wet clay with sharpened stick/stone into stone with a chisel

- Combination of straight lines and pieces of circles (did not use punctuations / spaces)

Figure 2.1 Alphabet/letterform evolution from Phoenician to Roman

Greeks modified the direction and orientation of letterform and writing overall

- They use "boustrophedon" (how the Ox Ploughs) system.

Figure 2.2 Boustrophedon Ancient Greek inscription, Gortyn code, Crete, 5th century BC

Etruscan and the Roman carvers working in marble painted letterforms before inscribing them

- There is a certain quality from their strokes.. i.e it changes in weight from vertical to horizontal, a broadening of stroke at start and finish

HAND-SCRIPT FROM 3rd-10th CENTURY C.E.

Square capitals -> Roman monuments

- These letterforms have serifs added to the finish of the main strokes

-The way that they use the pen (reed pen) in an angle of approximately 60 degree off the perpendicular affects the variety of the stroke width

Figure 2.3 Square capitals

Compressed version of Square capitals; Rustic capitals

- Increases the words by 2x in a sheet of parchment and took less time to write if compared to Square capitals

-The pens are held at an angle of approx. 30 degree off the perpendicular

- It is faster and easier to write, but it is harder to read due to their compressed nature

both square and rustic were used for documents of some intended performance.

Figure 2.4 Rustic capitals

Everyday transaction typically written in cursive hand (simplified for speed)

- Early development or formation of lowercase letterforms

Figure 2.5 Roman cursive

Uncials

- Mix of some aspects of Roman cursive hand, especially in the shape of A,D,E,H,M,U, and Q

- Uncia in latin is for a twelfth of anything; so some scholars thought that uncials refer to the

letters that are 1 inch (one twelfth of foot) high (small leters)

- Uncials are more readable at small sizes than Rustic capitals, because of its broad forms

Figure 2.6 Uncials

Half-uncials

- Formalization of the cursive hand

- Mark the formal beginning of lowercase letterforms after 2000 years from the origin of the Phoenician alphabet

- Replete with ascenders and descenders

Figure 2.7 Half Uncials

Charlemagne

- The first unifier of Europe since the Romans issued an edict in 789 to standardize all ecclesiastical texts. Alcuin of York, Abbot of , St. Martin of Tours got entrusted to do this task

- The monks rewrote the texts using both majuscules (uppercase), miniscule capitalization and punctuation which sed the standard of calligraphy for a century.

Figure 2.8 Charlemagne, the Carolingian Revival and Illuminated Manuscripts

TEXT TYPE CLASSIFICATION

Typeforms have had developed in response to the technology, commercial needs, and the aesthetic trends in society.

1450 Blackletter

The earliest printing type, it is based on the hand-copying styles that were used for books in northern Europe. i.e. Cloister Black, Goudy Text

Figure 2.9 Blackletter

1475 Old-style

Based on the lowercase form of the fonts used by Italian humanist scholars for book copying and the uppercase letterforms found inscribed on Roman ruins. Then it evolves from their calligraphic origins over 200 years, as it migrated across Europe

i.e. Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino

Figure 2.10 Bembo

1500 Italic

Cotemporary Italian handwriting,

The 1st italics were condensed and close-set, which allows more words in one page

Used to be considered as their own class of type, soon cast to complement roman forms

Since the 16th century, all text typefaces have been designed with accompanying italic forms

Figure 2.11 Italic

1550 Script

It was originally an attempt to replicate engraved calligraphic forms

This class of type is not entirely appropriate in a lengthy text settings.

Forms ranges from the formal and traditional to casual and contemporary

i.e. Kuenstler Script, Mistral, Snell Roundhand

Figure 2.12 Script type

1750 Transitional

A refinement of old-style forms

This could be achieved because of the advances in casting and printing

Thick to thin relationship were exaggerated, and brackets were lightened

i.e. Baskerville, Bulmer, Century, Times Roman

Figure 2.13 Transitional

1775 Modern

A further rationalization of oldstyle letterforms

Serifs were unbracketed

Contrast between thick and thin strokes are extreme

English versions are also known as Scotch Romans and more closely resemble transitional forms

i.e. Bell, Bodoni, Caledonia, Didot, Walbaum

Figure 2.14 Bodoni

1825 Square Serif / Slab Serif

Heavily bracketed serif

Little variation between thick and thin strokes

As a response of the newly developed needs of advertising for heavy type in commercial printing

As they evolved, the brackets were dropped

i.e. Clarendon, Memphis, Rockwell, Serifa

Figure 2.15 Rockwell

1900 Sans Serif

These typefaces eliminated serifs altogether.

First introduced by William Caslon IV in 1816

Variation tended toward either humanist forms or rigidly geometric

Strokes were flared to suggest the calligraphic origins of the form

Also referred as grotesque and gothic

i.e. Gill Sans, Grotesk, Franklin Gothic , Frutiger, Futura, Helvetica, etc

Figure 2.16 Helvetica

1990 Serif/Sans Serif

Recent development

Enlarges the notion of a family of typefaces both serif and sans serif alphabets and in between

i.e. Rotis, Scala, Stone

Figure 2.17 Semi serif font

Lecture Typo 2 Basic

Lecture Typo 2 video

DESCRIBING LETTERFORMS

Baseline The imaginary line of the base of the letterform

Median The imaginary line defining the x-height of letterforms

X-height The height of any typeface of the lowercase "x"

Ascender height h,d,l,d,.. Slightly taller / above than the cap height.

Descender height p,q,g

Stroke Any line that defines the letterform

Apex / Vertex A point of 2 diagonal stems joining together (apex above, vertex below)

Arm Short strokes off the stem of the letterform, horizontal or upward E,F,L K,Y

Ascender The stroke/ portion of the stem that exceed/projects above the median line.

Barb The half-serif finish on some curved stroke.

Beak The half-serif finish on a horizontal arms

Bowl The rounded form that describes a counter. It can be open or closed

Bracket The transition between the serif and stem

Cross Bar The horizontal stroke in a letterform that joints 2 stems together

Cross Strokes The horizontal stroke in a letterform that joins 2 stem together

Crotch The interior space where two strokes meet

Descender The portion of the stem of a lowercase letterform that projects below the baseline

Ear The stroke extending out from the main stem or body of the letterform

Em / en Originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface. An en is half the size of an em. Most often used to describe em/en spaces and em/en dashes.

Finial The rounded non-serif terminal to a stroke

Leg Short stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downward (K,R)

Ligature The character formed by the combination of two or more letterform

Link The stroke that connects the bowl and the loop of a lowercase G

Loop In some typefaces, the bowl created in the descender of the lower case G

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 (S a hard letterform to do)

Spur The extension the articulates the junction of the curved and rectilinear stroke.

Stem The significant vertical or oblique stroke

Stress The orientation of the letterform, indicated by the thin stroke in round forms

Slightly slanted ( diagonal ) stress and a vertical stress. Vertical stress is a transitioned typeface from handwritten letterforms which has a more slanted orientation.

Swash The flourish that extend from the stroke of the letterform

Never use swash capital letter together to form a name

Terminal The self-contained finish of a stroke without a serif. This is something of a catch-all term

THE FONT

To work successfully with type, make sure you are working with full font -> Type family -> has a good range of type faces and should know how to use it.

Uppercase Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures

Lowercase Lowercase letters include the same characters as uppercase

Small capitals Uppercase letterforms draw to the x-height of the typeface. Often called expert set, primarily found in serif fonts (usually used for acronyms). Usually based on uppercase forms!

Do not confuse real small caps with those artificially generated! **

Uppercase numerals Also called lining figures, these numerals are the same height as uppercase letters and set tp the same kerning width

Lowercase numerals Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders

Italic Most fonts today are produced with a matching italic (but not for small capitals). It refers back to 15th century Italian cursive handwriting.

Punctuation, miscellaneous characters All fonts contain standard punctuation marks, but miscellaneous characters can change for different typefaces.

Ornaments Used as flourishes in invitations or certificate. Usually provided as a font in a larger typeface family

DESCRIBING TYPEFACES

Roman Uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as 'Book'

Italic Named for 15th century Italian handwriting, which the forms are based of. Oblique conversely are based on roman form of typeface

Boldface A thicker stroke than a roman form. It also can be called 'semibold', 'medium', 'black', 'extra bold', or super. In some typefaces, the boldest rendition of the typeface is referred as 'Poster'

Light A lighter stroke than the roman form. An even lighter strokes are called 'thin'

Also there is condense and extended

COMPARING TYPEFACES

9 typefaces

-Garamond

-Janson

-Caslon

-Baskerville

-Bodoni

-Serifa

-Futura

-Gill Sans

-Univers

Differences - the accumulation of choices that renders each unique

Important to choose the most suitable typefaces that can conveys, express, and presents the message well.

Lecture Typography 3 Text P1

Lecture Typography 3 video

TEXT/TRACKING: KERNING AND LETTERSPACING

The term 'kerning' refers to the automatic adjustment of space between letters. Mistakenly referred as letterspacing. Letterspacing means to add space between letters. Removal of space in a word or sentence is referred as 'tracking'

Figure 3.1Kerving vs Tracking

Normal tracking, loose tracking and tight tracking It can give out a different color. If we see it with our eyes half close, we can determine if it has a normal tracking, too loose or too tight. If it gives out a very dark gray, it can indicate that the text has a tight tracking and most of the time we don't want that as it can hinder the reader to read. Reduce the readability of the text. The same goes to a loose tracking, it can be uncomfortable and hard for people to read the text. So this is important in typography.

Figure 3.2 Differences of tracking

Figure 3.3 from left to right Normal tracking, loose tracking

Figure 3.4 Tight tracking

Designer always letterspace uppercase letters, but a strong resistance to letterspace lowercase letters within text. Uppercase letterforms are drawn to be able to stand on their own, where lowercase require the counter form created between letters to maintain line of reading.

So letterspacing or kerning for lower case is a no", the typographers that create the type had already kern the letters before hand. increase letterspacing in lowercases causes a decrease function and readability

TEXT / FORMATTING TEXT

Flush left A format that is closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the las word on the line ends. The spacing between the words are consistent, creates an even gray value. note: flush left ragged right

Figure 3.5 Flush left

Centered This format imposes symmetry upon a text, assigning equal value and weight to both ends of any line. Can appear a bit jagged. note: centered ragged right and left (recommended to use it sparingly for short amount of text)

Figure 3.6 Centered

Flush right A format places emphasis on the end of a line as opposed to its start. note: flush right ragged left(use sparingly and for short amount of text)

Figure 3.7 Flush right

Justified Same with centered, this format give a symmetrical shape to the text. Expanding or reducing spaces between words and, sometimes, between letters. Occasionally produce ‘rivers’ of white space running vertically through the text. (not always the best choice and it enforce hyphen)

Figure 3.8 Justified

If you see the type before you see the words, change the type.

Some tips and shortcuts in Indesign:

Ctrl + A = select

Ctrl + shift + > = increase font (decrease <)

Ctrl+ shift + Alt = increase font faster

Ctrl + semi colon = make margin disappear

Alt +left arrow = reduce the amount of space between letters

Alt +right arrow = increase the amount of space between letters

change the kerning amount = edit - preferences - units and increments - change the kerning / tracking 20 to 5

TEXT/TEXTURES

It is important to understand how different typefaces feel as text. Different typefaces suit different messages. A good typographer has to know which typeface best suits the message at hand. Different texture of these typefaces also must be considered. Sensitivity to the differences in color is fundamental for creating successful layouts.

Figure 3.9 Anatomy of a typeface

Tips: if x height is more bigger in size compared to ascender and descender, it has more readability

Figure 3.10 Adobe Caslon vs Baskerville

Baskerville is more readable has a bigger ratio in x height, but can be detected in from the screen because it is not meant to be read on screen with that small of a size.

Figure 3.11 Garamond vs Bembo

Garamond has a larger ascender and descender but has a thicker stroke, makes in more readable. Bembo has a quite similar ratio between the x height and ascender, descender, contrast in bembo is more which reduces the epicacy and for screen viewing and reading purposes.

Figure 3.12 Bauer Bodoni vs Adobe Jenson

Bauer bodoni high contrast level of strokes which reduces the regibality, cause some strokes are not visible. Adobe jenson pro thicker stroke width, color is more stronger, and readable at this size for read purposes.

Figure 3.13 All of the Serif fonts compared

All of these are not designed for screen reading purposes. We can see more clearly the gray value if we see it from this picture. Jenson pro is the darkest in color.

Figure 3.14 All of the Sans-Serif fonts compared

Sans serif typefaces alot more legible and readable on screen.

So overall text type is set to allow for easy, prolonged reading!

TEXT/LEADING AND LINE LENGTH

Type size: Text type should be large enough to be read easily at arms length—imagine yourself holding a book in your lap.

Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.

Line Length: Appropriate leading for text is as much a function of the line length as it is a question of type size and leading. Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short lines lengths impairs reading.

Figure 3.15 Same type faces and type size but different leading

Figure 3.16

From the figure xx we can see that too dark or too bright is not good

TEXT/ TYPE SPECIMEN BOOK

A type specimen book shows samples of typefaces in various different sizes. Without printed pages showing samples of typefaces at different sizes, no one can make a reasonable choice of type. You only determine choice on screen when its final version is to read on screen.

A type specimen book (or ebook for screen) is to provide an accurate reference for type, type size, type leading, type line length etc.

Figure 3.17 Type specimen sheet

It is often useful to enlarge type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below.

Lecture Typography 3 Text P2

Lecture Typography 3 P2 video

TEXT / INDICATING PARAGRAPHS

First example The ‘pilcrow’ (¶), a holdover from medieval manuscripts seldom use today.

Figure 4.1 Text using pilcrow

Second example ‘line space’ (leading*) between the paragraphs. Hence if the line space is 12pt, then the paragraph space is 12pt. This ensures and maintain cross-alignment across columns of text.

Figure 4.2 Text using line space

Line space vs leading line space is the space where descender of 1 sentence to the descender of the other sentence. While leading is the space between 2 sentences.

Figure 4.3 Line space and leading

More tips: how to show hidden character in indesign. click type - show hidden character

W key = change between preview mode n normal mode

Third example Standard indentation also indicate new paragraph (typically the indent is the same size with the line spacing or point size of your text ( best used when the text is justified!!)

Figure 4.4 Text using indentation

Fourth example Extended paragraphs below (generally is not used). The method of extended paragraphs below creates unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it.

Figure 4.4 Text using extended paragraphs

TEXT / WIDOW AND ORPHANS

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

An orphan is a short line of type left alone at the start of new column.

Where we should avoid both!

Figure 4.5 Orphan and Widow

Tips: we can use force line break to avoid widow ; shift + enter = force line break

In justified text both widows and orphans are considered serious gaffes. Flush right and ragged left text is some what more forgiving towards widows, but only a bit. Orphans remain unpardonable.

The only solution to widows is to rebreak your line endings through out your paragraph so that the last line of any paragraph is not noticeably short.

Orphans, you might expect, require more care. Careful typographers make sure that no column of text starts with the last line of the preceding paragraph.

TEXT / HIGHLIGHTING TEXT

Some examples on how to highlight text withing the column to emphasize some sentences.

Figure 4.6 Italic

Figure 4.7 Bold

Figure 4.8 Different typeface

Figure 4.9 Difference in points

In this example the sans serif font (Univers) has been reduced by .5 to match the x-height of the serif typeface. 8 ≠ 7.5 Cause every typeface has a slight difference in their composition of x-height, ascenders, and descender.

Sometimes also reduce aligned figures (numbers) or All Capital acronyms embedded in text by .5 as well, to ensure visual cohesion of the text. To make it not stick out too much or be equal to the capital letters.

Figure 4.10 Difference of numbers and alphabets size

Figure 4.11 Different color (limited color, CMYK)

Figure 4.12 Gray box

Also take note, when highlighting text by placing a field of colour at the back of the text, maintaining the left reading axis (right example) of the text ensures readability is at its best.

Figure 4.13 Bullet points

Sometimes it is necessary to place certain typographic elements outside the left margin of a colon of type (extending as opposed to indenting) to maintain a strong reading axis

Figure 4.14 Quotation mark

Quotation marks, like bullets, can create a clear indent, breaking the left reading axis. Compare the indented quote at the top with the extended quote at the bottom.

prime vs quotation prime abbreviation for inches and feet Due to the limited number of keys on a typewriter, they were substituted.

TEXT / HEADLINE WITHIN TEXT

There are many kinds of subdivision within text of a chapters. In the following visuals these have been labeled (A, B and C) according to the level of importance.

A typographers task is to make sure these heads clearly signify to the reader the relative importance within the text and to their relationship to each other.

A head

Figure 4.15 A Head variation

A head indicates a clear break between the topics within a section. In the following examples ‘A’ heads are set larger than the text, in small caps and in bold. The fourth example shows an A head ‘extended’ to the left of the text.

B head

Figure 4.16 B Head variation

The B head here is subordinate to A heads. B heads indicate a new supporting argument or example for the topic at hand. As such they should not interrupt the text as strongly as A heads do. Here the B heads are shown in small caps, italic, bold serif, and bold san serif.

C Head

Figure 4.17 C Head variation

The C heads, although not common, highlights specific facets of material within B head text. They not materially interrupt the flow of reading. As with B heads, these C heads are shown in small caps, italics, serif bold and san serif bold. C heads in this configuration are followed by at least an em space for visual separation.

Putting together a sequence of subheads = hierarchy.

Obviously there is no single way to express hierarchy within text; in fact the possibilities are virtually limitless.

Figure 4.18 All the headlines combine together

TEXT / CROSS ALIGNMENT

Cross aligning headlines and captions with text type reinforces the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms. In this example, four lines of caption type (leaded 9 pts.) cross-align with three lines of text type (leaded to 13.5pts).

Figure 4.19 Cross alignment with 2 columns, with 2 different typefaces and point size

Below, one line of headline type cross-aligns with two lines of text type, and (right; bottom left) four lines of headline type cross-align with five lines of text type.

Figure 4.20 Cross alignment with 2 columns, 3 different typefaces

Lecture Typo 5 Understanding

Lecture Typo 5 video

LETTERS / UNDERSTANDING LETTERFORMS

The uppercase letter forms below suggest symmetry, but in fact it is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form (below); more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Figure 5.1 Asymmetrical capital A

The uppercase letter forms may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. Both Baskerville (previous) and Univers (below) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Figure 5.2 Univers A letter

The complexity of each individual letterform is neatly demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica and Univers. A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

Figure 5.3 (from left to right) Helvetica and Univers

LETTERS / MAINTAINING X-HEIGHT

The x-height is the size of the lowercase letterforms. Curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Figure 5.4 Razors text

LETTERS / FORM / COUNTERFORM

Just as important as recognizing specific letterforms is developing a sensitivity to the counterform (or counter)—the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them.

Figure 5.5 Counterform of letters

The latter is particularly and important concept when working with letterforms like lowercase ‘r’ that have no counters per se. How well you handle the counters when you set type determines how well words hang together—in other words, how easily we can read what’s been set.

One of the most rewarding way to understand the form and counter of a letter is to examine them in close detail. The examinations also provide a good feel for how the balance between form and counter is achieved and a palpable sense of letterform’s unique characteristics. It also gives you a glimpse into the process of letter-making.

LETTERS / CONTRAST

Figure 5.6 Contrast

The basic principles of Graphic Design apply directly to typography. The following are some examples of contrast—the most poweful dynamic in design—as applied to type, based on a format devised by Rudi Ruegg.

INSTRUCTION
Back to jumplinks

Task 1- Exercise 1 - Type Expressions

For the very first exercise we were assigned to do a type expressions. We were told to choose any expression words or follow the words from the previous classes that were available in the Facebook group. Because I am the 3rd class in the week which is Wednesday, we had the option to follow the previous classes.. So we all decided to use the previous class' list. Which are "Cough" being the mandatory word, "Wink", "Squeeze", "Pop", "Explode", "Grow".

We only need to choose 3, I decided to go with squeeze, pop, and explode as my type expression words.

I try to find some inspiration on type expression from the ol'Google.

Figure 6.1 Fragile expression inspiration

Figure 6.2 Lazy expression inspiration

Figure 6.3 Explosion expression inspiration

Figure 6.4 Float expression inspiration

Sketches

I figure that from the characteristics of the word that I will be using, I can utilize it into the design and expression itself. For example, figure xx the o is floating from the rest of the letters, depicting the characteristic and description of the word.

So then I went ahead to do some sketching on my tablet.

Figure 6.5 Sketch 1 - Week 2 (06-04-2022)

Figure 6.6 Sketch 2 - Week 2 (06-04-2022)

Figure 6.7 Sketch 3 - Week 2 (06-04-2022)

Digitalization

Then we were told to digitalize it using the 10 typefaces that Mr. Vinod provided in the google drive, which are Adobe Caslon Pro, Bembo, Bodoni, Futura, Gill Sans, ITC Garamond, New Baskerville, Janson, Serifa, and Univers. From all of the sketches that I did. First I picked 'Squeeze' from Figure 2.1 Sketch 1, which depicting a word that is being squeezed on the bottom of the type. I fixed the sketches from the comments that Mr. Vinod gave and did the digitalized ver. I was in debate whether I should use warping or no. And decided not to do so.

Squeeze

Figure 6.8 Squeeze digitalized Week 3 (13/04/2022)

The second type expression is 'Cough'. I chose cough from Figure 2.3 Sketch 3, The bolder 'C' mimicking a person's side profile that is coughing, while the 'o','u','g','h' are the cough that came out of the person's mouth. With small cough particles spewing out of the mouth using the same typeface as the word in a smaller size.

Cough

Figure 6.9 Cough digitalize Week 3 (13/04/2022)

For 'Explode', I chose a similar idea from both Figure 2.2 Sketch 2 and Figure 2.3 Sketch 3 and digitalize it. Implementing the idea of the o exploding, I slice the O letter into uneven bits to reflect a more natural and organic effect towards the explosion.

Explode

Figure 6.10 Explode digitalized Week 3 (13/04/2022)

Lastly for 'Pop', I chose to digitalized from the 3rd sketch, I wanted to portray a big ball from the letter O that is getting popped by the letter P. I chose a lowercase p as it is more slender in compare to the uppercase P, showing a more sharp and slender figure of a needle.

Pop

Figure 6.11 Pop digitalized Week 3 (13/04/2022)

Compiled Ver.

Figure 6.12 Type expression 1 - Week 3 (13/04/2022)

Figure 6.13 Type expression 2 - Week 3 (13/04/2022)

ADJUSTMENTS

After Mr. Vinod commented our work, I gather all the comments from my works and my peers. I revised some of the type expression. And added the essential information to the final work. For cough, I specifically changed the weight of the font, because the C looks too strong with that much boldness. Then the explode, I scatter the pieces of o more to fill up the white space. Fixed the placement of the word squeeze.

Figure 6.14 Final expression revision 1 - Week 3 (13/04/2022)

Figure 6.15 Final expression revision 2 - Week 3 (13/04/2022)

Figure 6.16 Final expression 'Cough' - Week 3 (13/04/2022)

Figure 6.17 Final expression 'Explode' - Week 3 (13/04/2022)

Figure 6.18 Final expression 'Pop' - Week 3 (13/04/2022)

Figure 6.19 Final expression 'Squeeze' - Week 3 (13/04/2022)

FINAL SUBMISSION TYPE EXPRESSION

Figure 6.20 Final Compilation of Type expression PDF - Week 3 (13/04/2022)

Figure 6.21 Final Compilation of Type expression JPEG - Week 3 (13/04/2022)

Animation

After I revised it, I start to make the animation gif for one of the type expression (the best one). I could not decide so I made 4 animation gif to see which one is better.

Using the initial Type expression design, I tried to reimagine what movement or animation that can reflect the type expression. I use illustration to create the one per one frame, for all of the type expressions. I did the frame design in Illustration.

Figure 7.1 Explode type expression animation frame - Week 3 (13/04/2022)

Then I transfer all of the works in Illustrator into Photoshop.

Figure 7.2 Cough type expression animation process - Week 3 (13/04/2022)

Figure 7.3 Cough type expression animation process 2 - Week 3 (13/04/2022)

Here are the frames of the type expression animation that I did in photoshop for each of the words.

Cough

Figure 7.4 Cough type expression animation frame 1 - Week 3 (13/04/2022)

Then I changed the weight of the C letter .

Figure 7.5 Cough type expression animation frame 2 - Week 3 (13/04/2022)

Figure 7.6 Cough GIF - Week 3 (13/04/2022)

Squeeze

Figure 7.7 Squeeze type expression animation frame - Week 3 (13/04/2022)

Figure 7.8 Squeeze GIF - Week 3 (13/04/2022)

Pop

Figure 7.9 Pop type expression animation frame - Week 3 (13/04/2022)

Figure 7.10 Pop GIF - Week 3 (13/04/2022)

Explode

Figure 7.11 Explode type expression animation frame 1 - Week 3 (13/04/2022)

These were before I add more fragments into the O.

Figure 7.12 Explode type expression animation frame 2 - Week 3 (13/04/2022)

Figure 7.13 Explode GIF - Week 3 (13/04/2022)

REVISION

I decided to go with the Pop animation, as it depict the word very well and quite clear. Gives out a dynamic feel to it

I add more frames to make a smoother animation gif.

Figure 7.14 Animation progress - Week 3 (13/04/2022)

FINAL TYPE EXPRESSION GIF

Figure 7.15 Final Pop GIF - Week 3 (13/04/2022)

Task 1- Exercise 2 - Text Formatting

This exercise uses Adobe Indesign, still using the same 10 typefaces that were given.

Text Formatting Kerning and Tracking Part 1

Figure 8.1 Some guidelines to follow on the second exercise

After I watched the lecture on Typo Ex Text formatting 1:4, I imply what I have seen and learn in this exercise. I saw what Mr. Vinod did and tried to implement it using my own name. Using the 10 typefaces that were provided. Using Kerning and Tracking, I came up with different variation of my name using the typefaces.

Figure 8.2 Progress Proof - Week 4 (20/04/2022)

Figure 8.3 Text Formatting with kerning and tracking - Week 4 (20/04/2022)

To see the difference the difference, I provide both of the version of type formatting down below.

Figure 8.4 Text Formatting without Tracking - Week 4 (20/04/2022)

Figure 8.5 Text Formatting with Tracking - Week 4 (20/04/2022)

Figure 8.6 Text Formatting Comparison - Week 4 (20/04/2022)

Next is the part 2 of this exercise which is formatting a text article.

Text Formatting Kerning and Tracking Part 2

For the next exercise we were briefed in the lecture and also the video lecture on how to do it. After I watched the lecture, I started to do the text formatting.

I create a couple of text formatting ideas.

Figure 8.7 Text Formatting Progress 1 - Week 4 (20/04/2022)

Figure 8.8 Text Formatting Progress 2 with grid and guides - Week 4 (20/04/2022)

Figure 8.9 Text Size and Leading size - Week 4 (20/04/2022)

Figure 8.10 Text Formatting (left to right) before and after kerning and tracking 1 - Week 4 (20/04/2022)

Figure 8.11 Text Formatting (left to right) before and after kerning and tracking 2 - Week 4 (20/04/2022)

Figure 8.12 Widow occurrence before kerning - Week 4 (20/04/2022)

Figure 8.13 Widow occurrence before kerning - Week 4 (20/04/2022)

There were some widows that appear in the text formatting.

Figure 8.14 After kerning 1 - Week 4 (20/04/2022)

Figure 8.15 After kerning 2 - Week 4 (20/04/2022)

For some of the design, I also input some quotation text in the layout

Figure 8.16 Quotation - Week 4 (20/04/2022)

Figure 8.17 Text Formatting Comparison - Week 4 (20/04/2022)

I then chose the 2nd option from the designs that I made which is this one.

Figure 8.18 Text Formatting (from left to right) Justified and Align left Comparison - Week 4 (20/04/2022)

I then decided to use justified for my text field. Cause personally it appeals to my eye more.

Figure 8.19 Text Formatting Result - Week 4 (20/04/2022)

After Mr. Vinod's comments, I try to fix the problems with the kerning and tracking. Firstly I changed the image cause it may disrupt the flow of reading, cause the image has a similar size type with the title. Then minimize the size of the font and leading.

Figure 8.20 Text lines that needs to be adjusted - Week 5 (27/04/2022)

Figure 8.21 Text lines that needs to be adjusted - Week 5 (27/04/2022)

To achieve a same gray area of text field I need to somehow kern all of the problematic lines. Either they are to spaced out or to tight, cause a different color.

Figure 8.22 New font size and leading - Week 5 (27/04/2022)

Figure 8.23 Turning on the Hyphenate - Week 5 (27/04/2022)

I think turning on the hyphenate do help the kerning better, cause before the hyphenate, it is a bit harder to do the kerning as it's very fixated with the justification, so it is won't budge.. even 5 mm of kerning change can't move the line. (idk maybe the system won't let me to do the kerning 🙍)

Figure 8.24 Text Field edited 1- Week 5 (27/04/2022)

Figure 8.25 Text Field edited 2 - Week 5 (27/04/2022)

Figure 8.26 Text Field edited 3 - Week 5 (27/04/2022)

FINAL OUTCOME TYPE FORMATTING

Figure 8.27 Final Outcome Type Formatting 1 JPEG- Week 5 (27/04/2022)

Figure 8.28 Final Outcome Type Formatting 2 JPEG - Week 5 (27/04/2022)

Figure 8.29 Final Outcome Type Formatting 1 PDF - Week 5 (27/04/2022)

Figure 8.30 Final Outcome Type Formatting 2 PDF - Week 5 (27/04/2022)

Figure 8.31 Final Outcome Type Formatting with grid 2 PDF - Week 5 (27/04/2022)

Font : Futura Std (Heading) , Gill Sans MT (Text)

Typeface : Futura Std Bold and Gill Sans MT regular

Font size : 41 pt(Heading), 26 pt (Author's name), 12 pt (Text)

Leading: 14 pt

Paragraph Spacing: 14 pt

Average characters per line : 52 ~ 54

Alignment: Justify

Margins : 12,7 mm (top, left, right), 12,7 mm (bottom)

Columns : 2

Gutter (for columns) : 5mm

FEEDBACK
Back to jumplinks

Week 2:

We were given these questions for us to answer ourselves to evaluating our own

work.

1. Are the explorations sufficient?

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

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

4. How can the work be improved?

General Feedback:

Pay attention to the typeface that is provided and create the effects using letterforms.

Specific Feedback:

For the cough 1, do not use the graphical elements (eyes and mouth).

For squeeze 1 and 2, need to pay attention to the typeface chosen.

For cough 3 can create the splatter using full-stop or the O letter.

For explode 3 can be too much graphical elements if use lines, can be substitute with letterforms.

Figure 9.1 Sketches of the type expressions and the comments

Week 3:

General Feedback:

Composition and placing matters

Any type expression needs to be centered (optically centered, not only technically adjust)

Specific Feedback:

For the word cough, does the C need to be that bold. It gives an unbalanced feel to the whole type expression. Maybe balance out the weight of the letter might be better. And positioning of the word needs to be more straight.

For the word explode, it can be more spread around to indicate a bigger explosion and also fill in the white space.

For the word squeeze, change the positioning of the word. Why it needs to be curved downwards?

Figure 9.2 Type expression and the comments

Week 4:

General Feedback:

Use color or highlight to give and set out the hierarchy

Specific Feedback:

- Final compilation should be only the 4 type expression using the artboard provided, in 300 dpi (PDF and JPEG)

-For the cough animation a bit fast in the animation, pause at the end

-Identify final product of animation that you want to choose

Week 5:

General Feedback:

- for blog add a heading for final submission to indicate the hierarchy of the information, fix the pdf to be centered

Specific Feedback:

- add indication where the final submission is, to be more clearer

-can reduce point size to release the tension in the text line

-change the image cause it can distract the audience from the title

- 12 pt maybe to big, reduce it can use between 8-12

Figure 9.3 Type formatting comments

REFLECTION
Back to jumplinks

Experience

During Mr. Vinod's class, I'd learned a lot. I initially thought what more to learn about typography? Isn't it only text? Why do I need to do this module? Turns out I was wrong, there are plenty of things that we need to learn. Even the basics are equally important as the next step of advanced typography. I learn the basics in typography.

When I initiate something, usually there are no boundaries as to what I can do or not do, because of the restriction of 10 typefaces, I got a little stuck, but continue sketching with my idea anyway. Some how I manage to sketch a decent ideas and are able to turn it into the digitized version with only those 10 typefaces. And I was able to depict the word and express the type without using excessive graphical elements. But honestly my idea is not VERY unique, in fact it is quite ordinary that some of my classmates have the same ideas. I learn that, to make a 100% unique idea is impossible. Nevertheless, I did my best to try and evaluate my own work, if it is nice or bad.

The hardest and most uncomfortable of them all is text formatting. As I am not familiar with InDesign at all. So it took some time for me to adapt to the program. All the small details that we need to tweak, the base line grid, the leading, the margin, the tools, the view mode, and all those stuff. I missed the base line grid and try to figure it out for almost 1 hour and then realized I was supposed to change the paragraph spacing. Choosing the layout that I liked was also difficult. And deciding on whether to do left align or justify.

For all that, I learned on how to do my work with the limitation and try to find the best way to do your work. More critical thinking! as Mr. Vinod always encourage us to do.

Observations

I've observed that maybe not only Mr.Vinod but all the people who dabble in typography prioritize visual, visual hierarchy. Even if it is in text or in blog or in the type expression. The hierarchy is important as it points out the important element that we want to show first.

Findings

I've found that there is a lot going on behind typography. From the terminologies, the restrictions and rules. I learned that typographers, not only uses typefaces but they also creates the typefaces.

I also realized that in order to be a good typographer is not as easy as it seems to be. They need to look at the smallest details that no ordinary man would look and inspect. The long history of typography that ties very tight to the history of society itself.