Typography: Task 1 / Exercise 1 & 2

For the first week of lecture, Mr Vinod introduced the concept of Typography. He explained that Typography is an act of creating typefaces or type families. Research from Wikipedia shows that Typography was described as the art and technique of arranging types to make written language legible, readable, and appealing when it is displayed.

Typography can be seen at many places in our daily lives. Typography is applied in animation, application design, website design, signage design, posters, books, and more. Typography also evolved for about 500 years, from calligraphy to lettering and it is now known as typography.

Terminological Reference (between font and typefaces)

Font: A font refers to the individual font or weight within typefaces

Figure 1.1.1 Font Example, Week 1 (26/09/2023)

Typeface: A typeface refers to the entire family of fonts or weights that share similar characteristics or styles

Figure 1.1.2 Typefaces, Week 1 (26/09/2023)

Lecture 2

Week 1B - Development

In lecture 2, we learnt about the timeline and development of early typefaces. Mr Vinod also taught us the importance of understanding history and these developed type of letterforms.

1. Early letterform development: Phoenician to Roman

In the earliest stages, writing can be done by scratching into wet clay with sharpened stick or carving into stone with a chisel. Meanwhile the figure on the right shows the timeline of how Phoenician evolved to form Modern Latin and Early Arabic.

Figure 1.1.3 Phoenicians votive stele Carthage, Week 1 (26/09/2023)

Figure 1.1.4 Evolution from Phoenician letter, Week 1 (26/09/2023)

Writing Style

There is also different direction of writing between Phoenicians and Greeks.

Phoenicians: wrote from right to left

The Greeks: wrote from right to left and left to right alternately. This style of writing is known as 'Boustrophedon' (how the ox ploughs). The orientation of the letterforms changes when the direction of reading has changed.

The Greeks and Phoenicians did not use letterspace or punctuations.

Below is an example of how boustrophedon works.

They have to be fluent in reading reversed words.

Figure 1.1.5 Greeks Writing Style, 'Boustrophedon' , Week 1 (26/09/2023)

Figure 1.1.6 Greek Fragment, stone engraving (Date unknown), Week 1 (26/09/2023)

Direction of letterforms:

Etruscan (and Roman) carvers paint letterforms before engraving them in stone, which leads to the quality of strokes and letterform weight (change in weight) from vertical to horizontal, and a broadening of the stroke at start and finish was then carried over into the carved letterforms.

Figure 1.1.7 Evolution from Phoenician to Roman, Week 1 (26/09/2023)

Figure 1.1.8 Augustan inscription in the Roman Forum, Rome, Week 1 (26/09/2023)

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

Square capitals can be found in Roman monuments and have serifs added to the finish of the main strokes. Different stroke widths were achieved by using a red pen (held at angle of +/- 60° off the perpendicular).

Figure 1.1.9 4th/5th Century: Square Capitals, Week 1 (26/09/2023)

Rustic capitals was a compressed version of square capitals which allowed for twice as many words on a sheet of parchment and took lesser time to write. It can be found in the Roman Monuments as well. Rustic capitals are slightly harder to read due to their compressed nature. The pen was held at angle of +/- 30° off the perpendicular).

Figure 1.1.10 Late 3rd - mid 4th century: Rustic Capitals, Week 1 (26/09/2023)

Cursive hand / Lowercase letterforms were simplified for speed was written for everyday transactions as it is simple and fast to write instead of Rustic & Roman capitals as they were reserved for more official documentary purposes. The beginning of Roman cursive refers to the lowercase letterforms.

Figure 1.1.11 4th century: Roman Cursive, Week 1 (26/09/2023)

Uncials can be found in some aspects of the Roman cursive hand, particularly in the shapes of

A, D, E, H, M, U, Q. Uncials us more broad and readable, compared to Rustic Capitals. It does not have uppercase and lowercase but it is normally understood as small letters.

Figure 1.1.12 4th/5th century: Uncials, Week 1 (26/09/2023)

Half uncials were a further formalization of the cursive hand. and marks the formal beginning of lowercase letterforms with the use of ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.

