Typography Task 1 - Exercises 1 & 2

28.03.2022 - 28.04.2022 / Week 1 - 5

Yung Siew Weng / 0339847

Typography / Bachelor of Design (Hons) in Creative Media

Task 1 / Exercise 1 & 2

---

In week 1, the first class, we were introduced to our lecturer, Mr. Vinod, as well as given a briefing on our assignments and the structure of the module. This involves the use of a Facebook group as the primary communication channel; the lecture playlist, which consists of all of the parts and study resources for this module; and how to arrange our e-portfolio.

LECTURE RECORDING
Typography lecture 1 // Development 

1.    Early letterform development: Phoenician to Roman

Initially writing meant scratching into wet clay with sharpened stick or craving into stone with a chisel. Uppercase letterforms are the only letterforms that have existed for nearly 2000 years. At their core, uppercase forms are simple combination of straight lines and pieces of circles, as the materials and tools of early writing reired.

Fig 1.1 The development of Modern Latin to Early Arabic

Fig 1.2 The development of letter "A"

During the era of Early Greek, the Greeks had changed the direction of writing.

Direction of writing :

Phoenicians : right – left.

The Greeks : the text lines read alternately from right to left and left to right, called ‘boustrophedon’.

Both Greeks and Phoenicians did not use letter space or punctuations. 

Fig 1.3 Direction of Boustrophedon

Fig 1.4 Sample of Greek Fragment, stone engraving (Date unknown)

Fig 1.5 Late 1st century B.C.E, Augustan inscription in the Roman Forum, Rome

Etruscan (Romans) carvers working in marble painted letterforms before inscribing them.

Certain qualities of their strokes – a change in weight from vertical to horizontal and a broadening of the stroke at start and finish were carried over into the carved letterforms.

2.   Hand script from 3rd – 10th-century C.E. 

• 4^th or 5^th Century : Square Capitals

Fig 1.6 sample of square capitals

Square capitals : Written letterforms found in Roman monuments. These letterforms have serifs added to the finish of the main strokes. 
Tools to achieved : reed pen held at an angle of approximately 60 degree off the perpendicular. 

• Late 3^rd – mid 4^th century : Rustic Capitals

Fig 1.7 sample of rustic capitals

 “A compressed version of square capitals”, allowed for twice as many words on a sheet of parchment and took less time to write. 
Tools : Pen and brush in an angle of approximately 30 degree off the perpendicular.
Characteristics : faster and easier to write, but slightly harder to read due to their compressed nature. 

• 4^th century : Roman cursive

Fig 1.8 sample of Roman Cursive

For everyday transactions, forms were simplified for speed and formed with the beginnings of lowercase letterforms.

Both square and rustic capitals were typically reserved for documents of some intended performance.

• 4^th – 5^th century : Uncials

Fig 1.9 sample of Uncials

Incorporated some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U and Q. Uncials – small letters. The broad forms of uncials are more readable at small size than rustic capitals.

• C. 500 : Half uncials

Fig 1.10 sample of Half uncials

A further formalisation of cursive hand, mark the formal beginning of lowercase letterforms.

• C. 925 : Caroline minuscule 

Fig 1.11 sample of Caroline minuscule

Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardise all ecclesiastical texts. He entrusted this task to Alcuin of York, Abbot of St Martin of Tours. The monks rewrote the texts using both majuscules (uppercase), minuscule, capitalization and punctuation which set the standard for calligraphy for a century.

3.   Blackletter to Gutenberg's type

• C. 1300 : Blackletter (Textura)

Fig 1.12 sample of blackletter

With the dissolution of Charlemagne’s empire came regional variations upon Alcuin’s script.
The introduction to Blackletter : a condense strongly vertical letterform in northern Europe.

• C. 1455 : Gutenberg's type

Fig 1.13 sample of Gutenberg's type

Fig 1.14 42 line bible, Johann Gutenberg, Mainz

Gutenberg marshalled his skills and build pages that accurately mimicked the word of the scribe’s hand – Blackletter of northern Europe.

Gutenberg type : required a different brass matrix, or negative impression for each letterform 

4.  Text type classification (Dates of origin approximated to the nearest quarter century)

Type forms have developed in response to prevailing technology, commercial needs, and aesthetic trend. Certain models have endured well past the cultures that spawned them.

Fig 1.15 Text type classification

1450 Blackletter : The earliest printing type, its forms were based upon the hand-copying styles that used for books in northern Europe. Example : Cloister Black, Goudy Text
1475 Oldstyle : used by Italian humanist scholars for book copying. Example: Bembo, Caslon, Dante.

1500 Italic : contemporary Italian handwriting, the first italics were condensed and close-set, allowing more words per page.

1750 Transitional : A refinement of oldstyle forms. Thick to thin relationship were exaggerated, and brackets were lightened. Example : Baskerville, Bulmer, Century, Time Roman.

1775 Modern : a further rationalisation of old style letterforms. Serifs were unbracketed and the contrast between thick and thin strokes extreme. Example : Bell, Bodoni, Caledonia. 

1825 Square Serif / Slab Serif : Originally heavily bracketed serif, with little variation between thick and thin strokes. This faces newly developed needs of advertising for heavy type in commercial printing. Example : Clarendon, Memphis.

1900 Sans Serif : eliminated serifs altogether. Examples. Akzidenz Grotesk, Grotesk, News Gothic, Optima.

1990 Serif/Sans Serif : a family of typefaces to include both serif and sans serif alphabets. Example : Rotis, Scala, Stone.

1550 Script : Originally and attempt to replicate engraved calligraphic forms, not entirely appreciate in lengthy text settings. Example : Mistral, Snell Roundhand

Typography lecture 2 // Describing Letterforms

1.    Describing Letterforms

Fig 2.1 Describing letterforms PDF 

2.    The Font