Figure 1.1.13 C.500: Half-uncials, Week 1 (26/09/2023)

Standardized Calligraphy

Charlemagne, the first unifier of Europe after the Romans, appointed Alcuin of York, who served as the Abbot of St. Martin of Tours, with the task of standardizing all religious texts. In this effort, monks rewrote the texts using both majuscules (uppercase), minuscule, capitalization and punctuation which set the standard for calligraphy for a century.

Figure 1.1.14 C.925: Caroline minuscule, Week 1 (26/09/2023)

3. Blackletter to Gutenberg’s type

After Charlemagne's empire is dissolved, there came regional variations upon Alcuin's script. Blackletter (textura) gained popularity in the Northern Europe, it is known to be more condensed and vertical. In the Southern Europe, a rounder more open hand gained popularity called 'Rotunda'.

Figure 1.1.15 Texture Blackletter in 1400s, Week 1 (26/09/2023)

Figure 1.1.16 Rotunda Blackletter, Week 1 (26/09/2023)

Gutenberg marshaled skills like engineering, metalsmithing and chemistry to build pages that accurately mimicked the work of the scribe's hand which is the Blackletter of Northern Europe. He invented the movable type printing press which led to information revolution. His many inventions includes oil based ink for book printing, adjustable molds and wooden printing press.

Figure 1.1.17 Rotunda Blackletter, Week 1 (26/09/2023)

4. Text type classification

Summary of different text type classifications

Figure 1.1.18 Summary of text type classification, Week 1 (26/09/2023)

3 October 2023

Lecture 3

Week 2 - Text_P1

1. Tracking: Kerning and Letterspacing

Kerning: Automatic adjustment of space between letters. It is commonly misunderstood as letter spacing. However, letter spacing is the additional of spacing between letters. Kerning and letterspacing is normally used in headlines and uppercase letters.

Figure 1.2.1 With & Without Kerning, Week 2 (3/10/2023)

Letterspacing: Add Space between the letters.

Tracking: Addition and removal of space in a word or sentence. Tracking is normally used in large text. There are 3 types of tracking; normal tracking, tight tracking, and loose tracking.

Normal tracking - used in large paragraph of texts as the readability is high
Lose tracking & Tight tracking - will reduce the readability of the words as readers recognize the counterform of space in between the strokes (NOT suitable for large paragraphs of texts)

Figure 1.2.2 Normal, Tight & Loose Tracking, Week 2 (3/10/2023)

Uppercase letters are suitable for letter spacing and loose tracking, while lowercase letters do not. It is because uppercase letters are able to stand on their own while lowercase letters require the counterform created between the letters in order to maintain the readability of text.

2. Alignment / Formatting of text

Flush left: mirrors the asymmetrical experience of handwriting. It closely resembles the asymmetrical experience of handwriting. Constant spacing is used throughout the text, allowing to create an even grey value. Grey value refers to text on white page. Flush left will result in a ragged right, it is important to make the ragged right look smoother.

Figure 1.2.3 Flush Left, Week 2 (3/10/2023)

Centered: imposes symmetry upon the text and resulting in equal value & balance between the left and right ends. This format will transform text into shape hence it is important to amend the breaks to not result in looking too jagged. Centered format is normally found in small paragraphs, not long paragraphs as it is hard to read.

Figure 1.2.4 Centered, Week 2 (3/10/2023)

Flush right: Emphasis is placed on the end of the line, commonly found in captions where the relationship between the text and pictorial might be ambiguous without strong orientation from the left to right.

Figure 1.2.5 Flush right, Week 2 (3/10/2023)

Justified: Similar to cantering, this format imposes a symmetrical structure onto the text. It can be done by expanding or reducing (adjusting) the spaces between words and individual letters. This adjustment in spacing can lead to lines appearing more open, and may result in vertical ‘rivers’ of white spaces running through the text. To fix this issue, it is crucial to pay careful attention to line breaks and hyphenations.

Figure 1.2.6 Justified, Week 2 (3/10/2023)

3. Texture

Different textures of different typefaces are very important. Fonts with a higher x-height or thicker strokes create a denser appearance on the page compared to fonts with a lower-x height or thinner strokes. Sensitivity to these differences in colour is crucial for creating good layouts.

Figure 1.2.7 Anatomy of Typeface, Week 2 (3/10/2023)

Differences between grey value can be easily spotted in the variation of typefaces. Typefaces with middle grey value is the ideal choice which is more legible and readable.

Figure 1.2.8 Different Typefaces with different grey values, Week 2 (3/10/2023)

4. Leading & Line Length

The main goal for setting text type is readability and easy prolonged reading.

Text size: text should be of a size that allows easy reading when held at arm’s length

Leading: text that is too tightly together can make the reader to easily lose their place. The spaces between text to text (too spaced apart) creates a distracting striped pattern that divert the reader’s attention from the content.

Line length: Appropriate line spacing for text depends on font size, line spacing, ad length of the lines. A general guideline is to keep line lengths within the range of 55-65 characters. Extremely long or short line lengths can hinder the reading experience.

Figure 1.2.9 Tight VS Loose Leading, Week 2 (3/10/2023)

5. Type Specimen Book

A type specimen book shows examples of typeface in a range of sizes. It is used by designers as a reliable guide for referencing different aspects of typography, such as typefaces, font sizes, line spacing, and line length. Designers also use this book to make a choice on which typefaces that are suitable to use.

Figure 1.2.10 Sample Type Specimen Sheet, Week 2 (3/10/2023)

10 October 2023

Lecture 4

Week 3 - Text_P2

1. Indicating Paragraphs

Pilcrow (¶): A holdover from medieval manuscripts seldom use today. It is considered a hidden character or blue indicator that will aid in formatting large amount of texts.

Figure 1.3.1 Pilcrow, Week 3 (10/10/2023)

Line space (leading*): Space between the paragraphs / two sentences. This will ensure cross alignment across columns of text. For instance, if the line space is 10pt, the paragraph space should be 10pt as well.

Figure 1.3.2 Leading & Line Space, Week 3 (10/10/2023)

Standard Indentation: Indent is the same of the line spacing or the same point as the line of the text.

Figure 1.3.3 Standard Indentation, Week 3 (10/10/2023)

Extended Indentation: Creates wide columns of text. There can be a strong compositional or functional reasons for choosing it.

Figure 1.3.4 Extended Indentation, Week 4 (10/10/2023)

2. Widows & Orphans

Widows: a short line of text left alone at the end of a column text

Orphans: a short line of text left alone at the start of a column text

Figure 1.3.5 Widows and Orphans

The only way to solve widows is to re-break your line endings in the paragraphs so that the last line of the paragraph is not noticeable short. To prevent orphans, typographers need to make sure that there are no instances where a column of text begins with the final line of the previous paragraph. Designers who uses a huge amount of text (Magazine designers) must be extra careful of this.

3. Highlighting Text

There are different ways to highlight within a column of text. These methods to highlight includes:

Use the same typeface

- use fonts such as Italic, Bold, Semi Bold... or use a different colour

Figure 1.3.6 Italic, Bold, Colour, Week 3 (10/10/2023)

Use a different typeface

- e.g: The sans serif font (Univers) has been reduced by .5 to match the x-height of the serif typeface

Figure 1.3.7 Sans Serif Font, Week 3 (10/10/2023)

Place a field of colour

- it can highlight the text and make it stand out. To ensure readability, it is best to maintain the left reading axis of the text

Figure 1.3.8 Placing a field of colour at the back of the text, Week 3 (10/10/2023)

Place typographic elements

- Position specific typographic elements on the left margin of a text column to preserve a clear reading alignment. For example: Bullet Points & Quotation Marks

Figure 1.3.9 Placing bullets, Week 3 (10/10/2023)

- Quotation marks have the potential to make a noticeable indentation by breaking the left reading alignment.

Figure 1.3.10 Quotation Marks, Week 3 (10/10/2023)

4. Headline within text

There are various forms of text division within a text of the chapter. In the photos below, it can be seen that the divisions have been designated with labels (A, B, and C) which corresponds to their respective levels of importance.