The full font of a typefaces (font family) contains much more than 26 letters, to numerals, and a few punctuation marks. To work successfully with type, you should make sure that you are working with a full font and you should know how to use it. 

• Uppercase and Lowercase

Fig 2.2 Uppercase

Uppercase (capitals letters), including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.

Fig 2.3 Lowercase

Lowercase letters include the same characters as uppercase.

• Small Capitals

Fig 2.4 small capitals

Small capitals Uppercase letterforms draw to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called expert set.

• Uppercase and Lowercase Numerals

Fig 2.5 uppercase numerals

Uppercase Numerals (lining figures) are the same height as all of the uppercase numerals set to a same kerning width.

Fig 2.6 lowercase numerals

Lowercase Numerals (old style figures or text figures), are set to x-height with ascenders and descenders.

• Italics

Fig 2.7 Italics

The form in an italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typefaces.

Italic vs Roman

Fig 2.8 Italic vs Roman

• Punctuation, miscellaneous characters

Fig 2.9 punctuation, miscellaneous characters

Miscellaneous character can change from typeface to typeface. It is important to be acquainted with all the characters available in a typeface before you choose the most appropriate type. 

• Ornaments

Fig 2.10 Ornaments

Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family. Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (example: Adobe Caslon Pro).

3.    Describing typefaces

Fig 2.11 typefaces

• Roman
  
  Fig 2.12 roman

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

• Italic

Fig 2.13 Italics Oblique

named for fifteenth century Italian handwriting on which the forms are based. Oblique conversely are based on roman form of typeface.

• Boldface
  
  Fig 2.14 Boldface

characterised by a thicker stroke than a roman form. Depending upon the relative stroke widths within the typeface, it can be called 'semibold', 'black', 'medium', 'extra bold', super or 'poster'

• Light

Fig 2.15 #Light

A lighter stroke than roman form. Lighter strokes are also called 'thin'.

4.    Comparing typefaces

Fig 2.16 Typefaces comparing

Differences in x-height, line weight, forms, stroke widths and in feeling. Feeling connote specific use and expression. Examining typefaces allows us to know on how we feel about certain types (whimsical, stately, mechanical, calligraphic, harmonious) and also see how the appropriateness of the type choices.

Typography lecture 3 & 4// Text & Tracking 

1. Kerning and letter spacing

Fig 3.1 Width and without kerning

Kerning : the automatic adjustment of space between letters. It is often mistakenly referred to as 'letterspacing. 

Letterspacing : means to add space between the letter. 

Tracking : the addition and removal of space in a word or sentence.

Fig 3.2 normal tracking, loose tracking and tight tracking

" Designers always letterspace uppercase letters. "

Reason : Uppercase letterforms are drawn to be able to stand on their own, whereas lowercase letterforms require the counterform created between letters to maintain the line of reading.

2. Formatting Text

• Flush Left 

Fig 3.3 Flush left

This format most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last world on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even gray value (text on the white page).

• Centered 

Fig 3.4 Centered Text

This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It transforms fields of text into shapes, thereby adding pictorial quality to material that is non-pictorial by nature. Centered type usually created a strong shape on the page, its important to amend line breaks so that the text does not appear too jagged.

• Flush Right

Fig 3.5 Flush Right 

This format places emphasis on the end of a line as opposed to its start. It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right.

• Justified

Fig 3.6 Justified

Like entering, this format imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and letters.

3. Texture

Fig 3.7 Anatomy of typeface

Type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke.

Fig 3.8 Different typefaces, different gray values

Ideal typefaces : ideal text is to have a middle gray value. Fig 3.8 above shows how the different typefaces portray a different gray values in which some lighter and some darker. The best choice is to choose the typeface with a middle gray value.

4. Leading and Line Length

• Type size : Text type should be large enough to be read easily at arms length.

• Leading : Text that is set too tightly encourages vertical eye movement, which could able the reader easily loose his or her place.

• Line Length : Shorter lines require less leading; longer line more. A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short lines length will impairs reading.

5. Type Specimen Book

Fig 3.9 Sample Type specimen book

A type specimen books shows sample 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. So, a type specimen book (or ebook for screen) is to provide an accurate reference for type, type size, type leading, type line length etc.

6. Indicating Paragraphs

There are several options for indicating paragraphs. For example :

• pilcrow (¶)

Fig 3.10 Pilcrow

Pilcrow is a holdover from medieval manuscripts seldom use today.

• Leading

Fig 3.11 Sample of a good leading

Fig 3.12 line space vs leading

Leading, line space between the paragraphs : if the line space is 12 pt, then the paragraph space is 12 pt to ensure the cross-alignment across columns of text.

The space on blue cross should go with a same point to ensure cross-alignment.

Fig 3.13 standard indentation

Standard indentation : the ident is the same size of line spacing or the same as the point size of your text. (generally used)

Fig 3.14 Extended indentation

Extended indentation creates unusually wide columns of text. Despite these problems, there can strong compositional or functional reasons for choosing it.

7. Widows and Orphans

Fig 3.15 widows and orphans

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 new column

8. Highlighting Text

• Field colour

Fig 3.16 Highlighted Text with a field of colour

During the text highlighting, placing a field of colour at the back of the text, maintaining the left reading axis (right example) of the text would ensures readability is at its best.

• Quotation Marks

Fig 3.17 Highlighted Text with quotation marks

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.

Fig 3.18 Prime and quote

A prime is not a quote. The prime is an abbreviation for inches and feet. Due to the limited number of keys on typewriter, they were substituted. They were later known as 'dump quotes'.

Left - single prime (')  = feet

Left - double prime ('') = inches

9. Headline within Text

• A heads

Fig 3.19 A heads

A head indicate 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 heads

Fig 3.20 B heads

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 heads

Fig 3.21 C heads

C heads highlight specific facets of material within B head text. They don't interrupt the flow of reading. C heads in this configuration are followed by at least an em space for visual separation.

Fig 3.22 Hierarchy

Putting together (A , B, C heads) a sequence subheads = hierarchy.

10. Cross Alignment

Fig 3.23 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 pt) cross-align with three lines of text type (leaded to 13.5 pt).