A head is the most important among all. It indicates a clear break between topics with sections.

Figure 1.3.11 A heads, Week 3 (10/10/2023)

B head is the subordinate to A heads which indicates a new supporting document or argument for the topic at hand so that it won't interrupt the text as strongly as A head. B heads are shown in small caps, italic, bold serif, and bold san serif.

Figure 1.3.12 B heads, Week 3 (10/10/2023)

C heads are not that common, it highlights specific facets of material within B head text. C heads in the configuration are followed by at least an em space for visual separation.

Figure 1.3.13 C heads, Week 3 (10/10/2023)

5. Cross Alignment

This example shows one headline type cross aligns with two lines of text.

Figure 1.3.14 Cross Alignment, Week 3 (10/10/2023)

17 October 2023

Lecture 5

Week 4 - Text_Basic

1. Describing Letterforms

We are familiarising ourselves with the lexicon, which is known as terminologies in Typography.

Baseline: Imaginary line as the visual base of the letterforms

Median: Imaginary line of the x-height of letterforms

X-height: Height of lowercase 'x' in any typeface

Stroke: Any line that defines the basic letterform

Apex / Vertex: The point created by joining two diagonal stems (apex above and vertex below)

Arm: Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y)

Ascender: The portion of the stem of a lowercase letterform that projects above the median

Barb: The half-serif finish on some curved stroke

Beak: The half-serif finish on some horizontal arms

Bowl: The rounded form that describes a counter. The bowl may be either open or closed

Bracket: The transition between the serif and the stem

Cross Bar: The horizontal stroke in a letterform that joins two stems together

Cross Stroke: The horizontal stroke in a letterform that joins two stems together

Crotch: The interior space where two strokes meet

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

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 letterforms

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 lowercase 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

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

Swash: The flourish that extends the stroke of the letterform

Tail: The curved diagonal stroke at the finish of certain letterforms

Terminal: The self-contained finish of a stroke without a serif. This is something of a catch-all term. Terminals may be flat (‘T’ above), flared, acute, (‘t’ above), grave, concave, convex, or rounded as a ball or a teardrop (see finial)

Figure 1.4.1 Describing Letterforms, Week 4 (17/10/2023)

2. The Font

A complete typeface consists more than just the 26 letters of the alphabet. It includes numerals and a selections of punctuation marks. It is essential to know how to work with type, a full font, and how to use it.

Uppercase: capital letters, containing certain accented vowels
Lowercase: includes some character as uppercase
Small capitals: Uppercase letterforms drawn to x-height of typeface

Figure 1.4.2 Uppercase and Lowercase letters, Week 4 (17/10/2023)

Uppercase Numerals: also known as lining figures, these numerals are the same height as uppercase letters and is set to the same kerning width. They are used with tabular material or in any situation that calls for uppercase letters

Lowercase Numerals: also known as old style figures, they are set to the same x-height of ascenders & descenders. It is best used when you would use upper and lowercase letterforms

Figure 1.4.3 Uppercase and Lowercase Numerals, Week 4 (17/10/2023)

Italic: most fonts today are produced with a matching italic. Small caps, however, are almost always only roman. The forms in a italic refer back to 15th century Italian cursive handwriting. Oblique is based on the roman form of this typeface

Figure 1.4.4 Italic, Week 4 (17/10/2023)

Figure 1.4.5 Italic vs Roman, Week 4 (17/10/2023)

Punctuation, miscellaneous characters: Although all fonts contain standard punctuation marks, it can vary from different typefaces. It is important to be acquainted with the characters in a typeface before choosing the appropriate type for a particular job

Ornaments: used as flourishes in invitations or certificates. They usually provide a font in a larger typeface family. Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family. For instance: Adobe Caslon Pro

Figure 1.4.6 Punctuation and Miscellaneous Characters, Week 4 (17/10/2023)

Figure 1.4.7 Ornaments, Week 4 (17/10/2023)

3. Describing Typefaces

Roman: The letterform is called Roman because the uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in Roman is known as 'book'.

Italic: It is named for 15th century Italian handwriting

Boldface: Characterised by a thicker stroke than a roman form, it can also be called 'semibold', 'medium', 'black', 'extra bold', or super.

Oblique: Conversely are based on roman form of typeface

Light: A lighter stroke than roman form. Even lighter strokes are called 'thin'

Condense: A version of the roman form, and extremely condense styles are often called 'compressed'

Extended: An extended variation of a roman font

Figure 1.4.8 Different Typefaces, Week 4 (17/10/2023)

4. Comparing Typefaces

The ten typefaces highlighted and given by Mr Vinod represents 500 years of type design. The designers behind these typefaces all shared two objectives and gorals, which was: east readability and an appropriate expression of contemporary esthetics.

Figure 1.4.9 The 10 typefaces, Week 4 (17/10/2023)

୨୧ __________________________________________________________ ୨୧

INSTRUCTIONS

Task 1: Exercises (20%)

Express and compose 4 words given— Chop-chop, Windy, Dive, Stab, Roar, Illusion, Huge, Shock. Only work with set of 10 typefaces in the digitisation phase. No colours are allowed. Compose the letters that allows meaning of the word to become visible (STILL & IN MOTION)

Exercises:

1. Type Expression

JPEG artwork: File > Export > Export As > Format: select JPEG > tick: Use Artboards > Range: Select Artboard Number > Export > Colour Model: Grayscale > Resolution 300ppi > Ok

2. Type Formatting

Type choice, type size, leading, line-length, paragraph spacing, forced-line break, alignment, kerning, widows and orphans and cross-alignment

Marking Criteria:

Each expression to be explored with a great variety of ideas
All expressions are perfectly matched in meaning
Typographic solutions are well composed and balanced
Expression is excellently crafted (technical), memorable and engaging
Textural Information is well formatted (font-size, line-length, leading, alignment, cross alignment, reading rhythm, information hierarchy, sands widows, and orphans)

Learning Goals:

To be able to compose and express using textual information
To be able to format text for effective communication

Timeframe:

Week 01 - 05 (Deadline: Week 06)

Read more about this module below

Document 2.1 Module Information Booklet (MIB) of Typography

୨୧ __________________________________________________________ ୨୧

PROCESS WORK

Task 1A: Type Expression

3.1 Research

We were given 8 words to vote through Microsoft Teams. These chosen words will be used to create our type expressions.

The final selected words are: Chop-chop, Windy, Dive, Stab, Roar, Illusion, Huge, Shock

Among these words, I decided to pick: (4 words) Illusion, Windy, Dive, Shock

Before I start sketching my desired type expressions, I have searched online from Pinterest for some inspiration to get some ideas as a head-start. I looked for type expressions, along with the words I have chosen.

Below are some inspiration photos I downloaded from Pinterest.

Figure 3.1.1 References for the words "illusion, windy, dive, shock", Week 2 (3/10/2023)

Note: Links are clickable

I understood that some words might be used to represent ideas in various ways, so I looked up the definitions of each term and distilled them. Hope this can inspire some better ones.

Illusion /ɪˈl(j)uːʒn/ 1. An instance of a wrong or misinterpreted perception of a sensory experience. 2. A deceptive appearance or impression. 3. A false idea or belief.

Windy /ˈwɪndi/ 1. Characterized by exposed to strong winds. 2. Suffering from, marked by, or causing an accumulation of gas in the alimentary canal. 3. Using or expressed in many words that sound impressive but mean little. 4. (of a person) nervous or anxious about something

Dive /dʌɪv/ 1. Plunge head first into water with one's arms raised over one's head. 2. (of an aircraft or bird) plunge steeply downwards through the air.

Shock /ʃɒk/ 1. A sudden upsetting or surprising event or experience. 2. An acute medical condition associated with a fall in blood pressure, caused by such events as loss of blood, severe burns, allergic reaction, or sudden emotional stress, and marked by cold, pallid skin, irregular breathing, rapid pulse, and dilated pupils.

3.2 Ideation

1. Sketches

The words I picked are: Illusion, Windy, Dive, and Shock. I find these words to be interesting and fun to work with, as it lingers my creativity. To begin, I looked through the ten fonts given, and compiled them in a Google Slide to ease the process of drafting the text expressions.