Typography lecture 5 // Letters

1. Understanding letterforms

Figure 4.1 Baskerville 'A'

The uppercase letterforms suggest symmetry, but its is not symmetrical. Two different stroke weights of the Baskerville stroke form; more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Figure 4.2 Univers 'A'

The uppercase letterforms 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 (Fig. 4.2) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Figure 4.3 Helvetica and Univers 

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.

2. Maintaining x-height

Figure 4.4 's' on the median and baseline

X height : the size of the lowercase letterforms. 

But, in curved stoke, such as '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.

3. Form / Counterform

Figure 4.5 Form / counterform

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. 

"How well you handle the counters when you set type determines how well words hang together." (how easily the reader can read what's been set)

Figure 4.6 close details of Helvetica 's' and Baskerville 'g'

One of the most rewarding way to understand the form and counter of a letter is to examine them in close details. The examination also provide a good feel for how the balance between form and counter is achieved and a palpable sense of letterform's unique characteristics.

4. Contrast

Figure 4.7 simple contrast of typo

Contrast : the basic principles of Graphic Design apply directly to typography. 

The simple contrasts produces numerous variations : small + organic / large + machined ; small + dark / large + light....

Typography lecture 6 // Typography in Different Medium

In the past, typography was viewed as living only when it reached paper. 

1. Print Type vs Screen Type

• Type for Print

Figure 5.1 sample of print type

A good typeface for print - Caslon, Garamond, Baskerville are the most common typefaces that is used for print materials. 

Reason : 

- their characteristics which are elegant and intellectual but also highly readable when set at a small font size.

- they are versatile, easy to digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze.

• Type for Screen

Typefaces intended for use on the web are optimised and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduce stroke contrast as well as modified curves and angles for some designs.

Another important adjustment - especially for typefaces intended for smaller sizes is more open spacing. All of these factors serve to improve character recognition and overall readability in the non-print environment, which can include the web, e-books, e-readers, and mobile devices.

Hyperactive Link / Hyperlink : A word, phrase or image that you can click on to jump to a new document or section within the current document. It can be found in nearly all Web pages, allowing users to click their way form page to another. Text hyperlink are normally blue and underlined by default.

Font Size for Screen : 16-pixel text on a a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance.

System Fonts for screen / Web Safe Fonts : Each device comes with its own pre-installed font selection. For example, Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond.

Figure 5.2 screen (left) vs. print (right)

Figure 5.3 Pixel differential between devices

Pixel Differential Between Devices : The screens used by our digital gadgets including PCs, tablets, phone etc are not only difference sizes, but the text you see on-screen differs in proportion too because they having different sized pixels.

2. Static vs Motion

• Static Typography 

Figure 5.4 static typography

Static typography has minimal characteristics in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties. For example, billboards to posters, magazines to fliers, it encounter all form of static typography with wide ranging purposes.

• Motion Typography

Film title credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type. For example, the type is often overlaid onto music videos and advertisements, set in motion following by the rhythms of a soundtrack.

---

TASK 1 : EXERCISE 1 & 2

MODULE INFORMATION

Task 1: Exercise 1 - Type Expression

INSTRUCTION
For Exercise 1, we are given a set of words to create types of expressions such as cough, squeeze, pop, explode, grow, and wink. We had to select random 4 to create type expression in which the word "cough" is mandatory. No graphical elements are allowed and we are limited to only 10 typefaces, which are Adobe Caslon Pro, Bembo, Bodoni, Futura, Gill Sans, Garamo, New Baskerville, Janson, Serifa, and Univers.

EXPLORATION
At first, I took a look on LECTURE PLAYLIST @ Typography : Typo Expression Words

While watching the pre-recorded lecture, I followed the instruction and discovered the tools by using some words: POP, Think, Far, Wave :

Fig 6.1 The screenshot of processing (week 1 / 03.04.2022)

Fig 6.2 The screenshot of processing (week 1 / 03.04.2022)

The words that I chose are: cough, wink, pop, and squeeze. I created 3-6 designs for each word by using the Procreate application. I used the warp effects and varieties of brushes to express the idea of designs :

Fig 6.3 Type expression sketches (week 2 / 05.04.2022)

FEEDBACK @ WEEK 2 / 06.04.2022

GENERAL FEEDBACK : My sketches looks nice but there are far too many graphic elements. For the digitalised version in AI, I shall explore it more.

SPECIFIC FEEDBACK : 1. For pop, the bomb may not be suitable; suggest changing to bubbles. 2. For wink, #05 is great, but change it to "w'_nk" 3. Squeeze is too illustrated. The distortion effect creation is great. 4. Reduce the graphic elements in Cough.

As the 1st sketches contains lots of graphics elements, I try a second attempt and receiving some feedback from Mr. Vinod :

Fig 6.4 Type expression sketches 2nd attempt (week 2 / 06.04.2022)

FEEDBACK @ WEEK 2 (06.04.2022)
My chosen elements in which Cough #3, Pop #2, Wink #1, Squeeze #3 is great but Mr.Vinod suggest Cough #2 will be more great to express as in #3, the bowl idea is not suitable for the word 'Cough' .

Then, we had tasked to :

• Digitalise the sketches
• watch the lecture playlist

I decided to digitalise the Cough #2, Pop #2, Wink #1, Squeeze #3

Fig 6.5 digitalise text expression screenshot (week 2 / 06.04.2022)

While I digitalise the texts, I discover there are a variety of effects and elements that make the design come to life and more interesting, from which I came up with my 4 word final text expression :
                                

                                   

Fig 6.6 Digital version of text expression (week 2 / 06.04.2022)

# Cough

I created the text expression with the typeface GillSans std light. I put a curve on the phrase "ough". The C is depicted as a mouth in which the word "ough" is coughed from the "C."

 

# Wink

Wink is designed by the typeface, Unviers Lt std. I applied the arc effect to the "I" and decrease the size of "n". The combination of I and n creates a sense of "wink" emoji.

 

# Squeeze

Squeeze is created by the effect of squeeze, showing a sense that the phrases are squeezing to the middle of the column. The expression are created by the typefaces, Univers Lt. Std.

 

# Pop

Although my initial idea was to create a pop smile, I decided to make it look cute and decided to make it in this way, which creates a sense that the "O" is a bear, popping out of nowhere.

To continue the task on make the text to be animated, we had been tasked to watch the lecture playlist about the typo expression animation :

Lecture playlist @ Typo Expression Animation_Basic

While viewing the lecture, I also tried to discover it. The process all began with Adobe Illustrator and Photoshop to make the animation. Overall, It’s quite fun and below is my discovery :

Fig 6.7 Discovery in Photoshop screenshot (week 2 / 06.04.2022)

Fig 6.8 GIF discovery  (week 2 / 06.04.2022)

FEEDBACK @ WEEK 3 / 13.04.2022

The idea is great but the position within the space seems weak. Bigger the text #pop to make the white space lesser.

For the practical class, we had been tasked to digitalise the typo :

# COUGH

My intention with "Cough" is to convey the impression that the 'ough' coughs from the C. Meanwhile, the C is shown as a mouth that expands when the letter 'ough' is coughed out :

Fig 6.9 screenshot of #COUGH GIF progress in AI (week 3 / 13.04.2022)

Fig 6.10 Cough discovery 1 #GIF (week 3 / 13.04.2022)

# SQUEEZE

Fig 6.11 screenshot of #SQUEEZE GIF progress in AI (week 3 / 13.04.2022)

Fig 6.12 SQUEEZE discovery 1 #GIF (week 3 / 13.04.2022)

FEEDBACK @ WEEK 3 / 13.04.2022
The #COUGH seems like vomit nor coughed out and the #SQUEEZE may express by the sense of squeezing in and out.

To make the typo animate in a more interesting ways, I did some exploration for the best GIFs :

Fig 6.13 screenshot of exploration in AI (week 4 / 19.04.2022)

GIFS PROGRESS 

I had go through all 4 types of type expression to discover the best within them.

# COUGH

Fig 6.14 progress of #cough (week 3 / 17.04.2022)

Fig 6.15 #cough GIF (week 3 / 17.04.2022)

# POP

Fig 6.16 progress of #pop (week 3 / 17.04.2022)

Fig 6.17 #pop GIF (week 3 / 17.04.2022)

# SQUEEZE

Fig 6.18 progress of #squeeze (week 3 / 17.04.2022)

Fig 6.19 #squeeze GIF (week 3 / 17.04.2022)

# WINK

Fig 6.20 progress of #wink (week 3 / 17.04.2022)

Fig 6.21 #wink GIF (week 3 / 17.04.2022)

FEEDBACK @ WEEK 4 / 20.04.2022
All forms of GIFs appear to be nicely done, but Mr. Vinod suggests going with the 'squeeze' since it appears to be more fun. And, if the #pop break at the end will be more interesting.

As Mr. Vinod suggest that the 'squeeze' had stylised a more powerful type expression, so I would take the 'squeeze' as my final outcome of the exercise.

The type expression had finished up by 21 frames, conveying a sensation of the middle 'E' being squeezed out of the phrases by the other letter.

Fig 6.22 Type expression final outcome framing - screenshot (week 4 / 20.04.2022)

FINAL OUTCOME / EXERCISE 1

Final outcome of type expression, JPG : 

Fig 6.23 Final outcome of type expression - Jpg (week 4 / 19.04.2022)

Final outcome of type expression, PDF : 

Fig 6.24 Final outcome of type expression - PDF (week 4 / 19.04.2022)

Final outcome of type expression, GIF : 

Fig 6.25 Final outcome Type expression GIF (week 4 / 20.04.2022)

Fig 6.26 Final outcome Type expression GIF - PDF (week 4/20.04.2022)

Fig 6.27 Final outcome #squeeze (week 4 / 20.04.2022)

Task 1: Exercise 2 - Text Formatting

INSTRUCTION

We were be given incremental amounts of text that address different areas within text formatting including type choice, type size, leading, line-length, paragraph spacing, forced line-break, alignment, kerning, widows and orphans etc to create one final layout. These minor tasks will help us increase familiarity and capability with the appropriate software and develop our knowledge of information hierarchy and spatial arrangement. We are allowed to use Adobe InDesign for the exercise.

EXPLORATION 
In this week (week 3), I started on the lecture recordings @ Text Formatting 1:4.
The software that is applied in this exercise is Adobe InDesign, whereas the typefaces used are the 10 typefaces that were provided in the early semester.

Text Formatting 1 : 4 // Kerning & Tracking

Kerning adjusts the space between individual letterform, whereas tracking (letter-spacing) adjusts spacing uniformly over a range of characters.

Fig 7.1 10 typefaces (week 3 / 16.04.2022)

According to Mr. Vinod, what we should be focusing is on the awkward spaces between the individual letterforms. We may select to track / kern the letters to make it more qualities by (Option + Left/ Right Key)

BEFORE Kerning :

Fig 7.2 Before Kerning (week 3 / 16.04.2022)

AFTER Kerning :

Fig 7.3 After Kerning (week3 / 16.04.2022)

The space of letterforms seems more qualities and well spaced after the kerning process. 

Then, we are assigned to try the kerning process in Adobe InDesign by using our names. After kerning within each individual letterforms, we are allowed to add some general tracking by (select all > Option + Left/Right Key)

Fig 7.4 The formation of Kerning on self-names (week 3 / 16.04.2022)

We are allowed to experiment the variety of typefaces (including roman, bold, italics etc) to present the best typo :

Fig 7.5 Before Kerning, experiment with variety of typefaces (week 3 / 16.04.2022)

Then, I began the kerning process with the typefaces. Examples of some typefaces on before and after kerning process :

Fig 7.6 Before & after kerning (week 3 / 16.04.2022)

Although the kerning & tracking process appears to be a minor step in a text, it plays a vital function. It can clearly seems that there is differences between before & after kerning and tracking ( blue text before tracking & kerning, black text after tracking & kerning)

Fig 7.7 Before & after kerning and tracking (week 3 / 16.04.2022)

Fig 7.8 Final outcome, Text Formatting 1:4 - Jpeg (week 3 / 16.04.2022)

Fig 7.9 Final outcome, Text Formatting 1:4 - PDF (week 3 / 16.04.2022)

Text Formatting 2 : 4 // Font Size, Line Length, Leading & Paragraph Spacing

For a new continuous page, (drag A-master/A-parent > place at the side of the initial page)

First, we learn on how to manipulate the Grid system. It normally a system that allow you to arrange information within the given space. "A good page layout is heavily dependent on an attractive margin space."

Adjust the margin (Layout > Margins and Columns)

* Your documents does not seems appealing if having a same size of margin in four sizes. By having different margin spacing, it creates Dynamic.

Fig 7.10 #margins and columns  (week 3 / 17.04.2022)

Font size within A3/A4 document, generally should be about 8 to 12 points. Each line should contain an average of 55 to 60 characters. Text leading should be 2 -3 pt bigger than the font sizes.

Fig 7.11 text formatting  (week 3 / 17.04.2022)

Fig 7.12 outcome, text formatting 2:4  (week 3 / 17.04.2022)

Text Formatting 3 : 4 // How to Connect Text Fields, Alignment & Ragging

In any design, we must identify the hierarchy of information - what we want our viewers to observe at the first.

To place an image, (command + D) . In InDesign, we cannot directly manipulate the picture. To resize the image, we need to click the Selection Tool (A).

Fig 7.13 #image framing (week 4 / 20.04.2022)

These Frame Fitting Options allows you to fit the image according to the border that created.

When dealing with a topic or same content information, you cannot switch or customise the body text sizes around. To maintain the information hierarchy, the same text width for the type of information should be applied.

Fig 7.14 Same text width, between left & right columns (week 4 / 20.04.2022)

To smoothen the ragging on the right, letter tracking & kerning should be applied. (InDesign >  Preferences > width & increments). The kerning increment should be at 5/1000em. The rule of thumb is to not exit 3 units of kerning.

Usually, Hyphens (-) can be gone by pressing the function (Hyphenate). 

Fig 7.15 Before hyphenate (week 4 / 20.04.2022)

Fig 7.16 After hyphenate (week 4 / 20.04.2022)

Once the kerning of the lines are adjusted, we looked into Text Adjustment. In particular text, it is good to use left alignment, left Justified.

Fig 7.17 Before ragging (week 4 / 20.04.2022)

Next, we are taught to align the text to the baseline of the columns. Click (command + B) to get the Text Frame Options.

Fig 7.18 After ragging & baseline (week 4 / 20.04.2022)

Fig 7.19 outcome, text formatting 3:4  (week 4 / 20.04.2022)

Text Formatting 4 : 4 // Layout

In this particular lecture recording, Mr. Vinod highlighted on Baseline Grids & Cross Alignment.

By increase the font text , (Command + Shift + >)

If our headline point size is 17, in order to form cross alignment to happen, we must make sure our leading is on multiples of 2.

Baseline Grid, by clicking (View > Grids & Guides > show baseline Grid). The blue line is the baseline grid.

Fig 7.20 Baseline Grid (week 5 / 26.04.2022)

Purpose of Baseline Grid : make sure each of the line of the text sit on the baseline grid in order to achieve cross alignment. 

To edit the Baseline Grid, make every single line sit on the grid (Preferences > Grids)

Text Frame Options (Command + B), change offset from Ascent to Leading, Vertical Justification from bottom to top.

Fig 7.21 achieved cross alignment (week 5 / 26.04.2022)

Fig 7.22 outcome, text formatting 4:4 (week 5 / 26.04.2022)

Fig 7.23 outcome, text formatting 4:4, gray scale, JPG (week 5 / 26.04.2022)

After watching the lecture recordings, text formatting 1:4 - 4:4A, I start a journey to discover the best layout. At first, I tried both text adjustment, left alignment and left justified to achieve the best format. 

Fig 7.24 Left alignment & Left justified (week 5 / 26.04.2022)

I tried both text adjustment on one layout design :

Fig 7.25 Left justified (week 5 / 26.04.2022)

Fig 7.26 Left alignment (week 5 / 26.04.2022)

I believe that left alignment is more appropriate for the layout style since it adds a sense of aliveness to the layout as left justified seems so tidy and neat in the layout.

Fig 7.27 Draft 1- JPG (week 5 / 26.04.2022)

TEXT FORMATTING DETAILS #draft 1:

Font : Univers Lt Std, ITC New Baskerville

Typeface : Univers Lt Std Roman, ITC New Baskerville Roman

Type Size : 9 pt (body text), 11 pt (subtext), 20 pt and 30 pt (heading)

Leading : 11 pt

Paragraph spacing : 11 pt

Average character per line : 53

Alignment : Left alignment 

Margins : 56.693 pt (top), 95.039 pt (bottom), 36 pt (left and right)

Columns : 4

Gutter (for columns) :14.173 pt

Fig 7.28 Draft 2- JPG (week 5 / 26.04.2022)

TEXT FORMATTING DETAILS #draft 2:

Font : Univers Lt Std, ITC New Baskerville

Typeface : Univers Lt Std Roman, ITC New Baskerville Roman

Type Size : 9 pt (body text), 11 pt (subtext), 20 pt and 30 pt (heading)

Leading : 11 pt

Paragraph spacing : 11 pt

Average character per line : 53

Alignment : Left alignment 

Margins : 141.732 pt (top), 99.213 pt (bottom), 36 pt (left and right)

Columns : 4

Gutter (for columns) :14.173 pt

Fig 7.29 Draft 3 - JPG (week 5 / 26.04.2022)

TEXT FORMATTING DETAILS #draft 3:

Font : Univers Lt Std, ITC New Baskerville

Typeface : Univers Lt Std Roman, ITC New Baskerville Roman

Type Size : 9 pt (body text), 11 pt (subtext), 20 pt and 30 pt (heading)

Leading : 11 pt

Paragraph spacing : 11 pt

Average character per line : 53

Alignment : Left alignment (body text), right alignment (heading & subtext)

Margins : 56.693 pt (top and bottom), 36 pt (left and right)

Columns : 4

Gutter (for columns) :14.173 pt

FEEDBACK @ WEEK 5 / 27.04.2022 (TEXT FORMATTING)

Layout is great, but the image should be relevant to the text. The text formatting seems complex, some ragged left and some left justified. Make the text formatted in either left justified or left alignment only.

As the image used is not relevant and the text is not formatting well, I tried with the previous image that I used in the exercise, which is showing the many forms of Helvetica in magazines.

Fig 7.30 Draft 4 - JPG (week 5 / 27.04.2022)

FEEDBACK @ WEEK 5 / 27.04.2022

The layout and composition is great. Image is fine, but the last second paragraph of the left looks loosen.

I adjust the text by kerning it within 3 units /+-

Fig 7.31 Before adjustment (week 5 / 27.04.2022)

Fig 7.32 After adjustment (week 5 / 27.04.2022)

Fig 7.33 outcome, after adjustment (week 5 / 27.04.2022)

FINAL OUTCOME / EXERCISE 2

Final outcome text formatting, JPG :

Fig 7.34 Final Outcome - JPG (week 5 / 27.04.2022)

Final outcome text formatting with baseline, JPG :

Fig 7.35 Final Outcome with baseline - JPG (week 5 / 27.04.2022)

Final outcome text formatting, PDF :

Fig 7.36 Final outcome text formatting - PDF (week 5 / 27.04.2022)

Final outcome text formatting with baseline, PDF :

Fig 7.37 Final outcome with baseline - PDF (week 5 / 27.04.2022)

TEXT FORMATTING DETAILS #Final outcome:

Font : Univers Lt Std, ITC New Baskerville

Typeface : Univers Lt Std Roman, ITC New Baskerville Roman

Type Size : 9 pt (body text), 11 pt (subtext), 20 pt and 30 pt (heading)

Leading : 11 pt

Paragraph spacing : 11 pt

Average character per line : 53 - 63

Alignment : Left Justified

Margins : 85.039 pt (top and bottom), 36 pt (left and right)

Columns : 4

Gutter (for columns) :14.173 pt

---

FEEDBACK 

WEEK 2 / 06.04.2022

GENERAL FEEDBACK : My sketches looks nice but there are far too many graphic elements. For the digitalised version in AI, I shall explore it more.

SPECIFIC FEEDBACK : 1. For pop, the bomb may not be suitable; suggest changing to bubbles. 2. For wink, #05 is great, but change it to "w'_nk" 3. Squeeze is too illustrated. The distortion effect creation is great.

4. Reduce the graphic elements in Cough.

SECOND ATTEMPT

My chosen elements in which Cough #3, Pop #2, Wink #1, Squeeze #3 is great but Mr.Vinod suggest Cough #2 will be more great to express as in #3, the bowl idea is not suitable for the word 'Cough'.

WEEK 3 / 13.04.2022

THE DIGITAL TYPO

The idea is great but the position within the space seems weak. Bigger the text #pop to make the white space lesser. 

GIFs PROCESS
The #COUGH seems like vomit nor coughed out and the #SQUEEZE may express by the sense of squeezing in and out.

WEEK 4 / 20.04.2022
All forms of GIFs appear to be nicely done, but Mr. Vinod suggests going with the 'squeeze' since it appears to be more fun. And, if the #pop break at the end will be more interesting.

WEEK 5 / 27.04.2022 

E-PORTFOLIO
GENERAL FEEDBACK : Overall, great.

SPECIFIC FEEDBACK : 

1. Change the e-portfolio background from white to light grey to let the white images more visible.

2. Export the Jpeg by clicking with the 'artboards'.

3. Join all the feedback in a feedback section.

TEXT FORMATTING

Layout is great, but the image should be relevant to the text. The text formatting seems complex, some ragged left and some left justified. Make the text formatted in either left justified or left alignment only.

SECOND ATTEMPT

The layout and composition is great. Image is fine, but the last second paragraph of the left looks loosen.

SUBMISSION

Ex 1 is acceptable the exploration and documentation is admirable. Ex 2 is excellent. Eportfolio task 1 is excellently documented.

---

REFLECTION

EXPERIENCE

Overall, the experience of typography till today (week 2, 2/06.04.2022) is so interesting. Aside from watching the historical lecture playlists, I prefer to watch more of the tutorials that teach us how to use Adobe. I had really enjoy myself on creating the text expression till I added too many graphic elements, causing the design to crash and became more complex in this particular exercise. After I tried more and more attempts, I felt like I was going to be on the right track and master some basic principles. Overall, I had enjoyed myself either creating or digitalising the typo idea.

For the type expression exercise, I really enjoyed myself on creating an amazing GIFs, which having a notion to create the GIF that talk.  For example, for the word 'wink', I wanted to make a GIF that showed the concept of the phrase is winking, or for the term 'squeeze'. I wanted to make a GIF that showed the concept of the phrase is squeezing. Through this exercise, I found that words can communicate through creating GIFs. Despite the fact that the procedure has taken several late nights, I am pleased to have gotten Mr. Vinod's positive feedback on my progress, which shows that my efforts are paying off! 

Furthermore, in exercise 2, the text formatting, I experienced a headache and confusion at the start and even during the process. There are lots, lots, lots of rules to formatted a typo well. During the progression, I made a mistake by picking an inappropriate image for the content provided, causing the article and the image to be disconnected. At first, I thought the image would convey a feeling of minimalist style, however my view is too far from the typo world in which text formatting is more important than the layout design for this particular exercise.  Following Mr. Vinod's feedback on the specific progression check, I believed that I should rather follow the typographic guidelines across all of the tasks, as this is the second time I have over-expect the typography world's directions. However, practise improves the quality, value, and intrigue of the final product. I'm delighted I got the chance to make a mistake and then fix it. 

Overall, my experience over the previous five weeks has been excellent, however busy in joy during midnights.

OBERVATIONS

Although most of us come up with similar design sketches, they are also different within each, such as the various sizes of shapes as well as the fonts used. In addition, I observed that sketches are just sketches but when it comes to digital, it will be hard if many curves and graphics elements are added. 

During the type expression exercise, I noticed that animation, such as GIFs, is frequently formed from frames, which implies that the animation we see in real life is made one by one, one frame by one frame. When you receive wonderful GIFs, it is really intriguing and amazing as GIF can make people laugh. GIF will move dissimilarly, bringing a different message and idea viewpoint whether adding or removing a frame.After completing all of the activities in Task 1, I realised that the simplest things were the most challenging, as typography is the most simple and complicated presence in the typo world. I've discovered that text formatting is a critical stage in typographic design. A well-formatted layout will draw the audience's attention, but a poorly structured error will cause the reader to "shut down the content".

 

FINDINGS

At first, I felt that typography was just using the font to create graphics elements. But after the observations and feedback, I found the best font design is the one that is the simplest and created through the words themselves. I also discovered that typography has many rules, which took some time to figure out and understand.

There are lots of shortcut keys in both illustrator and photoshop to make the work goes faster and efficiently which might be helpful for me, a design student in future. 

---

FURTHER READING

I found some books online. Overall, all of them are very interesting and gave me some extra informations which related to typography. 

1. The fundamentals of Typography (2011)

Fig 8.1 The fundamentals of Typography (2011)

Type of source : e-book

Name : The Fundamentals of Typography: Vol. 2nd ed. 

Author : Ambrose G., & Harris P.

Year of publication : 2011 

• Reading Direction (p.11)

Fig 8.2 The fundamentals of Typography (2011), p.11

Based on the page about the alphabet, in addition to the boustrophedon style, it also stated with varieties of reading direction such as Latin (from left to right), Arabic (from right to left) and Chinese (began the page from the right, while scroll with the left).

Instead, some terms are describe in the page;

Phonogram : a written symbol, letters character or other mark that represents a sound, syllable, morpheme or word.

Ideogram : a graphic element that represents an idea or concept

Icon : a graphic elements that represents an object

Symbol : a graphic element that communicate the idea and concepts

Pictogram : a graphic element that describe an action or series action through visual references or clues.

• Typefaces and font (p.40)

Fig 8.3 Sample of typefaces and font

Based on the book, people including designer usually cannot differentiate the different between typefaces and font.

Typefaces : a collection of character which have the same distinct design.

Font : the physical means of typeface production - be it the description of a typeface in computer code, lithographic film or metal.

• Standard Paper Sizes (p.58-59)

Fig 8.4 Paper size format

Standard paper sizes provide a convenient and efficient means for designers, printer and others involved in printing and publishing to communicate product specification and keep costs down.

According to the modern ISO (International Organization for Standardilization), paper size system is based on the metric system using the square root of two ratio (1:1:4142) with format AO having an are of one square metre. Paper with this ratio will maintain its aspect ratio when cut into half. 

2. Design Elements, Typography Fundamentals (2012)

Fig 8.5 Design Elements, Typography Fundamentals (2012)

Type of source : e-book

Name : Design Elements, Typography Fundamentals : A Graphic Style Manual for Understanding How Typography Affects Design. 

Author : Kristin Cullen

Year of publication : 2012

• Glyphs and character (P.33)

Fig 8.6 Glyphs and character

Glyphs : comprise all marks in a typeface from letterforms and numerals to punctuation and symbols. For instance, a diacritic (accent mark) is glyphs, not a character.

Character : a typographic elements such as letterform, numeral, or the punctuation mark. Typefaces might have multiple version of each character represented by glyphs.

• Text Lining (P.45)

Fig 8.7 Text Lining

There are different 'lining' contains in typo world too such as :

Lining figures (titling figures) are numerals that are the same heigh as uppercase letterforms.

Non-lining figures ( old-style or text figures) are numerals with variable widths, ascenders, and descenders. Some sit on the baseline (0,1,2,6,8); others fall below it (3,4,5,7,9).

Proportional figures are numerals with variable width or body size.

Tabular Figures are monospaced numerals, meaning all share the same character width or fixed width.

Inferiors and Superiors are small character used for special text such as footnotes mathematical notations and scientific formulas.

• Analphabetic and type style (P.46)

Analphabetic is the character used with the alphabet and are not included in its alphabetic order. They include punctuation, diacritic (accent or diacritical marks), and symbols. Punctuation marks clarify text structure and meaning. Below are the sample of the groups of analphabetic character :

Fig 8.8 sample of analphabetic

Symbols, such as arithmetical and currency signs, as well as copyright and registered marks, are special-purpose characters in analphabetic.

• Categories of type (P.58-61)

Nowadays, various classification system exist, each with organisational methods based on factors such as historical development, formal attributes and intended use. Dedicated only serifs and sans serifs suited for most text, it is not comprehensive model covering all typefaces but its formal traits and historical development shape the fundamental type categories.

Fig 8.9 Serif, slab serif and sans serif

Serif - Humanist, Old style, Transitional and Modern

Slab Serif - Egyptian and Clarendon

Sans serif - Grotesque, Geometric, Humanist and Transitional

3. Typography, Referenced (2012)

Fig 8.10 Typography Referenced (2012)

Type of source : e-book

Name : Typography, Referenced : A Comprehensive Visual Guide to the Language, History, and Practice of Typography

Author : Jason Tselentis, Allan Haley, Richard Poulin, Tony Seddon, Gerry Leonidas, Ina Saltz, Kathryn Henderson, & Tyler Alterman

Year of publication : 2012

• Typographic Principles (p.207-233)

FORMAT (the golden section)

In western cultures, the golden section refers to this ratio between two numbers: 1:1:618. It has also been represented as a:b = b:(a+b). The proportion has been used since ancient times, even identified in Ancient Greek architecture and art.

Fig 8.11 The golden section

Above are the process for building a golden section :

1. Draw a square of any size.

2. Bisect the square down the middle.

3. Draw a line from the bottom left corner of the bisection to the upper right corner.

4. Rotate the line down to the square's baseline.

5. Draw a vertical line up from the new baseline to the top of the square, then left forward the square to close the new form.

TYPOGRAPHY SELECTION

Text type

For text type, use typefaces designed for the purpose of uninterrupted reading such as Caslon, Bembo and Garamond. Line length, word spacing, and leading all factor into a book text's readability, but choosing a good typeface is as good a place as any to start.

Display type

Display type needs to quickly catch reader's attention, much like the messages on posters, advertisements, and promotions.

READING DIRECTION AND SCANNING

Reading Direction

Fig 8.12 Reading Direction

Reader typically begin at the top left (at the circle) and scan right and down, left and down, until finally reaching the composition's bottom.

Focal point

Dynamic compositions, especially those meant to attract a viewer's attention, often employ a focal point that does not allow a reader to scan starting with the top-left corner. In these compositions, designers take control to lead the reader what to read first on the format. 

Fig 8.13 focal point

Contrasts in size, shape, typeface, color, and texture create these focal points.

FREE PLACEMENT

Working in free placement can have its benefits, especially when a photograph or illustration has to be a primary element.

Fig 8.14 free placement

Freely positioning elements within the format can create exciting and dynamic compositions.

THE GRID

Grid is a tool that allows a designer to create composition with some semblance of unity and variety. 

Grid Types

Fig 8.15 grid types

Book and manuscript grid : grids used for books and manuscript typically have the fewest complexities, but constructing them takes time and forethought. Because books are usable, highly interactive pieces of design, proportional relationships should be happen between inside, outside, top and bottom margins.

Columnar grid : grids that can have any number of vertical divisions across the format, with as few as one per page.

Modular grid : a series of horizontally and vertically aligned modules create the structure on which text and image can reside.

HIERARCHY

Hierarchy refers to the level of importance expressed by a piece of text in its environment, whether print-based or on screen. 

Fig 8.16 Hierarchy

A variety of factors may indicate hierarchy: letterform sizes, letterform weight, letterform design characteristics, text color, text contrast with the background, text position and orientation on the page or screen and general mass.

UNITY AND VARIETY

Unity

When differing elements on a format look like they belong together, designers call it unity.

Variety

Variety is one of the primary tools to create hierarchy by varying. For example, the typeface's size, tone, color, texture, placement, weight, width and position. 

Fig 8.17 sample of unity and variety

Variation between typographic elements can go a long way to differentiating levels of information at both large and small scales, creates unity.

SYMMETRY AND ASYMMETRY

Graphic designers can achieve balanced compositions through symmetrical or asymmetrical compositions. 

Symmetrical composition

A symmetrical layout results when the left and right sides of a composition receive equal weight, The mirror-imaged layout often brings about less dynamic work than the contrasting option of symmetry. 

Asymmetrical composition

An asymmetrical composition occurs when there is nothing similar between left and right. These tend to be less static than symmetrical work and less reliant on the centres, where everything falls into a convenient and comfortable place. 

WHITE SPACE

Designers call compositional ares that do not include text, image, or graphic elements as white space or negative space.

Fig 8.18 white spaces

Formally, white space allows the reader an opportunity to focus on the element or elements that demand the most attention. Conceptually, white space can further an underlying message that the designer hopes to communicate with the viewers.

CONTRAST

Contrast is one of the best ways to create differentiation between graphic elements. With typography, contrasts in size, weight, width, color, position and typefaces are just some of the means to separate information or catch a viewer's glance. 

Fig 8.19 element with contrast

With typographic contrast, reader can immediately see what matters most instead of being forced to read and make judgements on their own.

TYPEFACE PAIRING

Pairing typefaces should be more about contrast than similarity. For example, using Helvetica and Arial together in a composition does little to no good as for the average viewer who won't notice the differences between the letterforms.

Sample of typeface pairing outcome :

Fig 8.20 sample of typeface pairing outcome

So how exactly do designers decided which typefaces well together?

Unfortunately, no prescription exists. No matter the pairing, make sure the selected fonts honor the content, ensure readability and speak to any conceptual undertones that need to come across.

---

REFERENCE

Ambrose, G., & Harris, P. (2011). The Fundamentals of Typography: Vol. 2nd ed. AVA Publishing.

Kristin Cullen. (2012). Design Elements, Typography Fundamentals : A Graphic Style Manual for Understanding How Typography Affects Design. Rockport Publishers.

Jason Tselentis, Allan Haley, Richard Poulin, Tony Seddon, Gerry Leonidas, Ina Saltz, Kathryn Henderson, & Tyler Alterman. (2012). Typography, Referenced : A Comprehensive Visual Guide to the Language, History, and Practice of Typography. Rockport Publishers