The Given 10 Fonts

Figure 3.1.2 10 Fonts, Week 2 (3/10/2023)

After deciding on the design of my text expressions, I looked through all the fonts given and concluded them in one page. Attached below are the few sketches of my text expressions.

Figure 3.1.3 Sketches, Week 2 (3/10/2023)

First Page:

Top Row- Illusion

Middle Row- Shock

Bottom Row- Dive

Second Page:

Top Row- Windy

The words above are sketched manually with pencil so that it is to visualise the idea and correct any mistakes along the process. Some of my favourite designs for each word would be Illusion #1, Shock #5, Dive #2, Windy #3. However after a few consultations with Ms Hsin Yin, she recommended to make a few changes to some of the sketches.

2. Digitisation

During the process in digitisation using Adobe Illustrator, I received feedback from Ms Hsin Yin saying that I should try to digitalise the words she thinks its best and most creative. For each type expression, I made a few modifications to make all the words look nicer. I also made sure to try different typefaces so that it is suitable for its definition.

Figure 3.2.1 Digitisation Process, Week 2 (7/20/2023)

1. Windy

Figure 3.2.2 Digitisation Process for Windy, Week 2 (7/10/2023)

For "Windy", I chose the typeface "Bembo STD" in bold italic, semibold, italic, and regular. The letters "W & I" are bolded while the rest are "regular & thin" so that it looks like the wind is blowing from the left to the right, which meets the definition of "Windy". Furthermore, the letters are then adjusted to different sizes, and in an upwards motion.

2. Dive

Figure 3.2.3 Digitisation Process for Dive, Week 2 (7/10/2023)

All letters seen in the word "Dive" are using the typeface "Gill Sans STD", the illustration inside the word "Dive" represents water, which can relate to its definition. To make the type expression look more believable, I changed the "I" from capital to small capital. Therefore, the circle in "i" can represent the head of a person, diving into water. Besides that, I also made sure the "person" which is the letter "i" looks like its diving, by tilting it towards the letter "V".

3. Shock

Figure 3.2.4 Digitisation Process for Shock, Week 2 (7/10/2023)

For the word "Shock", I have selected the typeface "Univers LT STD". The 2 letter "O"s that can be seen in the type expression is edited using the extra black extended oblique, and condensed. The reason that these letter "O"s are bolded, thin, and repeated are to show the expression of "Shock" which defines the word. After receiving feedback from Ms Hsin Yin, she recommended to focus on emphasising the letter "O" instead of emphasising the rest of the letters in the word.

4. Illusion

Figure 3.2.5 Digitisation Process for Illusion, Week 2 (7/10/2023)

The typeface used in the word "Illusion" is "Serifa STD". To show the illusion for the word, I made the letter "u' and "o" the inverted colour, and distorted the sides and corners of the letter "L, S, I, N" so that the letters can shape the letter "U & O", making it easily visible. With the help of Ms Hsin Yin, I have learnt to create the shape inside "U & O" by turning the font into images and filling it in with black. I have applied this during the process of creating this type expression.

Final Type Expression

After applying a few minor changes on the type expression "illusion", which where I have made the letter "l & i" to look cleaner at the sides, and made the object inside of "u & o" cleaner. Here are the final type expressions for each word:

Figure 3.2.6 Final Type Expression - JPEG, Week 3 (10/10/2023)

Figure 3.2.7 Final Type Expression - PDF, Week 3 (10/10/2023)

3. Type Expression Animation

Figure 3.2.8 First attempt at animating "illusion", Week 3 (10/10/2023)

I initially tried to animate the word "illusion" by making the "u & o" fade away and slowly joined together to create the illusion of "u & o". To rate a smoother transition from "u & o" dissapearing, I have to make sure to move the letters on the left and the right. Besides that, I realised that the optical illusion of "u & o" is too fast paced and could have been slower After considering on the changes I need to make to improve my GIF animation, attached below are the few of my attempts:

Figure 3.2.9 Second attempt at animating "illusion", Week 3 (10/10/2023)

After correcting a few minor problems such as, adjusting some frame sizes, moving both left and right of the letters to the middle, and turning the middle object of "u & o" into a cleaner shape. This is the draft for my second attempt at animating "illusion". I realised that the letters move very messily as there's too many frames. Hence for my next attempt, I have decided to re-do and make sure to move the letters slowly at the same time so the letters would not move messily in different directions. Besides that, I have decided to cut down some frames as the current amount of frames may have affected the smooth transition of the letters. Current number of frames: 29.

Figure 3.2.10 Third attempt at animating "illusion", Week 3 (10/10/2023)

I redid from the very start and made the movement more tidy and clean. Compared to before, the letters from the left and right are moving towards the middle together, rather than having it moving left and right simultaneously. After reducing the number of frames, the current GIF consists of 12 frames in total. But after some feedback and consultation, it is recommended to make the objects inside "u & o" fade in slowly and smoothly. I will be making a few minor changes for the final outcome.

Figure 3.2.11 Final attempt at animating "illusion", Week 3 (10/10/2023)

I added a few more frames and corrected minor mistakes for my final draft. As seen in the GIF above, there is a continuous flow of the letters moving inwards with no pause (compared to third attempt). Apart from that, the ending of the GIF does not look as awkward. The current frames in this final attempt GIF is 14 frames.

Text Animation Process

Figure 3.2.12 Text animation process: 43+ frames have been created, Week 4 (17/10/2023)

More than 43 frames have been created and edited during the process of making the text animation. But in the very end, the bottom 2 rows have been used to create the final text expression animation for the word "illusion". Below is my final animated type expression:

Figure 3.2.13 Final Animated Type Expression "illusion" - GIF, Week 4 (17/10/2023)

3.3 Final Outcome

Figure 3.3.1 Final Type Expression - PDF, Week 4 (17/10/2023)

Figure 3.3.2 Final Animated Type Expression "illusion" - GIF, Week 4 (17/10/2023)

Task 1B: Type Formatting

For Exercise 2, we were required to create a final layout that involves various aspects of type formatting, which includes: kerning, paragraph spacing, leading, alignment, and so on. The software choice for this exercise would be Adobe InDesign.

1. Kerning and Tracking exercise

We were instructed by Mr Vinod to work with kerning and tracking with our name by using the 10 typefaces that was provided.

Figure 4.1 Text formatting with kerning, Week 4 (20/10/2023)

Figure 4.2 Text formatting without kerning, Week 4 (20/10/2023)

After watching the second text formatting tutorial uploaded by Mr Vinod, I started the process of creating the layout.

Figure 4.3 Layout Process, Week 4 (20/10/2023)

I made several changes and tried different text sizes while perfecting the layout that I like. In the process above, it can be seen that the text was divided into two columns. Besides that, I changed the text to size 10, kerning 12, paragraph spacing 2. Then later on, I experimented with the pictures I have selected for this exercise. It has been cropped and placed in different positions, as seen in the last process photo above.

Before crop and position

Figure 4.4 Original Photo before crop and position, Week 4 (20/10/2023)

After some time, I am happy with the results of the layout. I then proceeded to align the text using Kerning and Tracking. (Key: Option + Arrow Left & Right).

Figure 4.4 Kerning and Tracking Progress, Week 4 (20/10/2023)

To make sure the texts are aligned well, I also went ahead and adjust the text based on grid and baseline. Below are the comparisons:

Figure 4.5 Before and After adjusting the text based on grid and baseline,

Week 4 (20/10/2023)

HEAD

Font/s: ITC Garamond Std

Type Size/s: 20pt, 47pt, 10pt

Leading: 36pt

Paragraph spacing: 0

BODY

Font/s: Futura Std

Type Size/s: 10pt

Leading: 12pt

Paragraph spacing: 4mm

Characters per-line: 55

Alignment: Left Alignment

Margins: 12.7mm top, 12.7mm left, 12.7mm right, 12.7mm bottom

Columns: 4

Gutter: 5mm

Final Outcome

Figure 4.6 Final Text formatting layout - JPEG, Week 4 (20/10/2023)

Figure 4.7 Final Text formatting layout - PDF, Week 4 (20/10/2023)

Figure 4.8 Final Text formatting layout with grids - JPEG, Week 4 (20/10/2023)

Figure 4.9 Final Text formatting layout with grids - PDF, Week 4 (20/10/2023)

୨୧ __________________________________________________________ ୨୧

FEEDBACK

Week 2:
General Feedback: For the E-portfolio, My Vinod mentioned that the format of the blog should include a title, description, labels, break lines, and the content. Everyone must proceed with research, feedback, reflection and further reading. One more to note is that, type expressions should not include any graphic or drawing elements. ONLY create the type expression by using the 10 typefaces given.

Specific Feedback: Ms Hsin Yin reminded me to complete my lecture notes in my E-portfolio. Besides that, I should have some drafts for my type expressions, to show process and get feedback and improve.

Week 3:

General Feedback: For the E-portfolio, everyone must remember to update it often. Type expressions should be digitalised already, and have to focus on animating it into short GIFS. Digitalised text expressions should be in black & white only.

Specific Feedback: Ms Hsin Yin looked through my draft sketches for the text expressions, she mentioned to not use special characters such as ü. She also recommended me to make a few changes in my text expressions, and reminded me to digitalise my text expressions as soon as possible. Complete work in a faster pace.

Week 4:

General Feedback: Update blog every week, make sure to add enough frames so that GIF looks smooth when played.

Specific Feedback: Ms Hsin Yin recommended to try to make the GIF smoothly without any distortion on the font. Can start on fixing my GIF.

Week 5:

General Feedback: Update blog by next week, complete Task 2 Type Expression, and export in different formats.

Specific Feedback: Ms Hsin Yin mentioned to add more frames into my GIF. She also helped me with making minor changes on my text expression "Illusion".

୨୧ __________________________________________________________ ୨୧

REFLECTION

Experience:

It was interesting to learn how typography was introduced to this world, and have evolved since then. During the first 2 weeks of Typography class, I felt a little lost as I had never looked into this subject before. Besides that, it was quite hard for me to complete all the tasks on time as I do not own a laptop at home. Besides that, I find Exercise 1 (Type Expression) a little challenging as the fonts given was limited, and that the criteria such as no graphics allowed, was a bit overwhelming. Nevertheless, I have learnt many new skillsets such as learning how to use Adobe Illustrator, Blogger, and so on. With hardwork and dedication, I gradually catched up with my assigned work. Overall, I have learnt a lot from Typography classes and it has been great :)

Observations:

According to my observations during class, I have learnt and realised that it is important to be on track and finish all given tasks prior the upcoming class. Without finishing the tasks given in the beginning week, it is hard to catch up during the next few classes as most tasks are linked to one another. Besides that, I have always been inspired by all the creative people around me. Thanks to the tutors, their feedback has been very helpful and insightful. Even though there are ups and downs throughout Typography class, I still learnt a lot and I appreciate the lessons.

Through task 1, I got familiar with using Adobe Illustrator and Adobe Photoshop. After putting effort into my work and blog, my opinion and understanding about typography totally changed. I am definitely more interested in the subject and am excited for the next tasks.

Upon completing task 1 exercise 2, I realised the enjoyment of creating type formatting, especially kerning and layouts. It is a painful and fun experience, but I definitely enjoyed my time creating these artworks. Besides that, I am thankful that I have mastered a few beginner level skills in Adobe InDesign. I have learned to create visually appealing layouts by using the tools available in Adobe InDesign. These tools includes: font size, kerning, alignment, tracking, and so on.

Findings:

Throughout this journey in Typography class, I have learned to be more discipline and think outside of the box thanks to the many advice and guidance from Ms Hsin Yin and Mr Vinod. I am happy to say that I have learned to use Adobe Photoshop, Illustrator, and InDesign, thanks to the many exercises and practice sessions in Typography class.

୨୧ __________________________________________________________ ୨୧

Search This Blog

Lim Yu Xuen 0359676

Typography: Task 1 / Exercise 1 & 2